注意：这是基于 Ionic 下的 Angular。对于普通的 Angular，一些路径是不同的（例如 www -> dist），应该使用 'ng' 命令而不是 'ionic'，因此请进行相应调整。
第 0 步。添加 @angular/pwa，它将创建用于生产的服务工作者（请参阅任何其他说明）。
步骤 1. 在调试构建中启用服务工作者。通常 SW 仅用于生产，例如在两个实现之一的文件src/app/app.module.ts 中，将“启用”更改为true（或者可以将属性“useServiceWorker”添加到“environment.ts”和“environment.production.ts”文件并将它们都设置为“true”，稍后调试完成后，只需将 environment.ts 文件中的设置更改为“false”）：
imports: [ ...
- ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+ ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }),
],
或
imports: [ ...
ServiceWorkerModule.register('ngsw-worker.js'),
],
providers: [ ...
- { provide: SwRegistrationOptions, useFactory: () => ({ enabled: environment.production }) },
+ { provide: SwRegistrationOptions, useFactory: () => ({ enabled: true }) },
第 2 步。在package.json 文件中的“脚本”中添加一些挂钩。它们旨在确保 'ngsw.json' 文件中的所有文件哈希都是正确的，并且 SW 可以正确加载文件：
{
"scripts": { ...
+ "ionic:serve:before": "...(anything already there)... && echo {} > src/ngsw.json && cp www/ngsw.json src/ngsw.json",
+ "ionic:build:after":"...(anything already there)... && npm run ngsw:rebuild",
+ "postbuild": "...(anything already there)... && npm run ngsw:rebuild",
+ "ngsw:rebuild": "ngsw-config www ngsw-config.json && cp www/ngsw.json src/ngsw.json",
为了让ionic serve 选择该文件，它会在预构建步骤中添加一个空白文件src/ngsw.json，并尝试从 www 文件夹复制计算得到的哈希值。如果“离子服务”失败，请确保首先运行“离子构建”。我知道这一步是不确定的，但没有更好的钩子，例如在“ng serve”中 - 有开放的功能请求。
由于 'src/ngsw.json' 是创建/生成的，它不应该在源代码管理/git 下，所以在 '.gitignore' 文件中添加行 '/src/ngsw.json'。
第 3 步。将 Service Worker 源代码和配置添加到您的调试版本中。在文件angular.json 中添加行，将“ngsw-worker.js”和“ngsw.json”复制到 www/（生产构建会自动执行此操作，这将在调试构建期间复制）：
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"assets": [
+ {
+ "glob": "ngsw-worker.js",
+ "input": "node_modules/@angular/service-worker",
+ "output": "."
+ },
+ "src/ngsw.json",
...
第 4 步。构建调试版本（确保 ngsw.json 中的当前哈希值），然后使用 HTTPS 提供服务。 'ionic serve' 有 --ssl 和 --external 选项（--external 允许在例如手机上打开应用程序）：
ionic build
ionic ssl generate ;# creates SSL certs in .ionic/ssl/: cert.pem and key.pem
ionic serve --external --ssl
另一种选择是使用任何适当的 HTTP 服务器，它可以为单页应用程序 (SPA) 执行 SSL 和代理。当代理和 ssl 选项混合使用时，包 'http-server' 不能很好地工作，所以使用例如'local-web-server' 代替：
npm install -g local-web-server
ws -p 8100 --cert .ionic/ssl/cert.pem --key ,ionic/ssl/key.pem --https --spa index.html --directory www
第 5 步。将证书添加到您的浏览器 CA 列表。对 Chrome 使用以下步骤（或对其他浏览器使用谷歌）：
https://www.nullalo.com/en/chrome-how-to-install-self-signed-ssl-certificates/
完成！打开 Chrome 并导航到 https://localhost:8100，查看已加载 Service Worker 的控制台。如果控制台中有任何错误，请追溯之前的步骤 - 框架变化很快，可能已经有所不同。