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