如何测试Workbox预缓存功能是否正常运行

核心结论 #

你在请求详情页看到的Service Worker Cache Storage标识，已经可以100%确认style.css是从Service Worker管理的预缓存存储中直接返回给浏览器的，没有发起任何网络请求。

常见疑问解释 #

为什么没有Workbox的预缓存响应日志？ #

Workbox默认仅在开发模式下输出[workbox] Precaching is responding to:这类调试日志，生产环境构建的Workbox代码默认关闭了所有调试日志，避免额外的性能损耗，属于正常现象，不代表预缓存逻辑未生效。
如果需要查看相关日志，可以在Service Worker代码开头添加workbox.setConfig({ debug: true })手动开启调试模式即可。

为什么没有显示(disk cache)标识？ #

(disk cache)是Chrome原生HTTP缓存体系的命中标识，和Service Worker管理的Cache Storage是两套完全独立的缓存逻辑。你的请求被Service Worker拦截后直接从预缓存返回，没有进入浏览器原生HTTP缓存的判断流程，因此不会显示(disk cache)标识，和Chrome版本无关。

额外验证方式 #

• 打开Chrome开发者工具「应用」面板，进入Service Worker选项页，勾选「离线」选项后刷新页面，页面和style.css可以正常加载即可确认缓存生效：离线状态下无法发起任何网络请求，所有资源都来自本地缓存。
• 在网络面板勾选「禁用缓存」后刷新页面，若style.css依然正常返回且响应来源仍为Service Worker Cache Storage，即可确认资源未走网络请求和原生HTTP缓存，完全由预缓存提供。

内容的提问来源于stack exchange，提问作者Toni