workbox 3 - ignore URL params on run-time caching

Question

I want to cache assets from a secure CDN that uses policy token as URL params. for example: www.cdn.com/image.png?Policy=AAAAA&Key-Pair-Id=BBBBB and if I re-visit the site, I want to get the asset from the cache even if I have a different policy token and Key-Pair-Id. for example: www.cdn.com/image.png?Policy=CCCCC&Key-Pair-Id=DDDDD

If I use this code in the service worker:

workbox.routing.registerRoute(
    /^(http(s)?:)?\/\/www\.cdn\.com.*/,
    workbox.strategies.staleWhileRevalidate()
);

It doesn't find the response in the cache and goes to the network. I want it to match by the URL without the URL params (even if Policy=CCCCC&Key-Pair-Id=DDDDD is not actually a valid policy). just look if www.cdn.com/image.png exists and retrieve it.

Noampz · Accepted Answer · 2017-12-25 06:30:28Z

2

I found a solution for this by using a custom handler:

workbox.routing.registerRoute(
    /^(http(s)?:)?\/\/www\.cdn\.com.*/,
    ({url, event}) => {
        return caches.open(`${prefix}-${runtime}-${suffix}`).then((cache) => {
            const customRequest = `${url.origin}${url.pathname}`;
            return cache.match(customRequest).then((cacheRes) => {
                if (cacheRes) {
                    return cacheRes;
                }
                return fetch(event.request).then((fetchRes) => {
                    cache.put(customRequest, fetchRes.clone());
                    return fetchRes;
                });
            });
        });
    }
);

answered Dec 25, 2017 at 6:30

Noampz

1,2153 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

workbox 3 - ignore URL params on run-time caching

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related