Progressive Web App

Drupal Versions

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

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


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



  1. Go to Admin > Configuration > Progressive web app > Settings @ Configuration Page Location @ /admin/config/pwa/settings
  2. 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..
  3. Follow instructions to configure the Service Workers settings.  It is to define which pages are cached, and which not.
  4. For Apple / iOS devices, also enable the Progressive Web App Extra and configure the settings accordingly


To use this module, there are some requirements on the server:

  • PHP 7.2 or greater
  • Support secure connections using HTTPS


2 sub-modules included

2 sub-modules included

PWA Configuration Page
Configuration Page Location @ /admin/config/pwa/settings
Configuration for Manifest
Configuration for Service Workers
Configuration for PWA Extra sub-module for additional settings for Apple or iOS devices
Application Icon Creation
Based on Need