Skip to content

Instantly share code, notes, and snippets.

@adactio
Last active August 18, 2023 09:15
  • Star 83 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save adactio/3717b7da007a9363ddf21f584aae34af to your computer and use it in GitHub Desktop.
An attempt at a minimal viable service worker.
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
// HTML files: try the network first, then the cache.
// Other files: try the cache first, then the network.
// Both: cache a fresh version if possible.
// (beware: the cache will grow and grow; there's no cleanup)
const cacheName = 'files';
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.method !== 'GET') {
return;
}
fetchEvent.respondWith(async function() {
const fetchPromise = fetch(request);
fetchEvent.waitUntil(async function() {
const responseFromFetch = await fetchPromise;
const responseCopy = responseFromFetch.clone();
const myCache = await caches.open(cacheName);
return myCache.put(request, responseCopy);
}());
if (request.headers.get('Accept').includes('text/html')) {
try {
return await fetchPromise;
}
catch(error) {
return caches.match(request);
}
} else {
const responseFromCache = await caches.match(request);
return responseFromCache || fetchPromise;
}
}());
});
@adactio
Copy link
Author

adactio commented Jun 17, 2018

@paulyabsley One option is to add in a catch-all that skips over any requests for files that aren't from your own domain, similar to how we're ignoring any non-GET requests. Right before or after that bit, you could add something like:

const url = new URL(request.url);
if (url.origin !== location.origin) {
    return;
}

@paulyabsley
Copy link

Ah cool, thanks!

@dracos
Copy link

dracos commented Dec 18, 2019

Just to note that the main gist here is missing an await in the "return fetchPromise" line (as given in @jakearchibald's update), which means as-is it won't respond from the cache for HTML pages - as the promise can always be returned so will be, regardless of whether it resolves or rejects.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment