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
Top comments (16)
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?
Back then the vite pwa docs recommended we install workbox. So I did.
Workbox is google's library that makes working with service workers easy.
This article is awesome! Many thanks! And also the pwa-asset-generator works like a charm!
🙌
hi I need a guidance in my pwa application
Ok. Are you facing any issues?
yes, for my pwa application when I reload the page or goin to the new route the application not act like offline application
if possible, could you please share the github repo for this tutorial?
Here is the GitHub repo link
github.com/bhendi-boi/WeatherUps
Hope this helps
Hello, a good example of pwa, I would like the same template on github, only in JavaScript without ts
thanks, appreciate it.
Hello, a good example of pwa, I would like the same template on github, only in JavaScript without ts
Just remove
: Partial <VitePWAOptions>
and you are good to gowao thanks, but what can I do to show something when it is offline ( like data from local, cache or some)??
You can sync the latest data to local storage everytime you make a fetch request and you can show that when it's offline.