What is a Progressive Web Application?

1-26-2017

Updated 05-06-2020

A Progressive Web Application (PWA) uses new technologies to provide a mix of the best features of web sites and native mobile apps. For a long time, mobile apps have had several features that made them more convenient than web sites in certain ways. However, tasks like launching from the homescreen, push notifications, and offline functionality are now possible for web applications with the latest technology enhancements. PWAs are often described as reliable (because they load instantly while offline), fast (because they have smooth animations and respond quickly to user interaction), and engaging (because they feel like a native app but have a better user experience).

A web application must meet a few criteria to be considered a PWA:

For security purposes, a PWA must be served and encrypted over HTTPS
A PWA must be able to load some content while offline (For example this could be as simple as showing a custom page that indicates that you are currently offline)
PWA must reference a Web App Manifest

Examples of Progressive Web Applications

Here are a few Google case studies of successful PWAs:

Want to see more? Here are some examples of popular PWAs.

Features of a Progressive Web Application

Web App Manifest

A Web App Manifest is a JSON file that contains details about the web application. There are many things that a manifest file can contain, but at the very least it should have the following properties:

Name
Short name
Start URL
Display
At least one icon, specified as a URL

Application Shell

Another concept useful in implementing a PWA is the Application Shell. An Application Shell is the minimum HTML, CSS, and JavaScript required to power a basic user interface. The Application Shell can be loaded quickly and then later can be dynamically filled in with content. This helps with perceived performance, since it allows users to quickly see some progress when loading a web application. While it's not necessary to utilize an Application Shell to build a PWA, it does enable PWAs to provide a fast “app-like” experience.

Service Worker

The most essential (and most complex) part of implementing a PWA is the Service Worker API. You can think of a Service Worker as a program that runs in the background, independent of any particular web page. Service Workers are event driven, so they can respond to different scenarios. For example, a Service Worker can communicate with a registered page through HTTPS to:

Indirectly manipulate the DOM of a page—triggering JavaScript on the page to update the content, structure, and styling.
Cache assets and and intercept requests—allowing the page to display cached or offline content.
Access the Notifications API—enabling the web app to trigger and display push notifications.
Access the IndexedDB API—allowing the web app to store complex data locally, even while offline.

Tip: One major caveat is that not all of these features are fully supported in major browsers, Android, and iOS yet - it may be some time before they are.

If a browser does recognize a web application as a PWA, it may prompt users on mobile devices to add the PWA to their homescreen. This prompt comes in the form of an app install banner, and it isn't something a PWA deliberately requests. The browser decides if and when to send these prompts. However, a PWA can defer or even cancel them, if it is preferable that a user not receive this kind of prompt. Adding a web application to a homescreen is not a new concept, but this app install banner makes it a lot more convenient for users.

Another interesting feature enabled by Service Workers is the Push API. This allows a PWA to send a push notification to a user, whether or not they have the web application open. These notifications are opt-in, and should behave like push notifications from native apps.

The most interesting thing that a PWA is capable of is offline functionality. A Service Worker can cache assets on the initial load of a page that it controls. Once that initial load has taken place, it can intercept subsequent calls to that page and decide from there how to handle it; this allows for a few different possibilities.

If it detects no connection, it can load a custom Offline page. Or, it could load the cached content and then update the page once the request comes through.
It could also load an Offline indicator alongside the cached content. If the page in question had a form, it could even save user input into local storage. The input data could then later be synchronized with data on the PWA server once the mobile device obtains a stable internet connection.

Benefits of Utilizing Progressive Web Applications

The top benefits of using PWA’s are: woman holding a phone at a remote beach

Increased accessibility and convenience for users.
Offline functionality that enables users to interact with a web application even if there is poor, or no internet connection.
Push notifications which increase user engagement.
Automatic updates so users are always on the lastest version of the app.
Responsive and fast load times equate to an SEO boost with Google.

If you are interested in enhancing user experience and utilizing offline accessibility for your web application we are happy to schedule a consultation with you to see how PWA features can benefit your business.

References:

Back to blog listing

Next: AVIBE’s 10 Principles for Successful and Effective Web Development