Introduction to Progressive Web Apps

What is a Progressive Web App?

Progressive Web Apps, or PWAs for short, are mobile applications designed to leverage modern web features to deliver Native App-like experiences to the end-user while running in the browser.

At its simplest, a Progressive Web App is a browser-based mobile app (differing from Ionic/Cordova hybrid apps designed to run natively on handheld devices).

Typically, a PWA will take advantage of modern web APIs and features such as push notifications, offline caching, and installability (they can be “pinned” to a user’s home screen on their device).

When running on older browsers that don’t support the latest web APIs and features, a Progressive Web App should gracefully degrade and allow the user to reasonably access page content (albeit without the bells and whistles that come with the features in modern browsers).

What must a PWA be able to do?

Functionally, a Progressive Web App must be:

• Responsive: Adapts to the screen size of the device that it is viewed on (mobile, tablet, or web)
• Discoverable: Can be indexed by search engines
• Installable: Can be installed on the home user’s device
• Linkable: Can be shared without requiring complex installations via URLs
• Network independent: Is expected to function in low network connectivity or offline
• Progressive: Works across all browsers
• Engaging: Can engage the user even when “switched off” by using features such as push notifications

What are the key features/technologies?

Progressive Web Apps make use of the following architectural patterns and technologies and web APIs to provide native-like experiences:

• App Shell model allows the minimal HTML, CSS, and JavaScript required to power the user interface to be cached and does not require reloading by the network on subsequent user visits.
• Web App Manifest provides information about an application, such as author, icon, description version, etc., in the form of a JSON file which allows that application to be pinned to the home screen of a user’s device.
• Service Workers are scripts that act as proxy servers that sit between the web application and the browser or network to help to control content caching, background syncing, offline access, and push notifications, amongst other features.

Browser support

Unfortunately, browser support is always an issue wherever web-based technologies are concerned, as demonstrated by the dismal statistics for the Web App Manifest:

Browser support for the Service Worker API support fares slightly better, however:

As Service Workers play a massive role in driving the functionality of Progressive Web Apps, the level of support offered by modern browsers, although increasing, is pretty poor.

This means that only the most recent browsers will be able to support Progressive Web Apps, while older browsers will simply get a website that renders in their browser but without some (or all) of the “bells and whistles” offered by the latest supported browsers.

For most projects, this might not be an issue at all. Still, legacy support is always worth bearing in mind when embarking on cross-platform development, particularly where such support is limited.

Changes since Ionic 4

In Ionic 3, PWA support was baked in and able to be activated with little effort. From Ionic 4 onwards, things are a little different thanks to its framework-agnostic approach, which leaves developers able to develop their applications from the following framework options:

• Angular (default front-end framework for Ionic)
• React
• Vue

Support for further frameworks has been mentioned (such as EmberJS) and the option to eschew the use of a framework altogether and simply develop with native TypeScript/JavaScript.

This bring-your-own-framework approach (or use none at all) means that the framework of choice is responsible for most of the work, with Ionic simply sitting on top and interacting with it as a secondary layer.