ワークボックス - キャッシュされたレスポンスにヘッダを追加する

Question

私は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]} 
    }) 
); 

任意のアイデアはどのように応答にヘッダを追加しますか？

ありがとうございます！

Answer 1

これは、ドキュメントに埋もれ少しだが、あなたがそうのように、ときRoute一致するカスタムアクションを実行するhandlerCallback interfaceを実装する関数を使用することができます。

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; 
    } 
);