Comment ignorer la chaîne de requête url à partir des URL mises en cache lors de l'utilisation de la boîte de travail?

Question

Existe-t-il un moyen d'ignorer la chaîne de requête "? ScreenSize =" en dessous de la route enregistrée en utilisant la boîte de travail! Si je peux utiliser regex, comment pourrais-je l'écrire dans le scénario ci-dessous? Fondamentalement, je cherche à faire correspondre le cache, peu importe ce qui est la chaîne de requête screenSize.

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

Après avoir essayé le plugin cachedResponseWillBeUsed: Je ne vois pas le plug-in est appliqué:

Answer 1

Vous devriez être en mesure de le faire en écrivant un cachedResponseWillBeUsed plugin que vous passez lorsque vous configurez la stratégie:

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