Angular 2 - Travailleur de service introuvable - Un code de réponse HTTP incorrect (404)

Question

J'ai utilisé sw-precache pour générer un service worker pour une application Angular 2 hébergée Firebase.

erreur:

Service Worker registration failed: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. 

Structure

src- 
    app-- 
    index.html  
service-worker.js 
sw-precache-config.js 

sw-precache-config.js

module.exports = { 
    navigateFallback: '../index.html', 
    stripPrefix: 'dist', 
    root: 'dist/', 
    staticFileGlobs: [ 
    'dist/index.html', 
    'dist/**.js', 
    'dist/**.css' 
    ] 
}; 

index.html

<script> 
    if ('serviceWorker' in navigator) { 
     console.log(navigator.serviceWorker); 

     navigator.serviceWorker.register('service-worker.js').then(function (registration) { 
     console.log('Service Worker registered'); 
     }).catch(function (err) { 
     console.log('Service Worker registration failed: ', err); 
     }); 
    } 
    </script> 

Answer 1

Votre code d'enregistrement de service worker me semble bien. Le problème peut provenir de la structure du projet. Puisque vous avez mentionné la racine en tant que dossier dist, votre fichier service-worker.js doit se trouver dans le dossier dist après avoir exécuté le script ng build . Ajoutez "precache": "sw-precache --verbose --config=sw-precache-config.js" à votre objet scripts package.json.Puis exécutez: ng build --prod --aot, puis npm run precache .Maintenant votre fichier service-worker.js serait présent dans le dossier dist.Si le compilateur angulaire a compilé votre code d'application en fichiers js et l'a stocké dans le dossier dist, maintenant vous devez servir votre application à partir du dossier dist.Mais le service ng par défaut ne le supporte pas. Je vous suggère d'utiliser http-server. npm install http-server -g. Puis http-server ./dist -o. Cela ouvre votre application sur le navigateur par défaut.