DEV Community

Cover image for Turn your react + vite app into a PWA
Jyothikrishna
Jyothikrishna

Posted on • Updated on

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


Enter fullscreen mode Exit fullscreen mode

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";


Enter fullscreen mode Exit fullscreen mode

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

manifestForPlugin



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



Enter fullscreen mode Exit fullscreen mode

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 👇
Lighthouse report

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.

Lighthouse report after deploying

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

Top comments (16)

Collapse
 
orelba profile image
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?

Collapse
 
bhendi profile image
Jyothikrishna

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

Collapse
 
temitayo profile image
Temitayo

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

Collapse
 
germansaracca profile image
German Gonzalo Saracca

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

Collapse
 
bhendi profile image
Jyothikrishna

🙌

Collapse
 
jothykrishnan_mc profile image
Jothy Krishnan M C

hi I need a guidance in my pwa application

Collapse
 
bhendi profile image
Jyothikrishna

Ok. Are you facing any issues?

Collapse
 
jothykrishnan_mc profile image
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

Collapse
 
jv18creator profile image
Jeet Viramgama

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

Collapse
 
bhendi profile image
Jyothikrishna

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

Hope this helps

Collapse
 
loginveb profile image
loginVeb@yandex.ru

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

Collapse
 
jv18creator profile image
Jeet Viramgama

thanks, appreciate it.

Collapse
 
loginveb profile image
loginVeb@yandex.ru

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

Collapse
 
bhendi profile image
Jyothikrishna • Edited

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

Collapse
 
juanvillans profile image
juanvillans

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

Collapse
 
bhendi profile image
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.