Turn your react + vite app into a PWA

Introduction

A Progressive Web Application (PWA) is a web application that has a native app-like experience. PWAs are designed to be fast, reliable, and work offline. In this post, we'll look at how to turn a React + Vite project into a PWA.

Step 1: Adding necessary dependencies to your project

We need two dependencies to make our app into a PWA. The first one is Workbox. Workbox is a library that makes it easy to add offline support to your application. The latter is a vite plugin - vite-plugin-pwa. Feel free to copy the command below and paste it in your terminal

npm install -D workbox-window vite-plugin-pwa

Step 2: Updating vite config file

Import the plugin we have installed using at the top of your vite.config.ts file.

import { VitePWA } from "vite-plugin-pwa";

Now in your plugins array add VitePWA with an object as an argument. The object must look like this 👇

// https://vitejs.dev/config/
export default defineConfig({
    base: "./",
    plugins: [react(), VitePWA(manifestForPlugin)],
});

NOTE: manifest key must be identical to your manifest.json
Also, don't forget to add an icon with role maskable because it is used as the icon for your app when a person installs your PWA.

Don't have a maskable icon for your app ? Use pwa-asset-generator to create maskable icon and splash screens for your app.

At this point of time if you open dev tools and generate a lighthouse report for progressive web app you should get a result which is similar to this 👇

Don't get panicked by looking at those errors. They will go away once you have deployed your app.

Step3: Deploying your app

Now, deploy your React app using platforms like netlify or vercel.

Once you have finished deploying your app visit your app in your browser and run a lighthouse audit again.

That's it folks! Now you know how to turn your React app into a Progressive Web App (PWA) 🥳🎉. If you have any doubts I am happy to help in the comments. I have turned one of my React app into a PWA. Check it here.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking

Comments

[Orel]

Thanks for the article, it helped a lot! I was wondering why would you install the workbox-window as a part of the tutorial as it seems that it's not being used anywhere, is there a specific reason to do so?

[Jyothikrishna]

Back then the vite pwa docs recommended we install workbox. So I did.

[Temitayo]

Workbox is google's library that makes working with service workers easy.

[German Gonzalo Saracca]

This article is awesome! Many thanks! And also the pwa-asset-generator works like a charm!

[Jyothikrishna]

🙌

[Jothy Krishnan M C]

hi I need a guidance in my pwa application

[Jyothikrishna]

Ok. Are you facing any issues?

[Jothy Krishnan M C]

yes, for my pwa application when I reload the page or goin to the new route the application not act like offline application

[Jeet Viramgama]

if possible, could you please share the github repo for this tutorial?

[Jyothikrishna]

Here is the GitHub repo link
github.com/bhendi-boi/WeatherUps

Hope this helps

[[e-mail]]

Hello, a good example of pwa, I would like the same template on github, only in JavaScript without ts

[Jeet Viramgama]

thanks, appreciate it.

[[e-mail]]

Hello, a good example of pwa, I would like the same template on github, only in JavaScript without ts

[Jyothikrishna]

Just remove : Partial <VitePWAOptions> and you are good to go

[juanvillans]

wao thanks, but what can I do to show something when it is offline ( like data from local, cache or some)??

[Jyothikrishna]

You can sync the latest data to local storage everytime you make a fetch request and you can show that when it's offline.