Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Add PWA Functionality to Drupal: The PWA Drupal Module

DZone's Guide to

How to Add PWA Functionality to Drupal: The PWA Drupal Module

As it turns out, it's pretty easy! Read to learn more about PWAs, Drupal, and how to make your Drupal site PWA ready.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

With the boundary between desktop and mobile, websites and apps, getting blurrier than ever, you must be wondering:"How can I, too, deliver native-like experiences on my Drupal site?" How can I enhance it with modern web features — push, offline, install — and thus enable it to adopt native apps' behavior on mobile devices? In other words: how can I add progressive web app functionality to Drupal?

And thus make it  accessible to its mobile user and engaging to its desktop users.

1. But First: What Is a Progressive Web App?

After I've "compiled" all the most comprehensive definitions of a PWA and "extracted" the essence, here'sthe answer to the question:

Progressive web apps are native apps' alternatives, that feature modern browser features enabling desktop websites to deliver app-like experiences.

Or, briefly put:

  • PWAs are the easiest way to deliver an app-like experience to your site's users.
  • PWAs enable your website to behave (more) like a native app on mobile.

Clear enough?

Now let me point out to you some of the modern web capabilities that progressive web apps support:

  • Progressive enhancement: they're built to fit any modern browser.
  • Responsiveness.
  • HTTPs security level.
  • Home-screen launch/OS integration: users don't need to go over to an app store and download the app; instead, they can just install their PWAs straight on their home screens.
  • Connectivity independence: due to their service workers, PWAs can work both offline (with total control over catching) and on a poor network connectivity.
  • Low development costs: as compared to native mobile apps.
  • Rapid development process.
  • Push notifications: re-engage your site's users.

In short: progressive web apps “inject” the latest web technologies into your Drupal website, while enabling it to leverage mobile device capabilities.

Have I managed to answer the question: "What is a progressive web app?" And, most of all, the one coming right after: "Why would I want to add progressive web app functionality to Drupal?"

2. What Does a PWA Contain? A Few Words About Its Three Main Components

Now let us delve deep into the details and “deconstruct” a progressive web app just to see what it's made of.

And here are its three key parts:

2.1. The App Shell

The place where all the basic JS, HTML, and CSS needed to “fuel” your app's UI get stored. It gets loaded in no time and is served from the cache.

2.2. The Web App Manifest

The Drupal manifest is a basic JSON file that enables you to:

  • Add your PWA to your users' home screens
  • Control the way your app gets displayed in those sections on your Drupal site where users do expect to see progressive web apps.

In short: the web manifest.json file defines all the components determining they way your progressive web app is going to work.

And this is how it gets added to your web page's head tag:

<link rel="manifest" href = "/manifest.json"> 

2.3. The Service Workers

They're the elements of a PWA that make Drupal offline apps possible.

Specifically, a service worker is a script running in the background of your user's web browser, outside the web page itself, which runs features interdependently from user interaction or the web page (source).

They basically intercept all network requests and are scripted to serve the due responses from the stored cache, even when there's a poor or no network connectivity at all.

3. Adding Progressive Web App Functionality to Drupal: The PWA Module

A Drupal integration goes conveniently smooth whenever, there's a Drupal module for it!

In this case, too, there's a module — the Progressive Web App module for Drupal — that “injects” PWA functionality into your website without:

  1. the need for a deep understanding of the underlying advanced web technologies.
  2. having to add too much complexity to your Drupal site.

Of course, if you're an experienced JS developer, you're free to write your own Service Worker and thus to custom-tune the user experience.

This module's biggest strength? It uses Drupal service worker for offline capabilities and catching.

4. Integration of PWA with Drupal 7

How do you integrate progressive web app functionality into your Drupal site (our Drupal 7 website more precisely)?

You just let the Drupal 7 version of the PWA module take care of it all!

It's built to provide the config form needed to generate the manifest.js file. Then, all you'll need to do is validate it using Chrome's lighthouse plugin.

Easy peasy...

5. Integrating PWA With Drupal 8: Things Get a Bit Trickier

In Drupal 8, integrating this type of functionality isn't as simple as enabling the PWA module for Drupal. And that because this version of Drupal doesn't yet provide a config form functionality that will configure the manifest.js file.

Therefore, adding that file tag in your web page's head doesn't happen by default, like in Drupal 7. There's no manifest file in Drupal 8 core, not yet at least.

But you can still make PWA work on a Drupal 8 website.

Since this “limitation” has been a logged in issue in the Drupal 8 version of the Progressive Web App module for some time now, there's already a patch for it.

Just apply it, then go over to admin/config/system/pwa to configure the due settings.

How to Integrate Progressive Web App Functionality into Drupal: PWA Configuration

6. "Special" Requirements for PWAs

There are, indeed, some specific requirements, restrictions, and standards to consider when you plan to integrate progressive web app functionality into your Drupal site:

  • Responsiveness: the PWA's UI adapts to all form factors.
  • PWAs require HTTPS.
  • Safari PWA support: Safari doesn't yet fully support progressive web app functionality.

7. Tools

As for the tools that shouldn't be missing from your toolbox when you decide to add progressive web app functionality to Drupal:

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
drupal 8 ,web application architecture ,drupal modules and plugins ,web dev ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}