Stuart Langridge @sil@mastodon.social
Public

Today's (what I think is a) neat web trick: when I populate the cache of files in a serviceworker for offline support, I always want the most recent version; I never want any version from the browser cache. Build tools do this by writing myfile.png as myfile.MD5.png, but I don't wanna (then I have to change the refs in the html). So instead, I don't use cache.addAll() in the SW; instead, fetch them all with ?cachebust URLs, but store in the cache with the original URL. Seems OK so far...?

self.addEventListener('install', function(e) { console.log(`Populating cache ${thisCacheName}`) self.skipWaiting(); e.waitUntil( caches.open(thisCacheName).then(function(cache) { // we don't use cache.addAll(cacheList) here because we want to cachebust these fetches // we fetch with a cachebusting querystring and then store as the raw url const cachebust_qs = "?" + (new Date().getTime()) return Promise.all(cacheList.map(url => { const cachebust_url = new URL(url, self.location.href); cachebust_url.search = cachebust_qs; return fetch(cachebust_url).then(response => { if (!response.ok) { throw new TypeError(`could not fetch ${cachebust_url}`); } //console.log(`Caching ${cachebust_url} as ${url}`); return cache.put(url, response); }) })) }) ); });
0
0
0

If you have a fediverse account, you can quote this note from your own instance. Search https://mastodon.social/users/sil/statuses/114856224257056850 on your instance and quote it. (Note that quoting is not supported in Mastodon.)