Chrome DevTools“禁用缓存”：除了什么都不做（对于服务工作者脚本），它实际上做了什么？答案

【问题标题】：Chrome DevTools "disable cache": what does it actually do apart from nothing (for service worker scripts)?Chrome DevTools“禁用缓存”：除了什么都不做（对于服务工作者脚本），它实际上做了什么？
【发布时间】：2017-09-21 10:20:43
【问题描述】：

假设本地磁盘缓存为空，我正在尝试测试我的站点的行为。我知道有一些方法可以清除缓存并每次都执行 Ctrl-F5 等，但“网络”选项卡中还有一个“禁用缓存”复选框，看起来它应该做我正在做的事情之后...即禁用缓存。

但是，当我清除缓存、启用该选项并按 F5 重新加载我的网站几次时，我看到的是：

资源已被缓存，并且正在从缓存中提供服务，尽管启用了“禁用缓存”！那么这个选项到底有什么作用呢？

编辑

也许我看到的这种行为仅与服务工作者脚本的缓存有关？如果您加载this page（从this guide 链接到服务人员的示例），至少对我而言，即使启用了“禁用缓存”，也会从磁盘缓存中获取sw.js 文件。

【问题讨论】：

为什么不尝试以隐身模式打开网页？
@mrid 是的，我可以，但我只是想知道这个选项的目的是什么......以防我错过了一些非常令人兴奋的事情
@wOxxOm 我在我编辑的帖子中提供了一个示例...我开始怀疑是否有一些特殊的（可能是错误的？）服务工作者脚本处理...从即使启用了该选项，磁盘缓存也是如此。您是否看到 sw.js 也从缓存中获取，并启用了“禁用缓存”选项？

标签： google-chrome google-chrome-devtools service-worker progressive-web-apps

【解决方案1】：

有趣的问题！

在您提供的屏幕截图中，Name 列被截断，因此我无法判断磁盘缓存仍在提供哪些资源。根据您“编辑”中的描述，我假设它是一个服务工作者脚本。

那么，我要回答的问题是“浏览器如何缓存 Service Worker (SW) 脚本？”

注册 SW 后，浏览器会将 SW 脚本存储在磁盘缓存中的单独数据库中。我将把它称为SW 数据库，但请注意这不是一个官方术语。请注意，如果 service worker 调用importScripts()，这些脚本也会存储在 SW 数据库中。另请注意，当服务工作者脚本更新时，浏览器会用新脚本覆盖 SW 数据库中当前存储的脚本。这是Chrome implementation，其他浏览器可能会有所不同。 ¹
每次加载页面时，浏览器都会发出一个不可见的请求（即您在 DevTools 中看不到此内容），以查看 Service Worker 脚本是否有任何更新。 IMO，DevTools 应该公开这个请求，以便开发人员更好地了解 SW 生命周期。
- 如果脚本的一个字节不同，则浏览器会更新 SW 数据库中的 SW 脚本。
- 如果 SW 脚本未更改，则浏览器仅提供 SW 数据库中的脚本。这是您在 DevTools 中看到的请求。 IMO 认为 DevTools 将此请求描述为 (from disk cache) 具有误导性。理想情况下，它应该有一些其他名称来表明此缓存不受禁用缓存复选框的影响。

因此，在这种情况下，您是对的：禁用缓存复选框什么都不做。如果你想确保你的缓存被完全清除（包括服务工作者的东西）：

转到Clear Storage pane，确保所有复选框都已启用，然后单击清除站点数据。
在 DevTools 仍然打开时，长按 Chrome 的 Reload 按钮，然后选择 Empty Cache and Hard Reload。有关这些不同选项的说明，请参阅 https://stackoverflow.com/a/14969509/1669860。

¹我从 Chrome 工程师和 Service Worker 规范的合著者 Alex Russell 那里得到了这个信息

【讨论】：

很好的答案，以及提到通过importScripts()...导入的脚本的额外荣誉，我在我的服务人员中使用。不过你是对的，在 service worker 生命周期中全面了解所有请求会更好，这样我们就可以更好地了解正在发生的事情。
就我而言，这发生在一个普通的 JS 文件中。第二个建议（按下重新加载按钮）没有帮助，但使用“清除存储”清除缓存确实有效。随后的重新加载工作正常，所以它看起来像一个错误。

【解决方案2】：

除了禁用缓存选项之外，您现在可以在开发人员工具的网络窗格中右键单击并从弹出菜单中选择“清除缓存”。

另外，如果你需要经常清除缓存，你可以使用这个插件： https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap

【讨论】：