＆＃34;新版本＆＃34;与服务工作者和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/"
}

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

步骤和假设

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

2. 重新加载页面
   控制台中的消息不应再次出现，因为已安装了服务工作者，但页面仍然可以正常工作。

3. 离线并重新加载页面
   该页面仍应有效

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

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

这是我的理解一定是错误的

1. 重新加载页面

   • 服务工作者应该在后台更新缓存
   • 完成后，您应该在控制台中看到New or updated content is available.
   • 在下次重新加载
   之前，不应显示实际的可见更改

2. 重新加载页面

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

问题

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

我不确定如何使这项工作 - 非常感谢任何帮助！

Answer 1

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

在此previous answer中，有关于为什么会导致您所看到的行为以及最佳做法的更多信息。正如该答案的顶部所述，浏览器计划默认更改其行为以停止尊重服务工作文件的HTTP缓存，这主要是由于您在此处遇到的混淆类型。但就目前而言，Chrome和Firefox的生产版本仍继续遵循这些标题。