How to Convert Your React Vite Project into a PWA Progressive Web App (PWA) #pwa #twa #pwatotwa #react #project #reactjs #javascript #androidstudio
How to Convert Your React Vite Project into a PWA Progressive Web App (PWA)
First check your app work well in localhost, if you face any problem first fix it.
First Step:
First You want to create manifest file and icons (Dont worry) .In internet there are many website to create these ,
My fav website PWA Icon generator… 👇
Second Step:
Always remember You must rename the folder into public and paste it on your code if you have public folder in you project just paste into that like this 👇 ..
Then deploy you project any platform like vercel,netlify,render,github……..
Next check your deployed url and add /manifest.json ,when it works you are in right track
Install the Required Dependencies
Install the vite-plugin-pwa if you are using Vite (since your project uses Tailwind CSS with Vite):bashpy code
npm install vite-plugin-pwa --save-devimport like this
import { VitePWA } from "vite-plugin-pwa";
or
import * as VitePWA from "vite-plugin-pwa";Then import into Vite.config.js and put some attributes like manifest,registerType
Workbox is optional
Then link your manifest.json file into Html file
<link rel=”manifest” href=”/manifest.json” />
Then Push Your changes and check it works or not
Now You are done
Comment below if You like this
contact me on linkedIn : bharathikannansambasivam
THINK TWICE💭-code once!
THANKS_FOR_READING_!🌟
❤️“Have a Fine_Day”❤️
Comments
Post a Comment