Create a PWA with Sveltekit | Svelte
I’ve been using Sveltekit and svelte for over a year now. I’m also anxiously 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 projects into a PWA. When I wanted to do 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.
Basic things for all PWAs:
- A website
- manifest.json [ basic icons,names,shortcuts]
- service-worker [ for offline cache ]
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 ts >>>> js:
Now we have a demo project setup with typescript, it will be straight-forward from here on:
Let’s get into our directory:
- In the /static directory, We’ll create a
- When svelte compiles the whole application the static files will be copied over to the build folder.
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 or app using
Now we can preview our build using
‘0’ is that a install app button,
Svelte makes it easy to make PWAs.
The source code of this project lies at:
Everything you need to build a Svelte project, powered by create-svelte ; If you're seeing this, you've probably…
You can find me at: