Progressive Web Apps, or PWAs, offer a way to turn app-like websites into website-like apps. Browsers are beefing up support for these useful hybrids, and we show you how to install and use them.
Maybe you’ve encountered a website that proposes something like “install this as a web app,” as I recently did on the Google Meet webpage. That’s one example of how you can get a Progressive Web App (or PWA). The Meet PWA became available just recently in some web browsers, but several other Google services have offered the option for years. Other app-like sites such as Outlook, Spotify, and Instagram are more good examples of sites ripe for the PWA treatment. Let's delve into exactly what these PWAs are, how you can get started with them, and what benefits they offer.
What Is a Progressive Web App?
The web has increasingly become more app-like. Websites can deliver notifications, work offline, store data in local caches or persistent databases, and run in the background. Many websites behave more like applications than purely as informational sites. The Progressive Web App standard offers websites a chance to become even more like standalone apps, by discarding browser elements that only clutter their interface.
Progressive Web Apps take advantage of the same technologies that power today’s advanced websites, including HTML, CSS, and JavaScript. But they also use a few newer and less common web standards, including Web Application Manifest (to define the app’s name, icons, URL, colors, and configurations) and Service Workers(Opens in a new window), which allow PWAs to function offline without an internet connection.
You may be wondering why the term progressive comes into play. It stems from a web development strategy called progressive enhancement(Opens in a new window). In this strategy, the developer focuses on the main content and functions first and then adds extra capabilities if the browser and platform offer more frills around the edges. Related to progressive enhancement is responsive web design, in which content is designed to resize for specific platforms, such as mobile or desktop devices.
Sadly, one of my favorite web browsers, Firefox, doesn’t support PWAs on the desktop, though it does on Android. (The same holds for the innovative Opera web browser.) Mozilla had been working on a project to add it to its excellent, privacy-respecting browser, but the organization announced a cessation of that endeavor. One can hope that situation changes sometime in the future.
In the meantime, let’s take a look at what you can gain from using PWAs (along with the drawbacks), how you can install them on several platforms, and which are my favorites.
How Do You Install a Progressive Web App?
A big advantage of PWAs is how easy they are to install, and the process continues to get simpler for the PWA-supporting web browsers such as Chrome and Edge. Apple is in a peculiar position when it comes to PWAs: You can install a PWA on macOS except in Safari; on iOS, you can install PWAs only in Safari. Here’s what you need to do to install a PWA on each major operating system (in order of popularity(Opens in a new window)).
In the Chrome browser: For sites that fully provide PWA functionality, you see an Install app choice in the main Chrome menu. Once you select that option, the app icon appears on your home screen. (Note that you can choose Add to Home screen for sites that don’t provide PWA features.)
Click the Install App button in the address bar or choose Install [app name] from the menu at the top right.
After this, you’ll see the app with no browser border and an icon for it in your Start menu. Note that you can uninstall Chrome-created PWAs only from their window or the Chrome browser, not from Windows’ Settings.
In Edge: The default Windows web browser provides the best option for installing PWA’s on Microsoft’s desktop operating system. That’s because it puts the app in your Start menu just like any other app you install the normal ways (either with a downloaded program installer or from the Microsoft Store app). Here’s how it works:
Navigate to the website you want to install as a PWA.
If the app is capable of being installed as a PWA, you can either click on the icon on the right side of the address bar that looks like three squares and a plus sign (the hover text is “App available. Install [app name]) or you can choose Apps from the three-dot overflow menu and then click Install [app name]. For some PWAs, the Install box pops up automatically.
That’s it. Your new app appears in the Start menu, gets a distinctive icon in the Taskbar (not the Edge icon), and can be converted into a desktop shortcut. If you want to uninstall the PWA, you can do so from the Start Menu's right-click menu, from Windows’ Apps and Features Setting page, or from Edge’s Manage Apps page.
Installing PWAs on iOS and iPadOS
As mentioned above, Apple only allows Safari to create PWAs in iOS and iPadOS—third-party browsers are left out of the party. Safari doesn’t use the terms install and app, like all other browsers that support PWAs do. To install one on iOS or iPadOS, load the PWA-capable site, choose the Share up-arrow at the bottom of the screen, and select Add to Home Screen. Note you can do the same for any website, but you won’t get the offline functionality of a true PWA.