"New version available" 使用服务工作者和 sw-precache

"New version available" with service worker and sw-precache

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

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

我原以为当我发布一个新的 service worker 时,浏览器会请求新的 service worker 并在后台相应地更新缓存。然后使用 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. 重新加载页面
    控制台中的消息应该不会再次出现,因为已安装服务工作者,但页面应该仍然有效。

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

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

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

这肯定是我理解错误的地方

  1. 重新加载页面

    • service worker 应该在后台更新缓存
    • 完成后,您应该会在控制台中看到 New or updated content is available.
    • 实际可见的更改在下次重新加载之前应该不可见
  2. 重新加载页面

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

问题

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

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

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

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