Find by Category

Drupal PWA – Installation & Configuration

This tutorial will help you install and configure Progressive Web App (drupal pwa) module on Drupal 8. The only requirement is your website needs to have SSL installed and configured properly.

Get the PWA Module Download URL

download drupal pwa
copy link address of the drupal 8 pwa module

You can get PWA module for Drupal 7 & 8 from the following link

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

Install Drupal PWA Module

Login to your Drupal website admin area, click ‘Extent’ tab/button on the top then click ‘+ Install new module’ and paste the Drupal PWA module download URL and finally click ‘Install’.

Paste the link in the URL field and click ‘Install’

Enable & Configure PWA Module

From Drupal site admin area click ‘Extend’ and look for ‘pwa’ module and select both ‘Progressive Web App’ and ‘Progressive Web App Extras’ and click ‘Install’.

Once these PWA modules are installed successfully, search for ‘pwa’ again to configure them, click ‘Configure’ one by one for both the modules.

Select and install PWA modules. Open the PWA configuration page.

Configure Drupal PWA Manifest file

pwa manifest configuration
Edit PWA manifest file for your web app

Upload Web App Icon image

It is advised to upload your site logo in 512×512 pixel in .png format only. No other format is supported. Finally ‘Save configuration’.

Upload site logo in 512*512 pixel in png format

PWA Extras Module Configuration

From ‘Extend’ modules’ page, search for PWA extras and click configuration with gear icon and click it. Now, on the PWA Extras configuration page, make changes for your web app.

PWA Extras configuration

Save PWA Extras Configuration

pwa-extras-save-configuration-1
PWA Extras Save configuration

Audit PWA with Chrome’s Lighthouse

Just logout of your site’s admin area and navigate your site’s domain in Google Chrome browser and press F12 and select Audits and click ‘Run audits’ at bottom.

Here is Drupal PWA Audit Score

Watch me Make Drupal a PWA

https://youtu.be/iYxNHXjS-bQ

Related Posts..

  1. Install Drupal 8 and Drupal 9 on Windows 10
  2. Best Drupal Hosting
  3. Drupal 7 Bootstrap Theme Creation