如何在使用工作箱時忽略來自緩存url的url查詢字符串？

Question

有沒有辦法使用工作箱從下面的註冊路線忽略查詢字符串「？screenSize =」！如果我可以使用正則表達式，我會如何將它寫入下面的場景中？基本上，無論screenSize querystring是什麼，我都希望匹配緩存。 我沒有看到該插件適用於：：

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