Progressive Web App (PWA) In Drupal
Introduction
A contributed module for Drupal provides a drop-in replacement for the fundamental characteristics of a Progressive Web App, which has been available since Drupal 7. With the help of this module, your website will be able to respond swiftly to user interactions, never display an “offline” notice, and look exactly like a native app on the home screen. You can choose to use a custom service worker instead of the module if your PWA requires a great deal of modification.
Installing the PWA Drupal 9 Module
Installing the Progressive Web App Drupal module was simple with Drupal 7; all we required was downloading and enabling the module. You might use a configuration form to build and check the manifest.js file. Nevertheless, in Drupal 9, we are unable to immediately incorporate this capability by just turning on the PWA module. For this reason, you are not given the ability to configure the manfest.js file.
Install the module by downloading and enabling the PWA Drupal module.
Once done, navigate to configuration -> PROGRESSIVE WEB APP -> PWA settings and add the required information.
Service Worker
Service Worker URLs to cache – Here, you can specify the pages you want to be accessible even when offline. The URLs indicated here will be cached; when you make changes, flush the cache.
Excluded URLs – List any pages that must be accessible exclusively via the internet in this section.
Offline page – When users go offline, and the page isn’t cached, an offline page that’s been customised for them will be displayed.
Manifest.json
Users can add the PWA to their home screen by adding the Drupal manifest.json file to their website. You can change the name, display name, background colour, orientation, and other variables in order to change how your PWA will operate.
<php> pwa.manifest path: '/manifest.json' defaults: __controller: '\Drupal\pwa\Controller\PWAController::pwa_manifest' requirements: _permission: 'access content' </php>
The file will be added to the head tag of your index page.<link rel=”manifest” href “/manifest.json”>
For Drupal 9, apply this patch
Tools for developing Progressive Web Apps (PWA)
While developing a Progressive Web App in Drupal, you might need some tools which can be used to validate and improve the performance and quality of your web app.
-
Lighthouse: Lighthouse is a browser extension that can give you a good start in developing Progressive Web App in Drupal by auditing a page and generating reports on how well the page did. And based on the generated report, you can improve the Drupal web app.
-
Tools for PWA developers: Once you start using the PWA module to generate a Drupal page for the web app you can use a lot of methods and tools to test and debug the PWA on a browser. These tools help in debugging network issues, PWA offline functionality, service workers, web app cache storage, and much more.
You can obtain the greatest features of both native and web apps with progressive web apps. You can construct them quickly with Drupal 9 and give users immersive experiences.
