使用 Workbox 运行时缓存,请求未显示在 chrome 的缓存存储中
Using workbox runtime caching, requests are not showing on cache storage on chrome
我正在使用工作箱运行时缓存来缓存外部调用(materialize.css 就是其中之一)。在我的网络选项卡中,它显示请求来自 serviceWorker(看起来不错):
但是在缓存存储上,我的运行时缓存看起来是空的:
您可以在 chrome 的应用程序选项卡上看到我的服务人员,这是网站: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');
这是预期的行为吗?我对服务人员很陌生,我不确定正确的结果是什么。
潜在的问题是这些是 opaque responses,默认情况下,它们不会与 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'>
我正在使用工作箱运行时缓存来缓存外部调用(materialize.css 就是其中之一)。在我的网络选项卡中,它显示请求来自 serviceWorker(看起来不错):
但是在缓存存储上,我的运行时缓存看起来是空的:
您可以在 chrome 的应用程序选项卡上看到我的服务人员,这是网站: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');
这是预期的行为吗?我对服务人员很陌生,我不确定正确的结果是什么。
潜在的问题是这些是 opaque responses,默认情况下,它们不会与 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'>