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

我有一个完全静态的站点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做了一些修改。我重新加载我的页面。我在控制台中看到这条消息，表明它已缓存my index.html，尽管它仍在浏览器中显示旧的：

Precaching 1 file. 35 files are already cached.

我相信这是正确的，它在显示缓存的index.html之后缓存新的index.html。那么下一次重新加载它应该显示新的index.html，对吗

错了！再次重新加载，旧的index.html仍会显示。重复多次，没有变化。要实际查看新的index.html，正常的重新加载将永远无法工作，我需要执行ctrl+shift+R

不可能是这样的，对吧？我肯定错过了一些明显的东西，但我的代码非常简单，实际上是从Workbox网站上的示例中提取出来的，我看不出我把事情搞砸了

---

编辑：我把。我觉得自己很愚蠢——这个例子很简单，但我仍然不明白为什么它会这样做。

好吧，在创建悬赏后不久，我愚蠢地找到了答案。正如上面所说：

成功安装后，更新的工作进程将等待现有工作进程控制零个客户端。（请注意，刷新期间客户端重叠。）

---

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

有一些配置会让新的SWs立即接管。@abraham-您能指定配置吗。@Chetan。