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 to add progressive web app functionality to Drupal?
And thus make it:
- ideally accessible to its mobile users
- conveniently engaging to its desktop users
Well, just keep on reading to find out:
1. But First: What Is Progressive Web App?
After I've "compiled" all the most comprehensive definitions of a PWA and "extracted" the essence, here I am now with a possible answer to your 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 needed 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 your 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 3 Main Components
Now let us delve deep into details and “deconstruct” a progressive web app just to see what it's made of.
And here are its 3 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.
They basically intercept all network requests and are scripted to serve the due responses from the stored cache. And that even when there's a poor or no network connectivity at all.
3. Add 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:
- the need for a deep understanding of the underlying advanced web technologies
- 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's app-like 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? Your 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 config form functionality that would 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 just yet.
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.
6. "Special" Requirements for PWA
For 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. ... And Needed Tools
As for the tools that shouldn't miss from your toolbox when you decide to add progressive web app functionality to Drupal, they're:
- Dev tools: https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers
- Lighthouse: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en
The END! And this is how you do it: how you inject PWA-specific capabilities into your Drupal website.