kit
kit copied to clipboard
sveltejs
Service Worker Compilation during Development
Describe the problem
Testing non-trivial service-worker features in a Sveltekit app is currently pretty painful. The most success I've had is using npm run build && npm preview after every code change, losing the utility of dev mode when testing features that rely on the service-worker.
As far as I've been able to find, Sveltekit only supports building the service-worker in a production build.
Describe the proposed solution
Add a config option to enable building the service-worker in development mode, i.e. when running npm run dev. This should skip pre-caching (or provide a way for the user to skip serving cached files) and only load additional functionality from the user's service-worker.
Alternatives considered
vite-plugin-pwa appears to support building in development but not for Sveltekit (at least by default, maybe there is a way to configure it to do so?) and also looks like it would add additional configuration to maintain to get it work as well as the built-in SW support.
Importance
would make my life easier
Additional Information
I am currently building/maintaining an app that makes extensive use of the service-worker to enable offline functionality. It hosts a small graphql server at /graphql as a single source of truth for pages to get data from. It is not proxying a "real" graphql server and instead fetches data from multiple places to store in IndexedDB, then queries IDB in the resolvers. It also handles an offline-capable file upload system, uploading files to the server when network service is available.
As a result. most of the app does not work well in dev. Sometimes I can use build-then-preview to get localhost to load the service worker, then stop preview and start dev and the page will start live-loading changes to non-service-worker code but this is flaky; if the SW gets unloaded the app needs to be (possibly rebuilt,) previewed, and swapped back to dev again.
If anyone has an alternative to get SWs working in dev I'd be glad to hear it.
Would the following caveats be acceptable, if it meant you could use the service worker in development?
- only works in Chrome, because other browsers don't support
importinside service workers -
buildis an empty array
Both would be fine. Testing other browsers against the production build only seems reasonable.
The currently released version vite-plugin-pwa is quite difficult to setup with SvelteKit at the moment as SvelteKit historically had some limitations around using it. I've been working with the author to fix most of those and the next version of vite-plugin-pwa should be quite a bit easier to setup. You can watch https://github.com/antfu/vite-plugin-pwa/pull/327 for updates (it still needs some more work to incorporate the most recent SvelteKit changes).
The only feature I need is the ability to run custom service worker code (not pwa things) in dev mode. Is there any appetite for supporting that in SvelteKit at some point? The current service-worker behavior does everything I need it to except working in dev mode. I'm not sure the friction of swapping to the vite plugin would be worth the effort unless it gets to a point that it is fairly painless.
Yeah, I definitely think we should support it. I have an idea for how it could work
What would be needed to make npm run build && npm preview kill and restart itself when a file changed? Is there some fancy linux one-liner meanwhile?
Edit: something something while true; do ... inotifywait --event modify --recursive --exclude build/ . && kill ... & npm run build && npm preview?
Any news on this? It's really annoying to develop the service worker without it working on dev mode
Any news on this? It's really annoying to develop the service worker without it working on dev mode
Looks like you can do it with the plugin: https://vite-pwa-org.netlify.app/guide/
Any news on this? It's really annoying to develop the service worker without it working on dev mode
Definitely, it is painful having to build, then preview to test a service worker. I'm glad it is labelled with an enhancement tag. But is there any progress with this?
Thanks in advance
