带有 Service Worker 和 sw-precache 的“新版本可用”

我正在尝试使用sw-precache，但我一定做错了什么！

我主要使用以下提供的演示代码github 仓库并且似乎无法获得应用程序的更新。一旦第一次被缓存，它就不会检查新版本。

我期望当我发布新的 Service Worker 时，浏览器会请求新的 Service Worker 并在后台相应地更新缓存。然后使用示例中的注册码，我将能够提示用户刷新并从新刷新的缓存中获取最新版本。

如果有人能指出我正确的方向，我将非常感激。

Example

为了演示这个问题，我在这里创建了一个单独的示例：https://github.com/stevenocchipinti/sw-precache-demo

该示例使用的基本骨架来自create-react-app它有一个内置的构建任务，负责对文件名进行指纹识别等。

我怀疑问题出在我使用以下内容缓存所有内容sw-precache config:

{
  "staticFileGlobs": [ "build/**/*.*" ],
  "stripPrefix": "build/"
}

存储库的自述文件中有更准确的步骤，但我重现问题所采取的基本步骤如下（我的期望可能不正确）。

步骤和假设

1. 首先浏览到应用程序
   我应该看看Content is now available offline!在控制台中

2. 重新加载页面
   由于安装了 Service Worker，控制台中的消息不应再次出现，但页面应该仍然可以工作。

3. 离线并重新加载页面
   该页面应该仍然可以工作

4. 对源代码进行可见的更改

5. 重建（运行构建任务并sw-precache)

这就是我的理解一定是错误的地方

1. 重新加载页面

   • Service Worker 应在后台更新缓存
   • 完成后，您应该看到New or updated content is available.在控制台中
   • 实际可见的更改应该在下次重新加载之前才可见

2. 再次重新加载页面

   • 这次浏览器将使用新的缓存
   • 更改现在应该可见！
   • 控制台中不应该有任何消息

问题

一旦应用程序最初被缓存，它就永远不会更新，除非您取消注册服务工作者或强制重新加载。

我不知道如何进行这项工作 - 任何帮助将不胜感激！

复制您的开发托管环境后，我可以看到您正在为您的service-worker.js浏览器 HTTP 缓存生命周期为一小时的文件：

有关为什么这会导致您所看到的行为的更多信息以及最佳实践，请参见之前的回答。正如该答案顶部提到的，浏览器计划更改其行为，以默认停止支持服务工作线程文件的 HTTP 缓存，这主要是由于您在这里遇到的混乱类型。不过，目前 Chrome 和 Firefox 的生产版本仍然遵循这些标头。