caching - Service Worker 运行时缓存

Question

我正在使用服务工作者创建一个渐进式 Web 应用程序，并且我正在使用服务工作者工具箱来缓存我的内容。用于缓存我的内容的服务人员代码：

toolbox.router.get('/(.)', toolbox.fastest);
toolbox.router.post('/(.)', toolbox.fastest);
toolbox.router.get('/(.)', toolbox.fastest, {origin: 'https://example.cloudfront.net'})
toolbox.router.get('/(.)', toolbox.fastest, {origin: 'https://example.in'})

代码运行良好，因为我在控制台中没有看到任何错误。但是我如何检查来自云端的图像或上面配置的 url 是否被缓存并从缓存本身呈现。

Answer 1

您可以在 chrome devtools 中查看缓存内容，查看资源/应用程序选项卡和缓存存储。

您检查它是否已返回，查看 devtools 网络面板并在大小列中查找“（来自 ServiceWorker）”。

Answer 2

您可以在 Chrome 开发者工具中查看

Press F12 -> Application -> Cache Storage in Cache

如果您看不到它，请通过右键单击缓存存储来刷新缓存存储。

Answer 3

另一种选择是，如果您想确认，那么您应该在从中获取缓存数据的函数中使用 console.log()，然后您可以在 DevTools 中检查。