Progressive Web App

Drupal Versions

D7

D8

D9

Progressive Web App

For mobile apps in real life, we need to cater different versions for different versions, such as iOS and Android. On top of that, some users may upgrade the apps to the newest version, but some may not. Because of this, development of mobile apps has to take care of multiple versions over time, including those out-dated. In terms of development and operation costs, it is a big burden in maintainability and sustainability.

Web applications (often called Web Apps) run on browsers and bypass these problems, and keep the operation cost down. No installation is needed, and users are always synchronized with the newest updates. Of course there are differences between apps running natively and running on browsers, mainly in that mobile apps stores data offline.

With the advancement of modern browsers, websites can now store larger volume of data offline. With this, Progressive Web Apps (PWA) appears which make use of this feature and allow pages of Web Apps to be stored offline too, once it is visited.

PWA is also available through this module on Drupal, which opens the world of mobile-specific applications.

For Installation

Official Link to Module

https://www.drupal.org/project/pwa

General

This module enables the use of some special features (e.g. Service Workers, Manifest) in the modern browsers of mobile devices to build PWA, which can

Pre-configure the web app name, theme and background colors
Configure the app logo if not the default website logo
Specify pages which should be cached adn still available while offline.
Specify pages which should not be cached
An offline page which tells the users that he is currently offline

Video

Installation

Follow normal module installation procedure.

There are 2 sub-modules coming with it:

Progressive Web App
Progressive Web App Extras - additional settings for Apple or iOS devices

Configuration

Go to Admin > Configuration > Progressive web app > Settings @ Configuration Page Location @ /admin/config/pwa/settings
Follow instructions to configure the Manifest settings. It has more to do with the appearance of the web app on the screen. In particular:
- Image: This is the application icon, which requires png files with min dimensions 512x512 pixels. After resizing, it will be 512x384 pixels
- Short name: The name of the web app which will appear on the mobile by default, but user can change it on his own..
Follow instructions to configure the Service Workers settings. It is to define which pages are cached, and which not.
For Apple / iOS devices, also enable the Progressive Web App Extra and configure the settings accordingly