https://res.cloudinary.com/practicaldev/image/fetch/s--W3Q74dGw--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7gc0o4bwiv98o2oc0z4.png
Create a PWA with Sveltekit | Svelte

Navin Kodag2 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.

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.

lets-go.gif

First:

We'll create a demo Sveltekit project:

npm init svelte@next my-app

create.png

Then we'll choose a simple config in vite for the sake of this article:

config.png

Choose typescript because #typescriptgang:

svelte-kit-config.png

Now we have a demo project set up with typescript, it will be straight-forward from here on:

note.png

Let's get into our directory:

cd my-app

And run:

yarn

yarn-output.png

After that,

  • In the /static directory, We'll create a manifest.json.
  • When svelte compiles the whole application, it copies static files over to the build folder.

manifest.json

{% gist https://gist.github.com/100lvlmaster/3a7d37a400897114d5c64d88b81e4acc %}

Then we'll refer our manifest.json in src/app.html.

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?

service-worker.ts

{% gist https://gist.github.com/100lvlmaster/8e966302b2e03404203e965424cb2bca %}

Now we just need to build our app using yarn build: build.png

Now we can preview our build using yarn preview:

preview.png

😯 thats the 'install app' button,

output-button.png

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

Made with Next.js & ❤️
© 2021 Navin Kodag. All rights reserved.