3

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

4

1 回答 1

7

这几乎可以肯定是因为您的 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 文档的一部分草稿更详细。

于 2017-11-27T17:50:19.287 回答