7

我正在尝试使用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）

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

  1. 重新加载页面

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

  2. 重新加载页面

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

问题

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

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

4

1 回答 1

12

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

在此处输入图像描述

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

于 2017-01-03T16:21:30.563 回答