angular - 如何启用 Angular PWA 服务工作者？

Question

在 Angular 项目中，使用命令行运行以下命令：

ng add @angular/pwa  
ng build --prod

/dist 文件夹中的输出作为静态网站发布。
https://azureadb2ctesting1.z9.web.core.windows.net/

通过PWABuilder运行 URL 时，会检测到清单，但不会检测到 service worker。此外，将 Chrome devtools 中的网络更改为 时offline，页面无法正常加载，而是显示“没有 Internet 连接”。

还要注意控制台中的以下错误：

main.cb0300ed077227f6fc7f.js:1 Service Worker 注册失败：DOMException: 无法使用脚本 (' https :// azureadb2ctesting1.z9.web.core.windows.net/ngsw-worker.js ')：脚本具有不受支持的 MIME 类型（'text/plain'）。

如何为这个 Angular PWA 启用 service worker？

标签： angularservice-workerprogressive-web-apps

Answer 1

在 angular.json 你应该有："serviceWorker": true

在您的应用程序根模块中，您应该在 import 中有以下行：

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })