Installing Progressive Web Apps

About Progressive Web Apps (PWAs)

What are PWAs?

Progressive Web Apps are web applications that use modern web technologies to provide a native app-like experience across desktop and mobile platforms. They combine the best of web and mobile apps, offering features like offline functionality, push notifications, and home screen installation.

To explore the full range of PWA capabilities, visit What PWA Can Do Today.

How to Install and Use PWAs

• Installation: Use the browser-specific methods outlined below to install PWAs directly from supported websites
• Usage: Once installed, PWAs appear as regular apps on your device and can work offline, send notifications, and provide fast, responsive experiences
• Updates: PWAs update automatically in the background, ensuring you always have the latest version

Chrome (Windows/Mac/Linux)

1. Open Chrome and navigate to the website you'd like to install as a PWA
2. Click the install icon in the address bar (usually appears as a computer with a down arrow)
• Alternatively, go to the three-dot menu → Cast, save, and share → Install page as app...
3. Click "Install"
4. The app will be installed and can be found in your applications folder or Start menu

Note: The install option will only be available if the website meets PWA requirements.

Firefox (Windows/Mac/Linux)

⚠️ The desktop version of Firefox lacks PWA support.

In 2020, Mozilla stated that "there is currently no plan for PWA support in Firefox". While Firefox Beta 141+ has introduced some web app functionality, it remains incomplete.

Recommendation: Use Chrome, Safari, or Microsoft Edge for better PWA support.

Alternative: Try the PWAsForFirefox extension, though it requires the installation of a helper application, among other caveats.

Safari (macOS)

1. Open Safari and navigate to the website you'd like to install as a PWA
2. Click "File" in the menu bar → "Add to Dock"
   • Alternatively, click the share button and select "Add to Dock"
3. The PWA will appear in your Dock and Applications folder
4. When launched, it will open in its own window without browser UI

Note: Safari's PWA support on macOS is relatively new (macOS Sonoma 14+). Older versions may not support this feature.

Microsoft Edge (Windows)

1. Open Microsoft Edge and navigate to the website you'd like to install as a PWA
2. Look for the install app icon in the address bar
3. Click the install icon, or go to the three-dot menu → "Apps" → "Install this site as an app"
4. Click "Install"
5. The app will be installed and accessible from the Start menu

Chrome (Android)

1. Open Chrome on your Android device and navigate to the website you'd like to install as a PWA
2. Tap the three-dot menu in the top right
3. Select "Add to Home screen"
4. Tap "Install"
5. Confirm installation
6. The PWA will be added to your app drawer and can be dragged out to the home screen for easy access

Firefox (Android)

1. Open Firefox on your Android device and navigate to the website you'd like to install as a PWA
2. Tap the three-dot menu
3. Select "Add app to Home screen"
4. Tap the "Add to home screen" button or drag the app icon to its desired location
5. The PWA will be added to your home screen

Safari (iOS/iPadOS)

1. Open Safari on your iOS device and navigate to the website you'd like to install as a PWA
2. Tap the Share button (square with an arrow pointing up)
3. Scroll down and tap "Add to Home Screen"
4. Enter a name for the app and tap "Add"
5. The PWA will be added to your home screen

Note: iOS only allows PWA installation through Safari.

Troubleshooting

Install Option Not Available?

• Ensure the website is served over HTTPS
• Check that the website meets the requirements for PWA installation
• Try refreshing the page or clearing browser cache

PWA Not Working Properly?

• Check your Internet connection
• Clear the app's cache or data
• Uninstall and reinstall the PWA
• Update your browser to the latest version

Can't Find Installed PWA?

• Windows: Check Start menu, Desktop, or Apps list
• Mac: Look in Applications folder or Launchpad
• Android: Check home screen, app drawer, or search
• iOS: Look on home screen or in App Library

Progressive Web Apps You Can Install Right Now

Web Workshop

Craft handmade websites in their natural habitat with this in-browser HTML editor. Works great on desktop or mobile.

Klaxon

A chess clock in your pocket, optimized for touchscreen devices and competitive play.

Hourglass

Speedrun your life with this simple, focused time tracking tool.

Pop Viz

What does 100,000 people look like? Don't ask me — install this Progressive Web App.

HunterIrving.com

Experience Huntergram, Gobbler, and more in the dedicated hunterirving.com PWA.

Hacksburg.org

Stay up to date with goings on at Hacksburg, a makerspace in Blacksburg, VA.