Angular 5服务人员无法正常工作 [英] Angular 5 Service Worker not working

问题描述

我尝试在更新到角度5后将服务人员添加到我的项目中，但遇到一些问题。我将导入添加到app.module.ts中：

I try to add service worker to my project after updating to angular 5 and have some problems. I add imports to app.module.ts:

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

执行 $ ng设置apps.0.serviceWorker = true 允许项目中的服务工作者

execute $ ng set apps.0.serviceWorker=true to allow service workers in project

生成配置：

{
  "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"
      }
    }
  ]
}

并显示：

{
  "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"
  }
 ]
}

然后在生产环境中构建它：

Then build it in production:

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

Http服务器以SSL模式运行，但服务缺失chrome开发工具中的工人很清楚。怎么了？可能是该标志破坏了它--aot = false --build-optimizer = false吗？

Http-server run in SSL mode, but lsit of service workers in chrome dev-tools is clear. What's wrong? May be this flags broke it --aot=false --build-optimizer=false?

推荐答案

似乎是一个问题在还导入AngularFire2的模块中注册服务工作者。我找到了如何在main.ts中注册SW的解决方案，就是这样：

Seems to be a problem in registering service worker in module where also importing AngularFire2. I found solution how to register SW in main.ts, that's work:

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

这篇关于Angular 5服务人员无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！