Place manifest.json and index.html file on your desktop. Open a command prompt and navigate to desktop.
Make a .svg or .png icon file for your PWA app, save it to your desktop.
Install pwa-asset-generator via npm and generate icon sizes:
npm install --global pwa-asset-generatorpwa-asset-generator icon.svg -i ./index.html -m ./manifest.json| <head> | |
| <link rel="manifest" href="/manifest.json" /> | |
| </head> | |
| <body> | |
| <script> | |
| if ("serviceWorker" in navigator) { | |
| window.addEventListener("load", () => { | |
| navigator.serviceWorker.register("/pwabuilder-sw.js").then((reg) => { | |
| console.log("Service worker registered.", reg); | |
| }); | |
| }); | |
| } | |
| </script> | |
| <script type="module"> | |
| import "https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"; | |
| const el = document.createElement("pwa-update"); | |
| document.body.appendChild(el); | |
| </script> | |
| </body> |
| { | |
| "lang": "en-us", | |
| "name": "MyAppName", | |
| "scope": "/", | |
| "display": "standalone", | |
| "start_url": "https://MYWEBSITE.com", | |
| "short_name": "MyAppName", | |
| "theme_color": "transparent", | |
| "description": "This is a PWA", | |
| "orientation": "any", | |
| "background_color": "transparent", | |
| "related_applications": [], | |
| "prefer_related_applications": false, | |
| "icons": [ | |
| { | |
| "src": "images/manifest-icon-192.png", | |
| "sizes": "192x192", | |
| "type": "image/png", | |
| "purpose": "maskable any" | |
| }, | |
| { | |
| "src": "images/manifest-icon-512.png", | |
| "sizes": "512x512", | |
| "type": "image/png", | |
| "purpose": "maskable any" | |
| } | |
| ], | |
| "url": "https://MYWEBSITE.com", | |
| "screenshots": [] | |
| } |
| // This is the service worker with the Cache-first network | |
| // This file comes from https://www.pwabuilder.com/ | |
| const CACHE = "pwabuilder-precache"; | |
| importScripts( | |
| "https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js" | |
| ); | |
| self.addEventListener("message", (event) => { | |
| if (event.data && event.data.type === "SKIP_WAITING") { | |
| self.skipWaiting(); | |
| } | |
| }); | |
| workbox.routing.registerRoute( | |
| new RegExp("/*"), | |
| new workbox.strategies.CacheFirst({ | |
| cacheName: CACHE, | |
| }) | |
| ); |