Angular 7 服务人员行为怪异答案

【问题标题】：Angular 7 service worker acting weirdAngular 7 服务人员行为怪异
【发布时间】：2019-07-30 15:21:51
【问题描述】：

我们目前正在构建一个 Angular 7 应用程序，并决定还集成 Angular Service Worker 以获得一些 PWA 优势。到目前为止，一切都很好。它运行良好（至少我们认为）并且网站加载速度更快（现在仍然如此）。

但是，缓存的版本根本不准确，因此不会应用任何新的代码版本，除非我们强制刷新（我们不能要求客户这样做）。常规的页面刷新没有任何作用。

最糟糕的是，即使在强制刷新之后，目前我们可以看到新版本，但如果我们几天后访问网站，工作人员正在再次加载旧版本的应用程序（一些发布旧代码但从未一样，不知何故，它就像是在更新它，但有延迟）

请注意，为了实现 worker，我们按照https://angular.io/guide/service-worker-getting-started 的指南一步一步地进行操作

另外，我们在控制台中没有任何错误。

这是我们的配置文件：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我们使用：

Angular 7.2.0
@angular/service-worker: ~7.2.0

我们是新手，因此不确定从哪里开始调查，但我们将不胜感激。谢谢

【问题讨论】：

请检查运行应用程序的服务器是否正确地为 ngsw-worker.json 提供服务。由于是静态资源，所以忘记将json扩展名添加到静态资源扩展名列表中。如果它加载了正确的，您可以在控制台导航选项卡上检查它。如果您构建的服务器时间设置正确，您可以检查服务器时间，它可能会导致一些滑动。目前，我有这个想法。
尝试将updateMode: "prefetch" 添加到应用程序assetGroup。也许这个article会帮助你更好地理解缓存机制。
谢谢大家的回答。我会尝试并回复您让您知道（可能需要 1-2 天）
您遵循的指南清楚地说明了The service worker installed the updated version of your app in the background, and the next time the page is loaded or reloaded, the service worker switches to the latest version.，这就是您所描述的行为。我相信这可以解决您的问题angular.io/guide/service-worker-communications
@JohanFaerch 再次阅读我的问题，unless we force a refresh.....A regular page refresh doesn't do anything.

标签： angular angular7 service-worker angular-service-worker

【解决方案1】：

您是否在构建生产版本后进入 dist 文件夹？一堆散列文件？由于散列，这些文件是唯一的，因此，无论何时构建 Angular 应用程序，您都会看到添加了散列的相同文件，这使得浏览器将它们视为新/更新文件。

例如：

如果您的第一个文件有 scripts.88543e05931e3c6ffbb0.js 构建，那么下一个构建将不会具有相同的哈希，该文件可能是命名为scripts.90921e05931e3c6fe220.js。

但问题是 index.html 没有任何哈希值。所以如果它存储在你的缓存中，你的浏览器知道应用程序发生变化的可能性非常小，所以你有两个选择要么不将index.html存储在浏览器缓存中，要么通过清除存储的缓存通过从您的服务器触发新的代码更新通知并让用户进行点击事件并重新加载页面。

对于方法 1 的使用，

 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

这将使 index.html 不会存储在您的浏览器中

【讨论】：