Question

根据workbox doc，应配置跨域请求以确保正则表达式与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()
);

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

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

Answer 1

您的https://a248.e.akami.net服务器上是否启用了CORS？如果没有，您将返回opaque responses，默认情况下，使用cacheFirst策略时不会缓存这些内容。

如果您想在使用cacheFirst策略时选择加入缓存这些响应，则可以使用guide for handling third-party requests一个配方：

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

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

如何使工作箱缓存跨源响应？

1 个答案: