Progressive web applications (PWA) are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on mobile devices. Since they are a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play.
While web applications have been available for mobile devices for as long as mobile devices have existed, they had generally lagged behind native apps in terms of speed, features, and user adoption, especially on mobile devices. Direct access to hardware and the ability to work offline, previously only available to native apps, allows PWAs to perform much faster and to provide more features in line with native apps.
PWAs do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs work in any browser, but “app-like” features such as being independent of connectivity, install to home screen and push messaging depend on browser support.
What is a Progressive Web App?
PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.
For example, web apps are more discoverable — it’s a lot easier and faster to visit a website than install an application, and you can also share web apps via a link.
On the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. You can install a native app so that it works offline, and users love tapping their homescreen icons to easily access their favorite apps, rather than navigating to it using a browser.
PWAs give us the ability to create web apps that can enjoy these same advantages.
It’s not a brand new concept — such ideas have been revisited many times on the web platform with various approaches in the past. Progressive Enhancement and responsive design already allow us to build mobile friendly websites. Working offline and installing apps was possible in the Firefox OS ecosystem a few years ago.
PWAs, however, provide all this and more, without getting rid of any of the existing features that make the web great.
What makes an app a PWA?
As we hinted at above, PWAs are not created with a single technology. They represent a new philosophy for building web apps, involving some specific patterns, APIs, and other features. It’s not that obvious if a web app is a PWA or not from first glance. An app could be considered a PWA when it meets certain requirements, or implements a set of given features: works offline, is installable, is easy to synchronize, can send push notifications, etc.
In addition, there are tools to measure the completeness of an app in percentages. (Lighthouse is currently the most popular one.) By implementing various technological advantages, we can make an app more progressive, thus ending up with a higher Lighthouse score. But this is only a rough indicator.
There are some key principles a web app should try to observe to be identified as a PWA.
It should be:
Progressive — Works for every user, regardless of browser choice, using progressive enhancement principles. Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers.
Responsive — Fits any form factor: desktop, mobile, tablet, or forms yet to emerge. Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.
Connectivity independent — Service workers allow offline uses, or on low quality networks. Modern web apps can work when the network is unreliable, or even non-existent. The basic ideas behind network independence are to be able to:
- Revisit a site and get its contents even if no network is available.
- Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.
- Control what is shown to the user in situations where there is no connectivity.
This is achieved by a combination of technologies — Service Workers to control page requests (for example storing them offline), the Cache API for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as Web Storage and IndexedDB to store application data offline.
App-like — Feels like an app to the user with app-style interactions and navigation.
Fresh — Always up-to-date due to the service worker update process.
Safe — Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another.
Discoverable — Identifiable as an “application” by manifest.json and service worker registration, and discoverable by search engines.
Re-engageable — Ability to use push notifications to maintain engagement with the user. One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren’t looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as Service Workers for controlling pages, the Web Push API for sending updates straight from server to app via a service worker, and the Notifications API for generating system notifications to help engage users when they’re not in the browser.
Installable — Provides homescreen icons without the use of an App Store.
Linkable — Can easily be shared via a URL, and does not require complex installation. A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform. One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process.
The technical baseline criteria for a site to be considered a progressive web app by browsers:
Originate from a secure origin. Served over TLS and green padlock displays (no active mixed content).
Load while offline (even if only a custom offline page). By implication, this means that progressive web apps require service workers.
Reference a web app manifest with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen)
An icon at least 144×144 large in png format.
Some progressive web apps use an architectural approach called the App Shell Model. In this model, service workers store the Basic User Interface or “shell” of the responsive web design web application in the browser’s offline cache. This model allows for PWAs to maintain native-like use with or without web connectivity. This can improve loading time, by providing an initial static frame, a layout or architecture into which content can be loaded progressively as well as dynamically.
Is it worth doing all that?
Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:
- A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time.
- The ability to update only the content that has changed when an app update is available. In contrast, with a native app, even the slightest modification can force the user to download the entire application again.
- A look and feel that is more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
- Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.