Skip to content

Instantly share code, notes, and snippets.

@Prozi
Last active February 11, 2023 01:36
Show Gist options
  • Save Prozi/6ebbc364c6640fe20cd4f32c1d2edf1d to your computer and use it in GitHub Desktop.
Save Prozi/6ebbc364c6640fe20cd4f32c1d2edf1d to your computer and use it in GitHub Desktop.
// Establish a cache name
const hostname = self.location.hostname.replace(".", "_")
const cacheName = hostname + "_cache"
// On fetch, function can't be async
// Otherwise the handler would not run
self.addEventListener("fetch", (event) => {
// Filter out queries not supported by cache
if (!event.request.url.match(/^https:\/\/?/)) {
return
}
// Use same-origin for same origin, attempt no-cors for rest
const mode = event.request.url.startsWith(self.location.origin)
? "same-origin"
: "no-cors"
// Respond with fresh or cached response
event.respondWith(
new Promise((resolve) => {
fetch(event.request.url, { mode })
.then((freshResponse) => {
if (freshResponse.status === 200) {
// Add the network response to the cache for future visits.
// Note: we need to make a copy of the response to save it in
// the cache and use the original as the request response.
caches.open(cacheName).then((cache) => {
cache.put(event.request, freshResponse.clone())
// Return the fresh network response
resolve(freshResponse)
})
} else {
caches.open(cacheName).then((cache) =>
cache.match(event.request).then((cachedResponse) => {
// Fallback on cache
// And if not found just return the fresh one even with bad status
resolve(cachedResponse || freshResponse)
})
)
}
})
.catch((_err) => {
// Fallback on cache
return caches.open(cacheName).then((cache) =>
cache.match(event.request).then((cachedResponse) => {
resolve(cachedResponse)
})
)
})
})
)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment