Angular的PWA ServiceWorker在初始状态下只在Production环境中运行。

开场白

假设按照Angular的官方步骤安装了PWA。

ng add @angular/pwa --project *project-name*

在这种情况下，只有在生产环境构建的情况下，ServiceWorker 才会起作用。
如果尝试重新加载浏览器中进行了调试构建的内容，则网站应该无法打开。

处理步骤

如果在angular.json上创建了除production以外的配置（例如staging），要想在这些环境中使ServiceWorker运行，需要进行以下更改。

app.module.ts => 应用程序模块.ts

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

根据需要，我们会相应地修改启用条件。如果在演示环境中也进行了生产环境的设置，那么在这个位置上的更改是不必要的。但如果不是这样的运营环境，我们需要单独准备一个ServiceWork的操作标志。

export const environment = {
  production: false,
  enableServiceWorker: true,
};

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

angular.json 只需要一个中文选项

{
  "version": 1,
  "projects": {
    "*project-name*": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "serviceWorker": true,
              "ngswConfigPath": "*project-name*/ngsw-config.json"

serviceWorker, ngswConfigPath の２項目を、configurations以下の他の項目にコピー

          "configurations": {
            "staging": {
              // 以下２行を追加
              "serviceWorker": true,
              "ngswConfigPath": "*project-name*/ngsw-config.json"

确认动作

请在进行以上步骤后，使用更改后的设置重新构建，打开网页并重新加载浏览器。如果设置正确，应该会显示缓存页面。