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: