Create a PWA with Sveltekit | Svelte

https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc7gc0o4bwiv98o2oc0z4.png

––– views

•

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.

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.
https://media.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy.gif

First:

We'll create a demo Sveltekit project:
npm init svelte@next my-app
https://imgur.com/LIfwJFA.png
Then we'll choose a simple config in vite for the sake of this article:
https://imgur.com/uyTDDVf.png
Choose typescript because
#typescriptgang
:
https://imgur.com/VePlaaP.png
Now we have a demo project set up with typescript, it will be straight-forward from here on:
https://imgur.com/gZLK7Jh.png
Let's get into our directory:
cd my-app
And run:
yarn
https://imgur.com/v5RgR26.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.
https://imgur.com/WokCIZk.png
{% gist https://gist.github.com/100lvlmaster/3a7d37a400897114d5c64d88b81e4acc %}
Then we'll refer our
manifest.json
in
src/app.html
.
https://imgur.com/s43YGuD.png
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?
https://imgur.com/0aLDOHU.png
{% gist https://gist.github.com/100lvlmaster/8e966302b2e03404203e965424cb2bca %}
Now we just need to build our app using
yarn build
:
https://imgur.com/PjkpOEy.png
Now we can preview our build using
yarn preview
:
https://imgur.com/GCYjrnL.png
😯 thats the 'install app' button,
https://imgur.com/jtwLSiw.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

Not Playing

Made with nextjs and ❤