1) Open index.html file <script> if ("serviceWorker" in navigator) { window.addEventListener("load", () => { navigator.serviceWorker .register("./serviceWorker.js") .then((res) => { console.warn("Worker Registered"); }) .catch((err) => { console.warn("Error in sw", err); }); }); } else { console.error("Service workers are not supported in this browser."); } </script> 2) Create a new file in public folder named as serviceWorker.js Add Below Code in serviceWorker.js file //STORAGE OF BROWSER const CACHE_NAME = "version-1"; const urlsToCache = ["index.html", "offline.html"]; const self = this; //installation self.addEventListener("install", (event) => { event.waitUntil( caches.open(CACHE_NAME).then((cache) => { console.log("Opened cache"); return cache.addAll(urlsToCache); }) ); }); // listen for request self.addEventListener("fetch", (event) => { event.respondWith( caches.match(event.request).then((res) => { return fetch(event.request).catch(() => caches.match("offline.html")); }) ); }); // actitivate the service worker self.addEventListener("activate", (event) => { const cacheWhitelist = []; cacheWhitelist.push(CACHE_NAME); event.waitUntil( caches.keys().then((cacheNames) => Promise.all( cacheNames.map((cacheName) => { if (!cacheWhitelist.includes(cacheName)) { return caches.delete(cacheName); } }) ) ) ); }); 3) Open manifest.json file Add below code in manifest.json file { "name": "Your App Name", "short_name": "Your App Name", "theme_color": "#066759", // "background_color": "#f7f7f7", "display": "standalone", "scope": "/", "start_url": "/", "description": "a short description for your app", "icons": [ { "src": "mask.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }, { "src": "logo192.png", "sizes": "192x192", "type": "image/png" }, { "src": "logo256.png", "sizes": "256x256", "type": "image/png" }, { "src": "logo384.png", "sizes": "384x384", "type": "image/png" }, { "src": "logo512.png", "sizes": "512x512", "type": "image/png" } ] } 4) Now you have to create logo of different sizes 192×192 | 256×256 | 384×384 | 512×512 Go to website – https://imageresizer.com/ Copy all the logos and paste it into public folder as shown in the video 5) Now you have to create a Maskable icon Go to website – https://progressier.com/maskable-icons-editor Upload your logo and create a maskable icon then copy and paste it into public folder 6) Hurray! you have completed all the step for your Progressive Web App You will see an install option at the right corner and in mobile view users can see a popup to install the progressive web app.