angular - 无法使用 Angular cli 以 Angular 注册服务 worker

Question

我正在尝试将我的 Angular 应用程序转换为 PWA，因此尝试使用 npm install @angular/service-worker --save 和 ng add @angular/pwa< 添加服务 worker 之后，我使用 ng build --prod 在生产模式下构建应用程序，并使用 ng serve --open 为应用程序提供服务，但在控制台中 -->应用程序选项卡我的 manifest.json 运行正常，但 service worker 没有注册并且在 service worker 部分没有显示任何内容。

这是我的 src/index.html
这是我的 src/main.ts
这是我的 angular.json
这是我的 ngsw-config.json
这是我的 src/app/app.module.ts

Answer 1

Service Worker 运行 ONLY ON HTTPS domain .. 如果你在 localhost 上测试它就不能工作 .. 也许尝试使用 angular cli 运行你的 localhost 站点:

ng serve --prod --ssl=true

希望对你有帮助

也可以在 main.ts 文件中尝试:

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

并仔细检查您的 dist 文件夹中是否有所有必要的文件:

ngsw-worker.js

和

 ngsw.json 

如您在屏幕截图中所见