如何从Workbox实际显示更新的index.html？

Question

我有一个完全静态的站点 - index.html和一些CSS/JS/PNG文件.我想使用服务工作者来缓存所有这些.似乎Workbox应该让这很容易.这是我的sw.js:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute('/index.html');

这是我的构建脚本:

const workboxBuild = require("workbox-build");

// NOTE: This should be run *AFTER* all your assets are built
const buildSW = async () => {
  console.log("Generating sw.js...")

  const {count, size, warnings} = await workboxBuild.injectManifest({
    swSrc: "src/sw.js",
    swDest: "build/sw.js",
    globDirectory: "build",
    globPatterns: [
      "**/*.{js,css,html,png}",
    ]
  })

  warnings.forEach(console.warn);
  console.log(`${count} files will be precached, totaling ${size} bytes.`);
}

buildSW();

这一切似乎都很好.构建脚本运行,服务工作程序被激活,即使我处于脱机状态,我的站点也会继续工作.太棒了!

然后我对index.html进行了一些修改.我重装了我的页面.我在控制台中看到此消息,表明它已缓存我的index.html,尽管它仍在浏览器中显示旧的:

Precaching 1 file. 35 files are already cached.

我相信这是正确的,它在显示缓存的一个后缓存新的index.html.那么接下来重装它应该显示新的index.html,对吗？

错误!再次重新加载,旧的index.html仍然显示.重复这几次,没有变化.要实际看到新的index.html,正常的重新加载永远不会工作,我需要做ctrl + shift + R.

这不可能是它应该如何工作,对吧？我必须遗漏一些明显的东西,但是我的代码非常简单,几乎从工作箱网站上的示例中提取出来,我看不出我搞砸了.

编辑:我在GitHub上提出了这个问题的一个非常简单的例子.我觉得非常愚蠢 - 这个例子很简单,但我仍然无法弄清楚它为什么会这样.

Answer 1

好吧，我在创建赏金后不久就愚蠢地想出了答案。正如https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle所说：

“成功安装后，更新后的工作人员将等到现有工作人员控制零客户端。（请注意，客户端在刷新期间重叠。）”

因此刷新永远不会切换到新版本，您必须完全关闭应用程序的所有打开选项卡，然后再次导航到它。这似乎有效。