Drupal and PWAs (Progressive Web Apps) – Overview – Part 1 of 3

• Part 1: PWA and Drupal, General Overview
• Part 2: Decoupling
• Part 3: PWA Example with Drupal 8 and Gatsby

What is a PWA (Progressive Web App)?

A Progressive Web App (PWA) is a web application that uses modern web features to offer users an experience similar to that of an app (meaning iOS, Android, etc.) by combining the capabilities offered by most modern browsers with the benefits of the mobile experience.

Integrating PWA with Drupal allows Drupal to inherit the latest web technologies and features.

A Progressive Web App, or PWA, is an alternative to native apps and features the following characteristics:

• It is Progressive: It works on all browsers, following the principle of progressive enhancement. If the browser does not support any of these new features, the site remains a "classic" website and will still be usable as such!
• It is Responsive: It adapts to all screen resolutions (mobile, tablet, desktop, etc.). There's no obligation, but since the point is to offer an alternative to native apps, a PWA that could only be accessed on a desktop would be of little interest!
• It is connection-independent: A PWA should not suffer from poor connection quality (3G) or even from a total lack of connection (offline). This is where service workers come in, allowing you to modify the site's behavior in the event of problems or loss of connectivity.
• It looks like an app: because the shell app model separates the functionality of the application from its content.
• It is always up to date: It's a website and so it can be quickly and continuously updated without going through App stores (Google Play, Apple Store).
• It is secure: It is served via HTTPS to prevent data interception and to ensure that the content has not been tampered with.
• It is identifiable as an application thanks to its manifest, which allows, among other things, search engines to find it.
• It encourages re-engagement through functionalities such as push notifications.
• It is installable: It allows users to add applications they find useful to their home screen without the hassle of an app store.
• It is shareable: It can easily be shared via a simple URL and doesn't require complex installation.

Other nuanced features:

• Low cost: A PWA costs less to develop than a native app.
• Fast development: if only because we're not subject to the purgatory of app stores for every new release.

Why develop a PWA?

A native application loses, on average, 20% of its users at each step required to download and install the app.

On the other hand, according to statistics, PWAs show better results in terms of conversion, because a PWA can be downloaded directly from the browser, without going through an app store, and behaves like a normal application on your mobile.

A PWA takes advantage of web platform features to deliver an experience similar to an application. For example, you can visit https://whatwebcando.today to find out which capabilities of your browser can be used by any progressive web application.

The components of a PWA

There are 3 essential components that define a PWA:

• 1. App shell: App shell provides a minimum of HTML, JavaScript, and CSS powering your app's user interface. It loads in less than a second. It is stored and served from the cache, when available.
• 2. Web Manifest: This allows you to add your app to the user's home screen. It is added to your page's head tag as
  . The manifest.json file defines all the components of the progressive web application's behavior.
• 3. Service Workers: Service workers can be programmed to intercept every network request and serve a response from the cache, even when the user is offline.

How to transform a Drupal site into a PWA?

As is often the case, "there's a module for that"… and its name isn't very original, it's the PWA module.

WARNING: There is a big difference between simply declaring yourself as a PWA and offering users all the features described above. This module is not a silver bullet, but it is a good starting point.

The main advantage of this module is setting up a Service Worker for caching and offline features. Here is what it enables by default:

• All JS and CSS files will always be served from the cache and refreshed in the background.
• All pages are loaded from the internet (as before) but a copy is kept in the cache so they become available offline.
• Images are cached unless the save-data header is detected, to account for bandwidth usage and cache size. A fallback image should appear for any uncached image.
• The module will also create a manifest.json file editable in the back-office to make the website "installable" on supported mobile devices.

The module meets enough PWA requirements so that the "add to home screen" prompt is automatically triggered when a visitor returns to your website.

Drupal 7

The module is stable.

Drupal 8

The module is still in development, but there are patches to work around certain current limitations.

This feature will very likely soon be part of the core and won't require modules, which perhaps explains the current state of the module for Drupal 8.

You can learn more on the project's issues page.

And now?

This is only the beginning. A "monolithic" CMS like Drupal offers only a few simple opportunities to become a 100% PWA.

True web applications, single page applications (SPAs), and other sites that rely heavily on JavaScript frameworks such as Angular, VueJS, and React are those we most often think of when we talk about PWAs.

But that's not counting the decoupling possibilities offered by Drupal, especially in version 8. Some parts of a site are good candidates for becoming a PWA, such as a user or client area where they can find personalized information, their history, etc.

This is what we will explore in the rest of this series.

To be continued...

• Part 1: PWA and Drupal, General Overview
• Part 2: Decoupling
• Part 3: PWA Example with Drupal 8 and Gatsby

A Progressive Web App (PWA) is a web application that uses modern web features to offer users an experience similar to that of an app (meaning iOS, Android, etc.) by combining the capabilities offered by most modern browsers with the benefits of the mobile experience.