“新版本可用”与服务人员和sw-precache

Question

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

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

我希望当我发布一个新的服务工作人员时，浏览器将请求新的服务工作人员并相应地在后台更新缓存。然后，使用示例中的注册代码，我将能够提示用户刷新并从他们新刷新的缓存中获取最新版本。

如果有人能给我指明正确的方向，我会非常感激的。

示例

为了演示这个问题，我在这里创建了一个孤立的示例：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. 重新加载页面

- The service worker should update the cache in the background
- When its done, you should see `New or updated content is available.` in the console
- The actual visible changes should not be visible until the next reload

​

1. 重新加载页面

- The browser will use the new cache this time around
- The changes should be visible now!
- There shouldn't be any messages in the console

​

问题所在

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

我不知道如何使这个工作-任何帮助都会非常感谢！

Answer 1

在复制您的开发宿主环境之后，我可以看到您正在为您的service-worker.js文件提供一个小时的浏览器HTTP缓存生存期：

​

​

还有更多的信息，说明为什么这会导致您在这个先前的回答中看到的行为以及最佳实践。正如答案顶部所提到的，浏览器计划更改其行为，以停止默认情况下维护服务工作者文件的HTTP缓存，这主要是由于您在这里遇到的混乱类型。不过，目前Chrome和Firefox的生产版本仍在遵守这些标头。