web-dev-qa-db-fra.com

Angular 5 Service Worker ne fonctionne pas

J'essaie d'ajouter le service worker à mon projet après la mise à jour vers angular 5 et j'ai quelques problèmes. J'ajoute des importations à app.module.ts:

import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
...
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],

exécuter $ ng set apps.0.serviceWorker=true pour permettre aux travailleurs des services du projet

générer la configuration:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/",
        "/main",
        "/login",
        "/select-content"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
}

Et manifeste:

{
  "name": "App",
  "short_name": "App",
  "start_url": "/login",
  "theme_color": "#00a2e8",
  "background_color": "#00a2e8",
  "display": "standalone",
 "icons": [
  {
   "src": "assets\/icons\/Android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "assets\/icons\/Android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "assets\/icons\/Android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "assets\/icons\/Android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "assets\/icons\/Android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "assets\/icons\/Android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

Puis construisez-le en production:

ng build --prod --aot=false --build-optimizer=false

Le serveur Http s'exécute en mode SSL, mais de nombreux employés de service en chrome dev-tools est clair. Quel est le problème? Peut-être que ces drapeaux l'ont cassé --aot = false --build-optimizer = faux?

angular5service-workerangular-service-worker
12
Sano Litch

Semble être un problème lors de l'enregistrement de l'employé de service dans le module où il importe également AngularFire2. J'ai trouvé une solution pour enregistrer SW dans main.ts, c'est du travail:

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));
28
Sano Litch