时间戳

首页 > 解决方案 > Angular 7 服务人员行为怪异

angular - Angular 7 服务人员行为怪异

问题描述

我们目前正在构建一个 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

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

标签： angularangular7service-workerangular-service-worker

解决方案

你有没有在构建生产版本后进入 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 不会存储在您的浏览器中

推荐阅读