Reading more about service workers after round-tripping from SvelteKit -> Eleventy -> Astro -> SvelteKit (not because one was “better” than the other, still has tradeoffs). With MPAs (Multi-page Apps) the chossing a cache strategy usually involved deciding if it was worth saving each pages. Then to get a list of cached pages:
caches.keys().then((keys) => {
keys.forEach(async (k) => {
const cache = await caches.open(k)
const keys = await cache.keys()
console.log(keys)
pages.push(
...keys.filter(
(k) => k.url.includes('html')
&& !k.url.includes('offline.html')
)
)
})
})With the Client-side Routing from SvelteKit, that tradeoff is gone. Individual components get saved separately, so I can cache the lab/[slug].js file needed to create this page once and then only request and savecontent.json to display these words without downloading an identical copy of Nav, Next/Prev, or <head> again.