带有 service worker 和 sw-precache 的“新版本可用”

Question

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

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

我期待当我发布一个新的服务工作者时，浏览器会请求新的服务工作者并在后台相应地更新缓存。然后使用registration code in the example，我将能够提示用户刷新并从他们新刷新的缓存中获取最新版本。

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

示例

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

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

我怀疑问题在于我使用以下 sw-precache 配置缓存所有内容：

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

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

步骤和假设

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

2. 重新加载页面
   控制台中的消息不应再次出现，因为已安装 Service Worker，但该页面仍应正常工作。

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

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

5. 重建（运行构建任务和sw-precache）

这就是我的理解有误的地方

6. 重新加载页面

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

7. 重新加载页面

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

问题

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

我不确定如何完成这项工作 - 任何帮助将不胜感激！

Answer 1

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

在previous answer 中提供了有关导致您所看到行为的原因以及最佳做法的更多信息。如该答案顶部所述，浏览器计划更改其行为以默认停止为服务工作者文件提供 HTTP 缓存，这主要是由于您在此处遇到的混淆类型。不过，目前，Chrome 和 Firefox 的生产版本继续采用这些标头。