提问者:小点点

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


我使用workbox运行时缓存来缓存外部调用(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');

这是预期的行为吗?我对服务人员还很陌生,我不确定什么是正确的结果。


共1个答案

匿名用户

潜在的问题是这些是不透明的响应,默认情况下,它们不会与< code>cacheFirst策略一起使用。

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

Workbox中有日志记录来帮助调试这类事情,但由于它很嘈杂,在生产构建中默认情况下不启用它。切换importScripts()以使用开发版本(例如ImportScrits())https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox sw.dev.v2.0.3js'),或进入DevTools并显式设置workbox。LOG_LEVEL='debug'将为您提供如下日志消息:

您有几个选项可以让事情按照您的期望运行:

  • 更改为 workboxSW.strategies.staleWhileRevalidate(),默认情况下支持不透明响应。
  • 告诉 cacheFirst 策略,你可以使用不透明的响应:workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
  • 由于您的第三方 CDN 似乎都支持 CORS,因此您可以通过 crossorigin 属性为 CSS 和图像请求选择加入 CORS 模式,并且响应将不再不透明: