提问者:小点点

将workbox与CDN一起使用时,缓存存储为空


我正在使用工作箱来缓存我的应用程序外壳。网络选项卡显示请求来自serviceWorker,并且资产在快速检索时肯定会被缓存,即使在离线模式下也是如此:

但是,缓存存储选项卡始终为空:

我试图通过控制台请求相同的资产:

const request = new Request('https://d198jdpljt0zhj.cloudfront.net/assets/bundles/vendor-0332fe450952d0d66900.js', {mode: 'no-cors'});
fetch(request).then(response => console.log(response));

瞧,资产显示:

我担心我错过了一些基本的东西。

顺便说一下,缓存存储在我的本地环境中显示正确,因此我怀疑这是来自CDN的资产的问题。


共1个答案

匿名用户

这几乎可以肯定是因为你的 CDN 不支持 CORS,并且默认情况下只有某些策略缓存不透明的响应。

您可以使用

workbox.routing.registerRoute(
  new RegExp('^https://third-party.example.com/assets/'), 
  workbox.strategies.cacheFirst({
    cacheName: 'assets-cache',
    cacheableResponse: {
      statuses: [0, 200], // Make sure 0 is included in this list.
    }
  })
);

在 Workbox 的 v2 中有关于此内容的日志记录,但前提是您专门启用了它。

在即将发布的v3版本中,我们更积极地记录这一点,因为这是一个常见的挫折源。

Workbox v3 文档的一部分的草稿将更详细地介绍。