angular5 – Angular 5 Service Worker无法正常工作

发布时间：2020-12-17 07:20:56 所属栏目：安全来源：网络整理

导读：我尝试在更新为angular 5之后将service worker添加到我的项目中并遇到一些问题.我将导入添加到app.module.ts： import {ServiceWorkerModule} from '@angular/service-worker';import {environment} from '../environments/environment';...environment.prod

我尝试在更新为angular 5之后将service worker添加到我的项目中并遇到一些问题.我将导入添加到app.module.ts：

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

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

生成配置：

{
  "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","density": "1.0"
  },{
   "src": "assets/icons/android-icon-72x72.png","sizes": "72x72","density": "1.5"
  },{
   "src": "assets/icons/android-icon-96x96.png","sizes": "96x96","density": "2.0"
  },{
   "src": "assets/icons/android-icon-144x144.png","sizes": "144x144","density": "3.0"
  },{
   "src": "assets/icons/android-icon-192x192.png","sizes": "192x192","density": "4.0"
  }
 ]
}

然后在生产中构建它：

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

Http-server以SSL模式运行,但chrome dev-tools中的lsit服务工作者很清楚.怎么了？可能是这个标志打破了它–aot = false –build-optimizer = false？

在模块中注册服务工作者似乎是一个问题,同时也导入AngularFire2.我找到了如何在main.ts中注册SW的解决方案,这是有效的：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!