实际上如何显示来自Workbox的更新的index.html?

时间:2018-09-14 03:06:21

标签: javascript google-chrome service-worker workbox

我有一个完全静态的站点-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网站上的示例中提取的,我看不到我在搞什么。

编辑:我放了a ridiculously simple example of this problem on GitHub。我觉得很愚蠢-这个例子很简单,但是我仍然不知道为什么它会像它那样。

1 个答案:

答案 0 :(得分:3)

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

“一旦成功安装,更新的工作程序将等待,直到现有工作程序控制零个客户端为止。(请注意,客户端在刷新过程中会重叠。”

因此刷新将永远不会切换到新版本,您必须完全关闭应用程序的所有打开的标签,然后再次导航到它。看来确实可行。