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 (key) => {
const cache = await caches.open(key)
const keys = await cache.keys()
pages.push(...keys.filter(
(key) => key.url.includes('html')
&& !key.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 that renders lab entries once and then only request and save content.json to display ‘entry 2024-09-02’ once without downloading identical copies of <header>, Next/Prev, or <head> again.