PWA, the technology of progressive web applications

Progressive Web App are designed to appear as local apps, although provided online.

In November 2017, Google announced the end of Chrome Apps (Chrome Apps) and the closing of the Chrome Store, the store that allowed them to be downloaded.

PWA

This type of application has become irrelevant and not widely used, says Google, and should leave room for the PWAs, which provide an identical user experience and have the advantage of running on all recent browsers using the new technologies of the web.

The meaning of the term "progressive" in PWA is rather vague and refers to the progress made by applications running on any computer or mobile. PWAs actually have more specific features:

Technologies

For a web application to be similar to a local application, it must be responsive, without latency, which is enabled by a set of new tools.

WebAssembly

This new language of type bytecode makes it possible to add APIs to JavaScript, available in the browser and which are generated from C, C++ or other languages. Their execution speed is close to that of the binary code.

IndexedDB

A database can be created on the client machine with IndexedDB. It is accessible only by the application that creates it. It can copy the data from a database to the server (but we must switch to the key/value format). It can also contain wasm or JS code that will remain permanently stored on the client machine (for this application only) and will no longer have to be loaded at each new session.

Web Workers

You can run scripts in the background, asynchronously, in a Web Worker. A way to make the application more fluid. It communicates with the page by postMessage.

Service Workers

It's a kind of Web Worker dedicated to interactions between the server and the application. Like the previous one, it works asynchronously in the background, uses the postMessage interface. It is a proxy for everything that comes from the server: it intercepts what is communicated, transmits it to the page that uses it at the appropriate time.

Manifesto and offline mode

The HTML tag has the manifest attribute to describe a progressive application. The file specified by this attribute previously contained a resource list to be cached on the client machine for offline use. We previously used this line:

<html manifest="myapplication.appcache">

The resources were "cached" on the client machine, hence the extension appcache but we can use any other extension. But this is now obsolete because we get the same result with IndexedDB and Service Workers.

From now on, the manifest attribute gives the link on a descriptive file so that the application is more easily usable by any installation program, or other. Its declaration has the following form:

<html manifest="myapplication.manifest">

The file thus links to a JSON-based format defined for this purpose by the W3C. It includes the following indications.

Examples of PWA