vite-pwa / sveltekit

Zero-config PWA Plugin for SvelteKit
https://vite-pwa-org.netlify.app/frameworks/sveltekit
MIT License
324 stars 15 forks source link

[Info] Cloudflare Adapter Routes misses vite-pwa #58

Open myleskeeffe opened 1 year ago

myleskeeffe commented 1 year ago

This isn't an issue with vite-pwa specifically, but I'm putting it here for future people who are trying to search the web, and hopefully it can be indexed by a search engine too (as I spent quite a few hours trying to figure this one out). When generating large Sveltekit apps, the automatically generated _routes.json can become too large, and when it goes over 100 entries, it will 'chop-off' anything past the 100. This can include the service worker and manifest files generated by vite-pwa, and when Cloudflare tries to serve these as a function (instead of static file), they return a 404, which breaks the PWA/Service Worker.

Additionally, I've found that somewhere in the process of generating _routes.json (haven't been able to pin point where/which project), the sw.js, workbox-<>.js and manifest.webmanifest files aren't automatically added to this list in the first place. So for anyone having issues, the easiest way is to manually define the routes.

I've pasted part of my svelte.config.js below for reference. I've notably excluded the \<files> shorthand, as my app has a lot of static files which would go over the 100 entry limit, and have instead manually added these (and they can work with wildcards too - like the /fonts/ and /images/).

const config = {
    kit: {
        adapter: adapter({
            routes: {
                include: ['/*'],
                exclude: ['<build>', '<prerendered>', '/fonts/*', '/images/*', '/favicon.ico', '/robots.txt', '/favicon.png', '/sw.js', '/workbox-fa446783.js', '/manifest.webmanifest']
            }
        }),
        serviceWorker: {
            register: false
        }
    }
};
myleskeeffe commented 1 year ago

Not sure if it's best to leave this open or close it, as I'm not sure if it's an actual 'issue' or just something we need to be mindful of if we use Cloudflare Pages :)