Service worker: Cache by filename only not url - service-worker

Question

I noticed that when you cache a file with a service worker
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
the file is cached based on the url
/bundle/v1/assets/icon.svg
But what I would like to have is only the file name on which the cache is base. Meaning that the same cache is used for
/bundle/v1/assets/icon.svg
/bundle/v2/assets/icon.svg
/bundle/v3/assets/icon.svg
Is something like this possible?

Answer 1

What you can do is get a bit creative when you read and write to the Cache Storage API, by normalizing the URLs prior to using them as keys.
To use your example, let's say you know that every time you interact with the Cache Storage API (read or write) for a URL ending in icon.svg, you always expect it to refer to the same underlying Response, regardless of the full URL. You could do something like the following:
// A "fake" prefix used for all the normalized entries.
// Choose something that is not used by your real URLs.
const NORMALIZED_PREFIX = '/__normalized/';
// A list of "files" whose URLs you want to normalize.
const FILES_TO_NORMALIZE = [
'icon.svg',
// ...anything else...
];
function normalizeUrl(request) {
// Convert the request.url string into a URL object,
// so that we can get the pathname cleanly.
const url = new URL(request.url);
for (const file of FILES_TO_NORMALIZE) {
if (pathname.endsWith(file)) {
// If we have a match, then normalize the URL by using our
// standard prefix along with the specific file name.
url.pathname = NORMALIZED_PREFIX + file;
return url.href;
}
}
// Otherwise, just return the original request's URL.
return request.url;
}
self.addEventListener('fetch', event => {
// This is a naive cache-first strategy. Customize to suit your needs:
// https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
event.respondWith(async function() {
const requestKey = normalizeRequestUrl(event.request);
const cache = await caches.open('runtime-cache');
const cachedResponse = await caches.match(requestKey);
// If there's a cached response, use it.
if (cachedResponse) {
return cachedResponse;
}
// Otherwise, get a response from the network for the original request.
// Make sure you *don't* call fetch(requestKey),
// since that URL doesn't exist on the server!
const networkResponse = await fetch(event.request);
// When you save the entry in the cache, use cache.put()
// with requestKey as the first parameter.
await cache.put(requestKey, networkResponse.clone());
return networkResponse;
}());
});