js-gui-pwa-fact

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.

2021 PWA on GitHub Pages using Workbox 7

Links

• Demo
• Source

Requirements

• A browser (e.g., Bing - Lighthouse audits work!)
• A text editor (e.g., VS Code)
• A favorite API (a service that will respond to requests)
• Host the site with GitHub Pages

No More Serving with VS Code Live Server

Due to path changes when hosting with GitHub Pages this version will not work with Live Server. (We would have to autogenerate the manifest file depending on host - see scope and start_url.)

Web App to PWA - How To

• Create manifest.json to provide information about your app.
• Create favicons and 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

Audit with Lighthouse

• To audit, open in GitHub Pages using Eddge browser InPrivate window.
• Score app with Lighthouse. Right-click / Inspect / Lighthouse (last tab).

Workbox - Help for Service Workers

• Workbox - PWA Libraries
• Workbox Caching Strategies

Creating PWA Icons

PWA can be installed. We need icons to handle different devices.

1. Create Initial Favicons

Basic icon built with Favicon.io

• Text: :)
• Background: Circle
• Font family: Farro
• Font size: 110
• Color: #FFFFFF
• Background: #006747

Download and save/expand zipfile in images folder.

2. Create Maskable Icon(s)

• Create at least one maskable icon.
• Maskable.app Editor will do this online from an existing icon.

3. Create Apple Touch Icons

• Create Apple Touch Icons.
• Apple Touch Icon Generator will do this online from an existing icon.

Trouble-shooting

• 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

See Also

• Inspect Registered Service Workers on your machine
• Inspect may move here later
• Service Workers - Overview
• Service Workers - Lifecycle
• How to Add Maskable Icon
• PWA Workshop