javascript - 工作箱-将标题添加到缓存的响应

我正在使用workbox-sw来缓存一些API请求，并且想知道是否可以向从缓存返回的响应中添加自定义标头。

我的sw.js看起来像这样：

importScripts('workbox-sw.prod.v2.1.1.js');

const workboxSW = new WorkboxSW();

workboxSW.precache([]);
workboxSW.router.registerRoute(
  new RegExp('^https://api\.url/'),
  workboxSW.strategies.cacheFirst({
    cacheName: 'api-cache',
    cacheExpiration: {
      maxEntries: 10,
      maxAgeSeconds: 3600 * 24
    },
    cacheableResponse: {statuses: [200]}
  })
);

任何想法如何添加标题以响应？

谢谢！

最佳答案

它有点埋藏在文档中，但是您可以使用实现handlerCallback interface的函数来在Route匹配时执行自定义操作，如下所示：

const cacheFirstStrategy = workboxSW.strategies.cacheFirst({
  cacheName: 'api-cache',
  cacheExpiration: {
    maxEntries: 10,
    maxAgeSeconds: 3600 * 24
  },
  cacheableResponse: {statuses: [200]}
});

workboxSW.router.registerRoute(
  new RegExp('^https://api\.url/'),
  async ({event, url}) => {
    const cachedResponse = await cacheFirstStrategy.handle({event, url});
    if (cachedResponse) {
      cachedResponse.headers.set('x-custom-header', 'my-value');
    }
    return cachedResponse;
  }
);