|
|
|
|
@ -0,0 +1,173 @@
|
|
|
|
|
(https://medium.com/@rakeshdhariwal61/converting-your-react-vite-app-into-pwa-d7211e9cd0c5)
|
|
|
|
|
|
|
|
|
|
**Lame Definition goes as:** PWA stands for progressive web-app which allow to run your webpage offline. Like, we see on many webpages whenever we do to visit to a particular webpage, a pop-up will appear in the search-bar of the browser which says, install as a web-app. Like, YouTube, GitHub, Code sandbox.
|
|
|
|
|
|
|
|
|
|
A progressive web app (PWA) is an app that’s built using web platform technologies, but that provides a user experience like that of a platform-specific app.
|
|
|
|
|
|
|
|
|
|
Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed app.
|
|
|
|
|
|
|
|
|
|
Learn more from [Mdn Web Docks](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
|
|
|
|
|
|
|
|
|
|
Pre-requisite.
|
|
|
|
|
|
|
|
|
|
While, converting your app to PWA you, must need to follow some set of rules. Which you can found, by using [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) (Chrome Extension), all you just have to do is, open your webpage click on inspect, select Light House from toolbar section.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If, you just want to generate the report for PWA un-select other options.
|
|
|
|
|
|
|
|
|
|
Then, click on analyze page load. It will generate the report what your webpage is missing.
|
|
|
|
|
|
|
|
|
|
If, you are working on React-Vite app it will be pretty simple for you to convert your React-Vite app to PWA.
|
|
|
|
|
|
|
|
|
|
1. Install vite-plugin-pwa.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm install vite-plugin-pwa
|
|
|
|
|
|
|
|
|
|
yarna add vite-plugin-pwa
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
2\. Open the vite.config.js from root folder of you’r react-vite-app and import VitePWA.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
import { defineConfig } from 'vite'
|
|
|
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
|
import { VitePWA } from "vite-plugin-pwa";
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
3\. VitePwa take one argument (A pure JavaScript object). This, js object define our, manifest for your project.
|
|
|
|
|
|
|
|
|
|
> The manifest object will contain some basic information about our webpage.
|
|
|
|
|
>
|
|
|
|
|
> You can create manifest.js anywhere you want inside the root folder of your project and import it into vite.config.js in this tutorial I am, creating the manifest in vite.config.js itself.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
const manifestForPlugIn = {
|
|
|
|
|
registerType:'prompt',
|
|
|
|
|
includeAssests:['favicon.ico', "apple-touc-icon.png", "masked-icon.svg"],
|
|
|
|
|
manifest:{
|
|
|
|
|
name:"React-vite-app",
|
|
|
|
|
short_name:"react-vite-app",
|
|
|
|
|
description:"I am a simple vite app",
|
|
|
|
|
icons:[{
|
|
|
|
|
src: '/android-chrome-192x192.png',
|
|
|
|
|
sizes:'192x192',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'favicon'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src:'/android-chrome-512x512.png',
|
|
|
|
|
sizes:'512x512',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'favicon'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: '/apple-touch-icon.png',
|
|
|
|
|
sizes:'180x180',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'apple touch icon',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: '/maskable_icon.png',
|
|
|
|
|
sizes:'512x512',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'any maskable',
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
theme_color:'#171717',
|
|
|
|
|
background_color:'#f0e7db',
|
|
|
|
|
display:"standalone",
|
|
|
|
|
scope:'/',
|
|
|
|
|
start_url:"/",
|
|
|
|
|
orientation:'portrait'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Now, you need to generate favicon and maskable icon for you webapp.
|
|
|
|
|
|
|
|
|
|
and pass this object to VitePWA(manifestForPulgIn).
|
|
|
|
|
|
|
|
|
|
Also, you have to add the VitePWA in plugins array.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
export default defineConfig({
|
|
|
|
|
plugins: [react(), VitePWA(manifestForPlugIn)],
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
import { defineConfig } from 'vite'
|
|
|
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
|
import { VitePWA } from "vite-plugin-pwa";
|
|
|
|
|
const manifestForPlugIn = {
|
|
|
|
|
registerType:'prompt',
|
|
|
|
|
includeAssests:['favicon.ico', "apple-touc-icon.png", "masked-icon.svg"],
|
|
|
|
|
manifest:{
|
|
|
|
|
name:"React-vite-app",
|
|
|
|
|
short_name:"react-vite-app",
|
|
|
|
|
description:"I am a simple vite app",
|
|
|
|
|
icons:[{
|
|
|
|
|
src: '/android-chrome-192x192.png',
|
|
|
|
|
sizes:'192x192',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'favicon'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src:'/android-chrome-512x512.png',
|
|
|
|
|
sizes:'512x512',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'favicon'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: '/apple-touch-icon.png',
|
|
|
|
|
sizes:'180x180',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'apple touch icon',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: '/maskable_icon.png',
|
|
|
|
|
sizes:'512x512',
|
|
|
|
|
type:'image/png',
|
|
|
|
|
purpose:'any maskable',
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
theme_color:'#171717',
|
|
|
|
|
background_color:'#f0e7db',
|
|
|
|
|
display:"standalone",
|
|
|
|
|
scope:'/',
|
|
|
|
|
start_url:"/",
|
|
|
|
|
orientation:'portrait'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default defineConfig({
|
|
|
|
|
plugins: [react(), VitePWA(manifestForPlugIn)],
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> Favicon generator: [Favicon.io](https://favicon.io/)
|
|
|
|
|
>
|
|
|
|
|
> Maskable Icon Generator: [Maskable.app](https://maskable.app/)
|
|
|
|
|
|
|
|
|
|
4\. Place all the generated assets into to public folder.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Make sure, you provided the proper size and type of image.
|
|
|
|
|
|
|
|
|
|
5\. Build, your project and deploy it as PWA doesn’t work in development.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm run build.
|
|
|
|
|
//or
|
|
|
|
|
yarn run build
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
6\. Open your webpage and you will see a pop-up install.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If, it doesn’t appear in your case, make sure your entered everything correct in the manifestForPlugIn, more over you can check what you are missing, my seeing the logs or by generating Report from Lighthouse.
|
Lei OT
2 years ago