Surfer Dude Studios

In short a progressive web application takes advantage of the latest technologies to look and feel like a native or mobile app that would normally be downloaded to a device from the appropriate platform service.

Why Progressive Web Apps?

Use of an app is inherently more complicated. A user must first find the app in an app store, download it, install it, and then, finally, open it. When a user finds your progressive web app, they will be able to immediately start using it, eliminating the unnecessary downloading and installation stages. And when the user returns to the app, they will be prompted to install the app and upgrade to a full-screen experience.

However, a native app does have some advantages over a website. Mobile applications with push notifications achieve greater retention than their counterparts without push, and a user is more likely to reopen a mobile application than a website. In addition, a well-designed mobile application consumes less data and is much faster because some resources are cached (stored) on the device.

A progressive web application takes advantage of a mobile app's characteristics, resulting in improved user retention and performance, without the complications involved in maintaining a mobile application, they are in effect a good middle ground solution.

History

At the launch of the iPhone in 2007, Steve Jobs announced that web apps, developed in HTML5 using AJAX architecture, would be the standard format for iPhone apps. The aim was to remove the need for software development kit's (SDK's), and the apps would be fully integrated into the device through the Safari browser engine.

This model was later switched for the App Store the same year. Jobs was forced to reverse his original thinking, and as a result, although Apple continued to support webapps, the vast majority of iOS applications shifted towards development via an SDK, and installation via the App Store.

However beginning in the early 2010s, dynamic web pages allowed web technologies to be used to create interactive web applications. Responsive web design, and the screen-size flexibility it provides, made PWA development more accessible. Continued enhancements to HTML, CSS, and JavaScript allowed web applications to incorporate greater levels of interactivity, making native-like experiences possible on a website, and therefore on PWAs.

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps" to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system.

Google then put significant efforts into promoting PWA development for Android. With Apple's introduction of service worker support for Safari in 2018, PWAs were now supported on the two most commonly-used mobile operating systems, Android and iOS. By 2019, PWAs were available on desktop browsers Microsoft Edge (on Windows) and Google Chrome (on Windows, macOS, Chrome OS and Linux).

The general attributes that constitute a progressive web application

Before discussing coding or building a PWA, it is important to understand that progressive web apps have the following characteristics:

Progressive

Works for every user, regardless of browser choice, using progressive enhancement principles.

Responsive

Fits any form factor: desktop, mobile, tablet, or forms yet to emerge.

Faster after initial loading

After the initial loading has finished, the same content and page elements do not have to be re-downloaded each time(ordinary websites often already made use of the browser cache to avoid re-downloading the same data redundantly.[further explanation needed] But on progressive web applications, the same elements do not need to be re-rendered again).

Connectivity independent

Service workers allow offline uses, or on low quality networks.

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.

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.

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.

The technical baseline criteria for a site to be considered a progressive web app by browsers were described by Alex Russell in a follow-up post:

• 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 144x144 large in PNG format.
• Use of vector graphics that are indefinitely scalable and require smaller file sizes.

Build

All PWAs require at minimum the following;

• A web app manifest
• A service worker

Web app manifests

The web app manifest is a W3C specification defining a JSON-based manifest (usually labelled manifest.json) to provide developers a centralized place to put metadata associated with a web application including:

• The name of the web application
• Links to the web app icons or image objects
• The preferred URL to launch or open the web app
• The web app configuration data
• Default orientation of the web app
• The option to set the display mode, e.g. full screen

This metadata is crucial for an app to be added to a home screen or otherwise listed alongside native apps.

Service workers

A service worker is a web worker that implements a programmable network proxy that can respond to web/HTTP requests of the main document. It is able to check the availability of a remote server and to cache content when that server is available, and serve that content later to the document. Service workers, like any other web workers, work separately from the main document context. Service workers can handle push notifications and synchronize data in the background, cache or retrieve resource requests, intercept network requests and receive centralized updates independently of the document that registered them, even when that document is not loaded.

Service workers go through a three-step lifecycle of Registration, Installation and Activation. Registration involves telling the browser the location of the service worker in preparation for installation. Installation occurs when there is no service worker installed in the browser for the web app, or if there is an update to the service worker. Activation occurs when all of the PWAs pages are closed, so that there is no conflict between the previous version and the updated one. The lifecycle also helps maintain consistency when switching among versions of service worker since only a single service worker can be active for a domain.

Conclusion

Progressive Web Apps are still in their infancy but offer an opportunity to play around with the methodologies behind them and see how well they can apply to web applications. A solid middle ground between the simplicity of a website, and the reliability of a native app, they are a useful asset for providing the richest possible web browsing experience.