服务工作者和sw-precache提供"新版本"

Question

我正在尝试使用sw-precache,但我一定做错了!

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

我期待当我发布新的服务工作者时,浏览器会请求新的服务工作者并在后台相应地更新缓存.然后使用示例中的注册代码,我将能够提示用户刷新并从其新刷新的缓存中获取最新版本.

如果有人能指出我正确的方向,我真的很感激.

例

为了演示这个问题,我在这里创建了一个独立的例子: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)

这是我的理解一定是错的

6. 重新加载页面

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

7. 重新加载页面

   • 这次浏览器将使用新的缓存
   • 现在可以看到这些变化!
   • 控制台中不应该有任何消息

问题

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

我不确定如何使这项工作 - 任何帮助将不胜感激!

Answer 1

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

在上一个答案中,有更多信息可以说明这导致您所看到的行为以及最佳实践.正如在该答案的顶部所提到的,浏览器计划在默认情况下改变其行为以停止尊重服务工作文件的HTTP缓存,这主要是由于您在此处遇到的混淆类型.但就目前而言,Chrome和Firefox的生产版本仍继续遵循这些标题.