如何测试 Workbox 预缓存是否正常工作

Question

我的问题与this question非常相似。

我想知道如何在 Google Chrome 中验证我的渐进式 Web 应用程序的服务工作者是否正在从缓存而不是网络提供预缓存文件。

我有一个 service worker，它使用以下 Workbox 代码来预缓存一些文件：

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST); // WB_MANIFEST gets replaced with the files during the build process

我可以验证这些文件是否缓存在 Chrome:
中

在这里您可以看到第 0 行中的 style.css。

当我重新加载我的网站时，我可以在 Chrome 的网络选项卡中看到 Service Worker 收到了对 style.css
的请求

单击网络面板上的 style.css 条目后，我看到以下信息：

在这里我可以看到 Response 的来源，上面写着“Service Worker Cache Storage”。
这是否意味着 style.css 是从缓存而不是网络发送到浏览器的？

我对此有点困惑，因为 on this question 我可以看到一个控制台日志条目“[workbox]”预缓存正在响应：”我在控制台上找不到它：

并且在 this website 上，我可以看到一个单独的网络条目在大小列中显示（磁盘缓存），这在我的应用程序中也没有看到：

我认为这与 Google Chrome 的不同版本无关，因为我可以使用 (demo) link.

这是我的 service worker 代码，响应“Workbox loaded”：

Answer 1

我已经设法为我的 pwa 创建离线支持。所以我认为文件是从缓存中加载的。