ワークボックス使用時にキャッシュされたURLからURLクエリ文字列を無視する方法はありますか？

Question

ワークステーションを使って登録されたルートの下からクエリ文字列 "？screenSize ="を無視する方法はありますか！私は正規表現を使用することができますどのように私は下のシナリオでそれを書くだろうか？基本的には、screenSizeクエリーストリングが何であっても、キャッシュと一致するようにしています。 私はプラグインが適用されて表示されていない：

workboxSW.router.registerRoute('https://example.com/data/image?screenSize=980', 
workboxSW.strategies.cacheFirst({ 
    cacheName: 'mycache', 
    cacheExpiration: { 
     maxEntries: 50 
    }, 
    cacheableResponse: {statuses: [0, 200]} 
}) 
); 

cachedResponseWillBeUsedプラグインをしようとした後

Answer 1

あなたは戦略を設定するときに渡すcachedResponseWillBeUsed pluginを書き込むことによってこれを行うことができるようになります。

// See https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed 
const cachedResponseWillBeUsed = ({cache, request, cachedResponse}) => { 
    // If there's already a match against the request URL, return it. 
    if (cachedResponse) { 
    return cachedResponse; 
    } 

    // Otherwise, return a match for a specific URL: 
    const urlToMatch = 'https://example.com/data/generic/image.jpg'; 
    return caches.match(urlToMatch); 
}; 

const imageCachingStrategy = workboxSW.strategies.cacheFirst({ 
    cacheName: 'mycache', 
    cacheExpiration: { 
     maxEntries: 50 
    }, 
    cacheableResponse: {statuses: [0, 200]}, 
    plugins: [{cachedResponseWillBeUsed}] 
}); 


workboxSW.router.registerRoute(
    new RegExp('^https://example\.com/data/'), 
    imageCachingStrategy 
);