使用工作箱运行时缓存,请求不会显示在chrome上的缓存存储上

Question

我正在使用工作箱运行时缓存来缓存外部调用(materialize.css就是其中之一).在我的网络选项卡中,它显示请求来自serviceWorker(看起来很好):

但在缓存存储上,我的运行时缓存看起来是空

您可以在chromes的应用程序选项卡上看到我的服务工作者,这是网站:https://quack.surge.sh/

服务工作者代码:

const workboxSW = new self.WorkboxSW();
workboxSW.precache(fileManifest);
workboxSW.router.registerNavigationRoute("/index.html");workboxSW.router.registerRoute(/^https:\/\/res.cloudinary.com\/dc3dnmmpx\/image\/upload\/.*/, workboxSW.strategies.cacheFirst({}), 'GET');
workboxSW.router.registerRoute('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css', workboxSW.strategies.cacheFirst({}), 'GET');
workboxSW.router.registerRoute('https://res.cloudinary.com/dc3dnmmpx/image/upload/(.*)', workboxSW.strategies.cacheFirst({}), 'GET');

这是预期的行为吗？我对服务工作者很陌生,我不确定什么是正确的结果.

Answer 1

根本问题是那些是不透明的响应,默认情况下,它们不会与cacheFirst策略一起使用.

https://workboxjs.org/how_tos/cdn-caching.html上有一些背景知识

在Workbox中登录以帮助调试此类事情,但由于它很嘈杂,因此在生成版本中默认情况下不会启用它.切换你importScripts()使用开发版本(例如importScripts('https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox-sw.dev.v2.0.3.js'),或者进入DevTools并明确设置workbox.LOG_LEVEL = 'debug'会给你一个如下的日志消息:

您有一些选项可以让您按预期工作:

• 更改为workboxSW.strategies.staleWhileRevalidate(),默认情况下支持不透明响应.
• cacheFirst使用不透明的响应告诉策略您可以使用它:workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
• 因为您的第三方CDN似乎都支持CORS,您可以通过crossorigin属性选择加入CSS和图像请求的CORS模式,并且响应将不再是不透明的:<img src='https://cors.example.com/path/to/image.jpg' crossorigin='anonymous'>或者<link rel='stylesheet' href='https://cors.example.com/path/to/styles.css' crossorigin='anonymous'>