javascript - 新服务 worker 的 sw-precache 激活是否保证缓存破坏？

Question

我正在使用 sw-precache 和 sw-toolbox 来允许离线浏览 Angular 应用的缓存页面。

该应用程序通过 node express 服务器提供服务。

我们遇到的一个问题是 index.html 有时似乎没有在缓存中更新，尽管其他 Assets 已在激活新 service worker 时更新。

这给用户留下了一个过时的 index.html，在这种情况下它试图加载不再存在的版本化 Assets /scripts/a387fbeb.modules.js。

我不完全确定发生了什么，因为似乎在正确更新了 index.html 的不同浏览器上具有相同的哈希值。

在一个浏览器上过时的(有问题的)Index.html

(使用 2cdd5371d1201f857054a716570c1564 哈希缓存)包括:

<script src="scripts/a387fbeb.modules.js"></script>

在其内容中。 (此文件不再存在于缓存中或远程)。

在另一个浏览器上更新(好的)index.html

(使用相同的 2cdd5371d1201f857054a716570c1564 缓存)包括:

<script src="scripts/cec2b711.modules.js"></script>

两者有相同的缓存，虽然返回给浏览器的内容不同!

我该怎么办？这是否意味着 sw-precache 不能保证新软件激活时的原子缓存破坏？如何避免这种情况？

如果这些有帮助，这是 generated service-worker.js来自 sw-precache 的文件。

注意:我意识到我可以使用remoteFirst 策略(至少对于index.html)来避免这种情况。但我仍然想了解并想出一种方法来使用 cacheFirst 策略来充分利用性能。

注意 2:我在其他相关问题中看到，可以更改缓存的名称以强制破坏所有旧缓存。但这似乎打败了 sw-precache 只破坏更新内容的想法？这是要走的路吗？

注意 3:请注意，即使我在网站损坏的地方重新加载浏览器。该站点可以工作，因为它会跳过 service worker 缓存，但缓存仍然是错误的 - service worker 似乎没有激活 - 我的猜测是因为这个特定的 SW 已经被激活但未能正确破坏缓存。随后的非硬刷新访问仍然会看到损坏的 index.html。

Answer 1

(这里的答案是特定于 sw-precache library 的。细节不适用于一般的 Service Worker，但有关缓存维护的概念可能仍然适用于更广泛的受众。)

如果index.html的内容由服务器动态生成，并依赖于内联或通过 <script> 引用的其他资源或 <link>标签，那么您需要通过 dynamicUrlToDependencies 指定这些依赖项选项。这是一个例子 from the app-shell-demo 作为库的一部分提供:

dynamicUrlToDependencies: {
  '/shell': [
    ...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`),
    ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`),
    `${SRC_DIR}/views/index.handlebars`
  ]
}

(此处使用 /shell 而不是 /index.html ，因为这是用于访问缓存 App Shell 的 URL。)

这个配置告诉sw-precache任何时候匹配这些模式的任何本地文件发生变化，动态页面的缓存条目都应该更新。

如果您的 index.html不是由服务器动态生成的，而是在构建期间使用类似 this approach 的东西更新的，那么确保运行 sw-precache 的构建过程中的步骤很重要在所有其他修改和替换发生之后发生。这意味着使用类似 run-sequence 的东西确保服务 worker 生成不会与其他任务并行运行。

如果以上信息对您没有帮助，欢迎调用file a bug包含更多详细信息，包括您网站的网址。