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

Running a Cron Job in LoopBack 4 for updating a database table using a loopback repository.

Stripe payment integration in React Native apps using Firebase

Stripe payment integration in React Native apps using Firebase

What’s New in Angular 13

Angular 13 new release

Angular Custom Form fields

Automated Testing Charts in Selenium WebDriver

Lunr.js optimization for Jekyll

Rest and Spread concepts in JavaScript and how to use these?

How I Created Best Online JSON Formatter

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

Vuex — State Management

https://unsplash.com/photos/uBe2mknURG4

How to Persist and Rehydrate Vuex State Between Page Reloads

Common problems faced by PHP developers in consuming an AMQP message

Strapi: How to create a plugin collection and internal API to manage it?