Firebase 托管（Angular 8 + Service Worker）不会在刷新时更新

Question

我拥有quackr.io并且遇到了一些麻烦，用户看不到我的代码的新版本。 quackr 是部署在 Firebase 托管上的 PWA（Angular SSR + Service Worker）。

每当我部署新版本时，以前浏览过该站点的任何人都会看到旧版本。 如果您进行硬刷新，您将看到新版本。 但是，如果您再进行一次正常的页面刷新，它将恢复到旧版本。

• 页面刷新：接收旧版本
• 硬刷新：接收新版本（但在我再次正常刷新后立即获取旧版本）
• 在 chrome 中取消注册 service worker 并进行正常刷新：接收新版本（但在我进行第二次刷新后也会立即获取旧版本）。
• 我已经清除了所有浏览器缓存、cookies 和存储。 同样，这适用于初始刷新，但不适用于任何后续刷新。

这是我的 firebase.json （我希望向 service worker js 添加 no-cache 它会在部署时失效，但它不起作用）：

{
  "hosting": {
    "public": "dist/browser",
    "headers": [
    {
      "source": "/@(ngsw-worker.js|ngsw.json)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache"
        }
      ]
  } 
  ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

ngsw-config.json：

{
  "index": "/index.html",
  "appData": {
    "name": "quackr.io",
    "description": "v2.0"
  },
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  },
  {
    "name": "fonts",
    "resources": {
      "urls": [
        "https://fonts.googleapis.com/**"
      ]
    }
  }]
}

https://quackr.io/ngsw-worker.js

任何帮助将不胜感激，谢谢大家！

Answer 1

您将需要使用 Angular 的 Service Worker 更新功能，该功能将监视应用程序中的任何新更改，然后刷新页面或通知用户有关更新的信息，并为他们提供自行刷新的选项：

看这个例子：

constructor(
        private swUpdate: SwUpdate,
        private snackbar: MatSnackBar
    ) {
        this.swUpdate.available.subscribe(evt => {
            const snack: any = this.snackbar.open(`Updates Available`, 'Reload');

            snack.onAction().subscribe(() => {
                window.location.reload();
            });

            snack.setTimeout(() => {
                snack.dismiss();
            }, 6000);
        });
    }

原始文档：
https://angular.io/api/service-worker/SwUpdate

更多信息：
https://alligator.io/angular/service-worker-updates/

这是我的 Firebase.json 文件

{
  "hosting": {
    "public": "dist/myApp",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "max-age=31557600"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31557600"
          }
        ]
      },
      {
        "source": "**/*.@(svg|ico|json|mp3)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31557600"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix %RESOURCE_DIR% run lint",
      "npm --prefix %RESOURCE_DIR% run build"
    ],
    "source": "functions"
  },
  "emulators": {
    "functions": {
      "port": "5005"
    }
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}