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.
Note !
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.
First:
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:
cd my-app
And run:
yarn
After that,
- In the /static directory, We’ll create a manifest.json
.
- When svelte compiles the whole application the static files will be copied over to the build folder.
Then we’ll refer our manifest.json
in src/app.html
.
And finally we’ll create our src/service-worker.ts
.
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 yarn build
:
Now we can preview our build using yarn preview
:
‘0’ is that a install app button,
Svelte makes it easy to make PWAs.
The source code of this project lies at:
You can find me at: