Navin Kodag • 2 mins
27 Jun 2021
I've been using sveltekit and svelte for over a year now. I'm also waiting for it to be matured enough to beat NextJs in terms of community. But I like them both.
So, on this weekend I wanted to turn one of my SvelteKit projects into a PWA. When I wanted to do the same with NextJs projects there were a lot of tutorials. But I couldn't find many guides for svelte beginners.
That's because svelte has pwa functionality built into it.
So let's get on with it.
We'll create a demo Sveltekit project:
npm init svelte@next my-app
Then we'll choose a simple config in vite for the sake of this article:
Choose typescript because
Now we have a demo project set up with typescript, it will be straight-forward from here on:
Let's get into our directory:
Then we'll refer our
And finally we'll create our
Svelte will automatically detect the service-worker in the src folder's root and then register our service worker during build. Isn't that neat?
Now we just need to build our app using
Now we can preview our build using
😯 thats the 'install app' button,
Svelte makes it easy to make PWAs.
The source code of this project lies at:
You can find me at: