如何使workbox缓存跨源响应？

Question

根据 workbox 文档，应将跨域请求配置为确保正则表达式与 URL 的开头匹配。但是，它不起作用。

服务人员代码如下所示。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');

workbox.routing.registerRoute(
  /.*\.(png|jpg|jpeg|svg|gif)/,
  workbox.strategies.cacheFirst()
);

workbox.routing.registerRoute(
  new RegExp('^https://a248.e.akamai.net/.*'),
  workbox.strategies.cacheFirst()
);

在页面中，来自同源资源的响应被缓存，但来自< code > https://a248 . e . akami . net 的响应不被缓存。

我的配置有什么问题吗？还是这是一个工作箱3.0.0错误？

Answer 1

您的< code > https://a248 . e . akami . net 服务器上是否启用了CORS？否则，您将得到不透明的响应，默认情况下，当使用< code>cacheFirst策略时，这些响应不会被缓存。

如果您想在使用＜code＞cacheFirst＜/code＞策略时选择缓存这些响应，可以使用以下方法处理第三方请求：

workbox.routing.registerRoute(
  new RegExp('^https://a248.e.akamai.net/.*'),
  workbox.strategies.cacheFirst({
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      })
    ]
  }),
);

当出现这种情况时，在localhost中使用Workbox v3时，您还应该看到JavaScript控制台中记录了一条新的警告，解释了发生的情况。