Requirements and Installation

Requirements

HTTPS is an absolute requirement for Progressive Web Apps. Since a Service Worker could be used to permanently hijack an insecure connection, it is part of the W3 specification that Service Workers only function on HTTPS.

Installation and Configuration

To begin installation, download and enable the PWA module. You will need to save the admin configuration at least once before your visitors can start enjoying the benefits of your new PWA.

Configure Web Manifest

Visit /admin/config/system/pwa to review and change the Manifest settings to control the branding of your PWA.

Almost all manifest options can be changed on this screen except for app icons. To specify your own icons use hook_pwa_manifest_alter(). The official documentation for this hook is contained within the pwa.api.php file of the module and is kept up to date with each release. To ensure availability of the icons it's recommended to place the icons in version control, typically within the active theme.

Configure Service Worker

Visit /admin/config/system/pwa/serviceworker to review and change the Service Worker settings.

• When should the Service Worker be registered? — if necessary you can specify when during the page load the SW registration will occur. The default is the most conservative setting, which happens after all other necessary CSS, JS, and images have loaded. On occasion it might be necessary to adjust this, but if everything is working it's best to leave it alone.
• Exclude URLs — you can specify which URLs will be completely ignored by the Service Worker. During the fetch event listener, any URL which matches a pattern listed here will not be altered, cached, or otherwise modified. They will simply pass through to the internet and complete the round trip as usual.
• URLs to cache on install — List your most crucial pages which you'd like to be available for offline viewing. Any URLs specified here will receive special treatment during Drupal cache clears. The URL will be parsed and the DOM inspected for any essential assets (CSS, JS, and some images). All of these assets will be added to the array of items that must be cached during the install event listener.
  • DO list your most important pages that might be useful offline. For convenience the module supplies a very basic "you're offline" page so that visitors are guaranteed to see branding even when they have no internet connection. 
  • Do NOT over-fill this list with large media. Caches with large footprints are typically deleted first when a device is low on space, and once the cache is gone, the benefits of offline functionality disappear.