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 enought 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:

https://github.com/100lvlmaster/svelte-pwa

You can find me at:

https://100lvlmaster.in