使用工作箱运行时缓存，请求没有在缓存上显示在铬上

Question

我正在使用工作箱运行时缓存来缓存外部调用（materialize.css是其中之一）。在我的网络标签中，显示了从serviceWorker来的请求（看起来很好）：

但在高速缓存存储我的运行缓存看起来空：

你可以看到我请访问以下网站：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

潜在的问题是那些是opaque responses，并且默认情况下，它们不会与cacheFirst战略一起使用。

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

还有的登录针线来帮助调试这样的事情，但因为它是嘈杂的，它不是由默认生产构建支持。无论是切换你importScripts()使用开发版本（如importScripts('https://unpkg.com/[email protected]/build/importScripts/workbox-sw.dev.v2.0.3.js')，或者去到DevTools并明确设置workbox.LOG_LEVEL = 'debug'会给你类似如下的日志消息：

您对如何解决问题的几个选项如您所愿：

• 更改为workboxSW.strategies.staleWhileRevalidate()，它默认支持
• 不透明响应告诉cacheFirst策略，你奥卡。 y使用不透明的响应：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'>