Progressive Web App (PWA) integration with Drupal
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users by combining features offered by most modern browsers with the benefits of mobile experience. Integration of PWA with Drupal makes Drupal inherit the latest web technologies and harness devices capabilities. Before diving into integration with Drupal lets see what PWA is and how it affects today world of web.
Progressive Web App or PWA is like an alternative to native apps which has the following feature:
-
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
-
Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
-
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
-
App-like - Feels like an app, because the app shell model separates the application functionality from application content.
-
Fresh - Always up-to-date thanks to the service worker update process.
-
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
-
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
-
Re-engageable - Makes re-engagement easy through features like push notifications.
-
Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
-
Linkable - Easily share the application via URL, does not require complex installation.
-
Low cost - PWA has a low development cost than the native app.
-
Rapid development - With low-cost PWA and easy and fast to develop as well then the native alternative of the app.
Why PWA?
According to the study native app losses 20% of users on every step that is needed to download and install the app. On the other hand, according to the stats, PWA showed better results in terms of conversion as PWA can be downloaded directly from the browser without going to any app store and it behaves as a normal app on your mobile.
PWA gets benefits from the web platform features to provides an app like experience. You can visit https://whatwebcando.today to identify your browser capabilities which can be used by any progressive web app.
Here is an example of features provided by Google Chrome (Version 65.0.3325.181).
Components of PWA
PWA contains 3 important parts:
-
App shell: App shell provides minimal HTML, javascript and CSS that powers your application UI. It is loaded in less than a second. It is stored and served from the cache if available.
-
Web manifest: This allows you to add your application to user’s home screen. It is added to the head tag of your page as below -
<link rel="manifest" href = "/manifest.json">
Manifest.json file defines all the components of how the progressive web app will behave.
-
Service workers: Service Workers can be scripted to intercept every network request and serve a response from cache even when the user is offline.
Integration with Drupal
Progress Web App can be integrated with Drupal simply by using PWA module . This module out of the box makes the Drupal application PWA compatible without much of an effort.
Drupal 7 Integration
In Drupal 7 PWA module provide config form to generate the manifest.js file. And once a valid manifest.js file is generated, you can validate it with chrome’s lighthouse plugin.
Drupal 8 Integration
PWA integration in Drupal 8 is not as simple as enabling the module. Unlike Drupal 7 version of PWA module, Drupal 8 version doesn’t provide any configuration form to configure the manifest.js file and because of which even after enabling the module you won’t see any manifest.js file tag in the head.
One of the reason is the core issue to extend site information page to generate a manifest.js file . For is one issue is already logged in Drupal 8 version of PWA module to provide the config form functionality till the core issue is merged in the core.
So to make the PWA work on Drupal 8 sites first apply the patch provided in the issue . Once the patch is implemented goto admin/config/system/pwa and configure the settings.
Some of the settings like the logo of the manifest.js file can be configured from the site logo setting on theme setting page.
Blockers & Requirements for PWA
-
Require https: According to PWA standard website should be served over https.
-
Responsive: Application should be responsive for tablet and mobile.
-
Safari PWA support: For now safari doesn’t support the PWA fully. More info - https://medium.com/awebdeveloper/progressive-web-apps-pwas-are-coming-to-a-safari-near-you-216812aba5a
Tools for PWA
-
Lighthouse - https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en
-
Dev tools - https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers
Resources for PWA
PWA in action
-
Flipkart Lite
-
Zomato
-
Paytm Lite
-
Myntra
-
Jabong