12

我正在使用工作箱运行时缓存来缓存外部调用（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');

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

4

1 回答 1

22

根本问题是这些是不透明的响应，默认情况下，它们不会与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'>
于 2017-09-26T21:13:33.950 回答