我该如何在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。

这不可能是它的正常工作方式，对吗？我肯定遗漏了一些显而易见的东西，但我的代码非常简单，几乎是从Workbox网站的示例中拿来的，我不知道我哪里出错了。

编辑：我在GitHub上放了一个非常简单的例子来说明这个问题。我感到很愚蠢 - 这个例子是如此简单，但我仍然不明白为什么它会表现出这样的行为。

- dumbmatter

Answer 1

很抱歉，我在创建悬赏后不久就愚蠢地找到了答案。正如https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle所述：

“一旦成功安装，更新的 worker 将等待现有 worker 控制零个客户端。（请注意，在刷新期间客户端会重叠。）”

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

- dumbmatter

---

有一些配置可以让新的软件立即接管。 - abraham

@abraham - 你能否请指定配置。 - Chetan

@Chetan skipWaiting 和 clientsClaim。 - abraham