将工作箱与CDN一起使用时，缓存存储为空

Question

我正在使用工作箱来缓存我的应用程序外壳。网络选项卡显示请求来自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，并且默认情况下只有某些策略缓存不透明的响应。

您可以使用

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版本中，我们会更加积极地记录此日志，因为它经常使人沮丧。

该草案的针线V3文档的一部分的进入更多细节。