If you work in or around web technologies, you may have heard a hot new phrase getting tossed around lately: Progressive Web App (complete with its own acronym: PWA). What is a progressive web app? In short, it’s an attempt to fuse the latest modern web and native app technologies, allowing you to use a web application as if it was an app downloaded from your App Store.
The concept of progressive web applications was originally conceived of by Apple; in fact, users could add and access “web apps from the home screen” on the original iPhone all the way back in 2007 – though in practice this feature was seldomly used. However, while Apple may have introduced the concept and let it languish, Google has since picked up the idea, both coining the phrase itself as well as creating the standard by which a progressive/hybrid web app is now defined.
Today, Google identifies PWAs as user experiences that feature the following characteristics:
- Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
- Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
- App-like – Feels like an app, because the app shell model separates the application functionality from application content.
- Fresh – Always up-to-date thanks to the service worker update process.
- Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
- Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
- Re-engageable – Makes re-engagement easy through features like push notifications.
- Installable – Allows users to add apps they find most useful to their home screen without the hassle of an app store.
- Linkable – Easily share the application via URL, does not require complex installation.
These features all sound pretty great, right? There are a host of benefits offered by progressive web apps that neither traditional web pages nor native apps can offer. For starters, PWAs can be deployed on multiple platforms – like mobile devices, tablets, and web browsers – simultaneously. This offers users the ability to choose whether to access the app over the web (via URL) or by installing directly on their devices. In turn, this eliminates many of the differences between the native “app store” version of an app, and the “web” version. Having a dedicated PWA on a user’s mobile device home screen, for instance, allows users to stay logged in and access the app quickly, rather than having to open up their mobile browser, navigating to the correct tab, and logging in every time they wish to access the application. Similarly, progressive web apps are also designed to have offline functionality – though like a native app, some features naturally will depend on internet connectivity.
No web application is perfect, though, and progressive web apps are no exception. Many of the drawbacks of progressive web apps still stem from this disconnect between iOS and Android devices: Google may have created PWA standards, but that doesn’t mean that Apple devices are guaranteed to acknowledge or implement those standards in any predictable way.
Particularly among mobile platforms, “installing” a PWA can prove to be tricky. As users attempt to add a PWA to their home screen via a URL, they are oftentimes prompted to install the native “app store” version of the app, even from within the PWA. This can prove to be quite confusing, as users may struggle to understand whether they should choose to access the native version of an app or its progressive web app variant.
Additionally, the capabilities of a progressive web app may differ based on the user’s operating system and how it handles PWAs. In a similar vein, PWAs are not truly native apps – meaning experiences will suffer some limitations due to not being as tied to the user’s hardware as a native app. This can result in undesirable drawbacks like less smooth UX, slower performance, and in the case of iOS, the inability for the PWA to access core features like Bluetooth, Touch ID, Face ID, the altimeter sensor, and more. Oftentimes, folks are under the impression that they will be able to “develop once, run everywhere” when making a progressive/hybrid web app. Unfortunately, this is seldom the case – differences in browser and webview implementations often require some amount of platform specific development.
For a deeper dive into the characteristics, benefits, and drawbacks of progressive web apps, check out this in-depth presentation from Google:
Click here to open the video in a new tab.
Learn more about Filament’s web design and development capabilities:
UI vs. UX Design: What’s the Difference?
Filament Games Core Values
Filament Games Portfolio