Progressive web apps (PWA) are responsive, fast, available offline, and allow your users to install them on their mobile devices - just add icons, manifest.json, and service-worker.js.
- A browser (e.g., Firefox or Chrome)
- A text editor (e.g., VS Code or Notepad++, or Chrome)
- A favorite API (a service that will respond to requests)
- Host the site with VS Code Live Server Extension or Web Server for Chrome Extension (or view the Demo)
We can't serve our website as a local file and use fetch, so we must host the app locally with either VS Code Live Server or Web Server for Chrome Extension.
After installing the VS Code Live Server, open the folder in VS Code, right-click index.html and select "Open with Live Server".
- Create manifest.json to provide information about your app.
- Create favicons and a full set of icons (users can install a PWA on their devices)
- Create service-worker.js
- Add index.html links and icons to manifest.json
- Add index.html script to register a service worker running independently, capable of intercepting all fetch requests and adjusting for offline, caching, and more
- Workbox - PWA Libraries
- Workbox Caching Strategies
PWA can be installed. We need a lot of icons to handle all different devices.
Basic icon built with Favicon.io
- Text: Fact
- Background: Rounded
- Font family: Leckerli One
- Font size: 44
- Color: #FFF
- Background: #006747
Download and save/expand zipfile in images folder.
Full set of PWA icons built with Real Favicon Generator. Upload your large 512x512 favicon and generate a full set. Change the settings as you like (e.g., set background color to #006747). Set icon location to /images/AppImages. Download your package.
Update icons property in manifest.json as needed (if the names are the same, it can be reused from a reference project).
Then, generate a few additional icons for use on Android devices.
- Android Asset Studio
- Stack Overflow
- 48 × 48 (mdpi), with 1 dp padding
- 72 × 72 (hdpi), with 1 dp padding
- 96 × 96 (xhdpi), with 1 dp padding
- 144 × 144 (xxhdpi), with 1 dp padding
- 192 × 192 (xxxhdpi), with 4 dp padding
- The 3 parts of a PWA
- Web Fundamentals
- Codelabs PWA
- Score your app with Lighthouse - right-click / Inspect / Audit tab (very last one). Click "Run audits".
- Inspect the cache - many service-worker issues can be helped with right-click / Inspect / Application tab. Explore the cache. Click "clear storage" to delete all cached content.
- Add to Home Screen Criteria - your app must meet the add to home screen criteria in order for the 'beforeinstallprompt' event to be fired and your app installed.
- Android Trouble-shooting. If you delete your PWA, it goes to App Trash and you can't reinstall while its there. Delete another app to get the App Trash prompt, go to App Trash, select the PWA, and delete it. Now you can reinstall.
- iOS Troubleshooting - Enabling iOS Splash Screens for Progressive Web Apps