An important advance in website development in the last decade has been the development of the progressive web application, or PWA. Many customer-facing companies have adapted their websites as PWAs, while others have replaced their native apps (e.g., the ones you install via the App Store, Google Play, and Microsoft Store) with PWAs. Would a PWA be right for your business? Let us take a look.
Progressive web applications—the technology and its history
First, let us make sure we have a definition of “web application” in mind. Web apps are the sites you use for a certain function, or set of functions, such as shopping carts and email (like Gmail, as one example). They are termed “single-page applications” because rather than loading a new page with each change in data, the page itself updates in real-time. This is important to make the web app work and feel like any native app.
To make web apps “progressive” means applying a design philosophy that emphasizes starting with a basic, functional version of a web app and then progressively adding more advanced features for users with modern browsers or devices. The core idea is to ensure a baseline functionality that works across a broad range of devices and browsers. This approach ensures that users with less-capable devices or slower Internet connections can still access and use the essential features of an app.
Google is generally credited with promoting the idea and the term in 2016, but in fact Steve Jobs and Apple took the first steps from native apps toward web apps in 2010. Meanwhile, Microsoft hopped on board with PWAs almost immediately after Google, and its Chrome-based Edge browser fully supports them.
What characteristics define a PWA?
Experts agree that there are ten characteristics that define a progressive web app:
- It is progressive, of course. The web app must work on any device, downloading increasingly advanced features until limited by the user’s device and browser. All modern browsers handle PWAs well, even if not 100% of the features are supported. By “handle,” I mean that the website should not appear jumbled or have overlapping objects, nor should it freeze when the app looks to enable a feature and finds that the browser does not support it.
- Users can install it. The web app provides the user the option to install the app on the home screen or desktop. Because of that…
- …the icon looks like any native app icon, and in fact opens in its own window, rather than opening a browser to work inside. There will also be as few page refreshes as possible.
- A progressive web app will be used on a wide range of screen shapes and sizes, as well as in a variety of browsers. It will need to adapt the UI accordingly.
- Potential users can find the PWA. Search engines still do not do so well at finding native apps in Apple’s App Store, Google Play, or the Microsoft Store, while the latter two do list PWAs and enable installation. At the same time, the search engine they use should note and communicate that it has found a web app, as opposed to a native app or a simple website.
- The user should be able to bookmark or share the app’s URL.
- It should be easy to get back to using the app. Often, the app itself will issue notifications to nudge the user into returning—a key feature for younger users (though this is also a negative feature for older users and can be negative for everyone if notifications are too frequent).
- It should be possible to open the app even when the device does not have access to the Internet, or when connected to a low-quality network. Even for applications in which this offline experience ability makes little sense, the app should at least indicate which functions will be unavailable while working offline.
- As long as there is sufficient connectivity, the PWA should refresh itself with the latest content.
- PWAs must use HTTPS to avoid man-in-the-middle attacks because of the way they are used and built.
Read more on Web development:
A web application security checklist for every stage of development
React best practices for web development
9 reasons why Drupal development is worth your attention
Angular vs. React—which one to choose
React vs React native—which one is better for your business
What is the Electron software framework?
Micro frontends: pros and cons
Top web development frameworks you should know about in 2024
There are two items a PWA must include in order to have the characteristics listed above.
First, it must include a web app manifest. This is just a text file—a simple JSON file— web browsers look into for information about the app’s name, author, version, description, which icons are used when, and a list of all necessary resources (among other things). The manifest is what web developers use to tell the browser how much of its user interface to show: standalone (no toolbar), full-screen (for the most app-like user experience), minimal-UI (back and reload only), or browser (the complete browser UI).
The manifest will also be used when the app is installed on a user’s mobile device, particularly the URL it should start at when launched. Chrome browsers look for a manifest and will only show the “Add to Home Screen” prompt if all conditions are met.
Second, it must implement a service worker. This is a client-side JavaScript file that works like a gopher between the server and browser, enabling all of those background functions that make the PWA act like native apps. These include push notifications, caching important assets and files, and directing network requests and responses from the server. This last duty is what keeps the app up to date for the user, while page load times remain low.
What companies offer their users a PWA?
PWAs have already found a wide variety of applications, and for those with the time and/or inclination, this will be a fun space to watch to see what is yet to come.
At the front of your mind should be what almost all of us came face-to-face with due to the pandemic: Zoom, Teams, and Google Meet. All are available as PWAs, in standalone mode or full screen.
Social media, too, uses progressive web apps, such as X (its Twitter Lite still exists as of December 2023), Tinder, and Pinterest. This last marks an interesting use case, because of the large variety of screen sizes on which to show sometimes thousands of pinned items. Facebook, for its part, returned to the Windows Store after a year’s hiatus—Microsoft has replaced Facebook’s native PC app with a progressive web app.
Commerce, of course, is well-represented among PWAs, from vacation planning (Trivago) to coffee (Starbucks), and fast food (McDonald’s) to discount shopping (Target and Walmart). Higher-end brands such as BMW and Lancôme have also jumped on the bandwagon.
When it comes to disruptors, Uber and Airbnb stand out. Uber in particular embraced the progressive web app in order to expand into markets where the best signal quality available might not be able to serve extensive graphics (more on this later.)
News media also makes use of PWAs, such as the Washington Post, the Financial Times, Wired, Forbes, and if you want to include it in this category, Medium. Each of these has a subscription model, such that only subscribers can view articles (or more than a minimum number of articles per month).
There are plenty of categories left: games, messaging (Telegram), music streaming (Spotify), travel (United Airlines), and more. Of particular note are some that point to possibilities not yet fully explored, such as code.nasa.gov, which is a catalog of open-source NASA code. Soundslice enables wannabe musicians to connect with other musicians to practice their instrument and get feedback; it may have been inspired by Duolingo, a language learning app. Lotto.de is the website for Germany’s lottery, naturally, and Yummly can find recipes for you according to your preferences or what ingredients you indicate you have to hand.
What are the advantages of creating a PWA?
You will find a number of good reasons to provide potential users with a PWA instead of a native app or some other… flavor, if you will, of web app.
First, PWAs can be easier to write than native apps. This can depend on factors like how complex the layout is and how many features there are. If the app you already have was written in JavaScript, conversion is especially easy. If you will be starting from scratch, however, consider the complexities of writing native apps for three different platforms—iOS, Android, and Windows 10 or 11. Writing just one app for all can be a big win.
Furthermore, unlike a native app, a PWA does much of the background work server-side rather than client-side (i.e., in web browsers on the user’s device), allowing web apps to take up far less of the device’s memory than a native one would.
The flip side of this is the very fact that PWAs are designed with some client-side processing, rather than the server-side processing of a traditional web page. This does have implications for SEO—search bots would have less to read and understand if it were not for the web app manifest. But the client-side processing plus careful caching are important if a PWA is to be usable offline. Back buttons—which must be implemented inside the app if using standalone mode or full-screen mode, since the browser’s toolbar will not be visible—bring up a cached version of the previous screen, to not leave the user waiting. That is important if mobile app users lose the Internet signal by entering an elevator, a tunnel, or a mountain valley.
Another plus is lower friction. The fewer steps the user needs to take in order to use an app, the greater the user’s engagement. Updating is automatically done on the business end as with any other website, and not by the user as with an app. “Installation” is immediate and does not require a visit to an app store. This is an especially good attribute for businesses that do not want to share a cut of any subscription fees with an app store, though this issue is still far from settled.
Meanwhile, as noted above, PWAs are indeed listed in the app stores, giving them another avenue of discoverability. Regardless of how the user finds and installs the app, an icon will be there on the device’s home screen, able to show badges and notifications, and ready to use.
The grass is not necessarily greener on the PWA side…
There are a few disadvantages of varying seriousness.
First, if your native app is a high-performance game, or indeed any large app with an extensive range of functions and capabilities, a PWA is not the right answer. PWA users come to the app with just one or a few purposes in mind—the app is a tool.
Second, support is not universal. Mozilla-based PC browsers do not allow the user to install PWAs—that is, add an icon to the user’s home screen— unless a third-party add-on is installed, so Firefox fans will have to select Chrome-based browsers to do the installing. Plus, those who have older iPhones and iPads will not receive push notifications, and such visitors to websites will not see any indication of sites being downloadable as web apps. Push notifications were enabled with Safari 16.4, and to download a web app from its website requires iOS 14.
Next, PWAs are as yet unable to access all of a phone’s features, though the exact list may differ between browsers and platforms. This is an area of intense work—features such as Bluetooth, NFC and, for some, fingerprint readers, are indeed now available to PWAs.
Finally, web apps are unable to “talk” to Facebook, LinkedIn, or Google in order to authenticate logins. This does not mean that logins cannot be done through these services, only that they will have to be done online, even if the user is logged in on their social media or Google app.
Is a progressive web application right for your business?
It is an almost dizzying array of categories listed earlier in this article, but what they all have in common is the limited range of functions carried out by the PWA on a fairly simple app, even if there is a large amount of content available.
If your business is small or a recent startup without grand growth plans, a traditional website is probably all you need for your simple online presence. You will not have the kind of return on your investment given the relative cost of developing a PWA—it is not something for the newbie or casual enthusiast.
Larger, established businesses with a wide range of services to offer their digital customers would do well to choose a native app. This is not just for the obvious uses like gaming, nor even large social media platforms. Banks and other financial services providers need to ensure the best user experience at all times and may need access to all of the capabilities of a user’s device. This means that the additional development costs associated with developing for multiple platforms are no issue for this business size.
Also, if you already have a native app, whether on PC, Android, or iOS, there is not necessarily a reason to replace that app, since it may have strengths that a PWA cannot replicate.
In the middle are the businesses for whom the web is not just a point of contact but can also be a channel for providing services. There is no need for advertising specifically related to the app, and most users can easily “install” it. If the app and your site are up to date with current web technologies and UX practices, your users will be satisfied. So, what kind of businesses should consider a PWA? E-commerce, news, and productivity tool providers. In other words, if your use case is for a direct-to-consumer app to deliver content, shopping, or a service, you should strongly consider a PWA.
In summary
Since so much of our lives are managed on our mobile devices, no company can ignore that convenience. The PWA has grown up around that need, bringing the UI and UX from the desktop screen to the little one we use to communicate.
Enhancing your customer experience, your retention rate, and your conversions might be the greatest effects you get from having a progressive web app developed for your business.
This article was originally published October 7, 2021, and updated January 16, 2024.
