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.jsonin 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:

--

--

--

onw to 10x developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Get the Current Value of an RxJS Subject or Observable

Google login with Meteor and Node Js

Variables in Postman

Start building Amazing Projects by Learning Just enough JavaScript: Part 1

JS Mostly used isFunctions

React.js // Discerning Between State and Props

Restart Linode servers with React and Docker

Why you should use Angular Language Service?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Navin Kodag

Navin Kodag

onw to 10x developer

More from Medium

Styling Custom Components in Svelte

Svelte Simple Login With Local Storage And Stores

JavaScript SVG diagram editor which weighs 6.5 less than Bootstrap (open source library)

An Example of Benchmarking Core Web Vitals of React and Vue Frontends