使用带有 CDN 的工作箱时缓存存储为空

Question

我正在使用工作箱来缓存我的应用程序 shell。网络选项卡显示请求来自 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 的资产的问题。

Answer 1

这几乎可以肯定是因为你的CDN不支持CORS，只有部分策略默认缓存opaque responses

您可以使用

覆盖它

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 中有 logging about this，但前提是您专门启用了它。

在即将发布的 v3 版本中，我们 much more aggressive 将对此进行记录，因为它经常是令人沮丧的根源。

Workbox v3 文档的这一部分 draft 进行了更详细的介绍。

使用带有 CDN 的工作箱时缓存存储为空

Cache storage is empty when using workbox with CDN

javascript

caching

service-worker

progressive-web-apps

workbox