新服务工作者的sw-precache激活是否可以保证缓存清除？

Question

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

该应用程序通过节点快速服务器提供。

我们遇到的一个问题是index.html有时似乎没有在缓存中更新，尽管其他资产在激活新服务工作时已更新。

这会使用户过期index.html，在这种情况下尝试加载不再存在的版本资产/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不能保证新SW激活时原子缓存破坏？如何保护这个？

如果这些有帮助，这是来自sw-precache的{​​{3}}文件。

注意：我意识到我可以使用remoteFirst策略（至少对index.html）来避免这种情况。但我仍然希望了解并找出一种方法来使用cacheFirst策略来充分发挥性能。

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

注意3 ：请注意，即使我重新加载网站被破坏的浏览器也是如此。该站点可以工作，因为它会跳过服务工作者缓存，但缓存仍然是错误的 - 服务工作者似乎没有激活 - 我猜是因为这个特定的SW已经被激活但是在正确破坏缓存时失败了。后续的非硬刷新访问仍会看到损坏的index.html。

Answer 1

（此处的答案特定于sw-precache library。详细信息一般不适用于服务工作者，但有关缓存维护的概念可能仍适用于更广泛的受众。）

如果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之类的东西来确保服务工作者生成不与其他任务并行运行。

如果以上信息对您没有帮助，请随时file a bug了解更多详情，包括您网站的网址。