어떻게 작업 상자를 사용할 때 캐싱 된 URL에서 urer querystring을 무시합니까?

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를 작성하여이 작업을 수행 할 수 있어야한다 : URL이 example.com/data/{id}/image?screenSize=980 같은 경우

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