How to Install a Progressive Web App (PWA)

Introduction

Progressive web apps (PWAs) are modern web applications that can be installed on a user's device like a native app. PWAs offer a seamless app experience with offline capabilities, push notifications, and faster load times. This is why they are my go to for developing apps. In this blog, we'll walk you through the steps to access, install, and uninstall a PWA on different devices and operating systems.

Install the easy way

The Gouldsonium approach is to add a banner to the top of the screen or a pop up with a button to install the app. An example would be the Pub Golf app I made for fun, which has a banner at the top of the page. See screenshot below.

Unfortunately not every device or browser supports this option so below are some instructions on how to install based on your device.

Install a PWA on iPhone

Installing a PWA on an iPhone is similar to installing a native app from the App Store. Here's how to do it:

1. Open Safari and navigate to the PWA you want to install.

2. Tap the "Share" icon (the square with an upward arrow) at the bottom of the screen.

3. Scroll down and tap "Add to Home Screen."

4. Enter a name for the app and tap "Add."

The PWA will now appear on your home screen like any other app. You can access it by tapping its icon.

Install a PWA on Android

Installing a PWA on an Android device is also easy. Here's how:

1. Open Google Chrome and navigate to the PWA you want to install.

2. Tap the three-dot menu icon at the top right corner of the screen.

3. Select "Add to Home Screen."

4. Enter a name for the app and tap "Add."

The PWA will now appear on your home screen like any other app. You can access it by tapping its icon.

Install a PWA on Mac

Installing a PWA on a Mac is slightly different than on mobile devices. Here's how to do it:

1. Open Safari and navigate to the PWA you want to install.

2. Click "File" in the menu bar and select "Add to Home Screen."

3. Enter a name for the app and click "Add."

The PWA will now appear in your Applications folder like any other app. You can access it by double-clicking its icon.

Install a PWA on Windows

Installing a PWA on Windows is similar to installing an app on a Mac. Here's how to do it:

1. Open Microsoft Edge and navigate to the PWA you want to install.

2. Click the three-dot menu icon at the top right corner of the screen.

3. Select "Apps" and then "Install this site as an app."

4. Enter a name for the app and click "Install."

The PWA will now appear in your Start menu like any other app. You can access it by clicking its icon.

Uninstall a PWA

Uninstalling a PWA is just as easy as installing it. Here's how to do it on different devices and operating systems:

iPhone

1. Long-press the PWA icon on your home screen.

2. Tap "Remove App."

Android

1. Long-press the PWA icon on your home screen.

2. Drag and drop the icon to the "Remove" or "Uninstall" button.

Mac

1. Drag the PWA icon from your Applications folder to the Trash.

2. Right-click the Trash and select "Empty Trash."

Windows

1. Right-click the PWA icon in your Start menu.

2. Select "Uninstall."

And that's it!

That's it! Now you know how to install and uninstall a PWA on different devices and operating systems. Knowing how to install PWAs is essential for a seamless app experience, as more and more websites are adopting this technology.

Written with Chatsonic