Progressive Web App (PWA) integration with Drupal

Parent Feed: 

Every digital business owner strives to provide the most engaging experiences both for desktop and mobile users. They might want to build a mobile app. However, the task of great web development companies is to offer alternatives to every idea.

One of these interesting choices here is a progressive web app (PWA). Read on to learn more about PWAs, what they are, what makes them beneficial, as well as progressive web apps and Drupal integration.

What is a progressive web app (PWA)?

A progressive web application is a web application that loads like a usual website but delivers modern experiences similar to those in native apps. They include push notifications, offline work, device hardware access, etc. PWAs unite the features provided by modern browsers and the pros of mobile experiences.

Progressive web app example

Why use PWA? The PWA benefits

  • By integrating a PWA into your Drupal website, you enrich the latter with cool technologies and provide app-like experiences. This can boost your business significantly. Let’s go into more details and list some of the PWA benefits:
  • The cost of developing a PWA is lower than with native applications.
  • A progressive web app is also faster to build than a native app.
  • PWAs work for all users regardless of their browsers thanks to the progressive enhancement approach.
  • Progressive web apps can be easily added by users to the homescreen with no need to go to an app store.
  • They are responsive so they deliver smooth experiences across desktop, tablet, and mobile devices.
  • Features like push notifications are huge attention catchers able to significantly increase your user engagement.
  • PWA can work offline or on slow networks and load fast thanks to the use of service worker scripts, which improves user experiences and expands your reach.
  • PWA is secure thanks to the use of HTTPS that prevents data manipulations.

What’s inside? The PWA components

Every progressive web application has three key components:

  1. The app shell stores the basic JavaScript, CSS, and HTML needed for your application UI and quickly serves it from the cache.
  2. The service workers are JavaScript files that run on the background of browsers and serve the response from the cache to offline users, and can be scripted to provide push notifications, etc.
  3. The web manifest is a manifest.json file that holds your app configuration (name, look, color, logos, etc.) and allows your users to add the app to their home screen.

How to add PWA functionality to Drupal

There is a module for everything in Drupal. The integration of a progressive web application with Drupal is no exception. This integration can be provided with the Progressive Web App Drupal module.

The Progressive Web App module in Drupal

The Progressive Web App Drupal module injects the PWA features into your Drupal site without any complexities. It creates the standard setup, and JS developers are able to additionally write service worker scripts to further customize the app-like behavior of the PWA.

Here are some of the module’s features for the smooth Drupal and PWA integration:

  • The module has a service worker that takes care of caching and offline work. When active, the service worker makes the pages load faster. It provides the serving of pages from the cache. Among the additional tweaks, there are fallback images showing for uncached images.
  • The Drupal module creates a configurable manifest.json file with all the needed metadata. It allows the "add to home screen" prompt in eligible browsers.
  • Site admins are able to configure the manifest from the Drupal UI.
  • Other modules on the Drupal website can add their modifications to the manifest.

The module’s configuration page is found at admin/config/pwa/settings where you can fill in the necessary data in the manifest or change the provided defaults (your app name, description, default language, start URL, theme and background color, and much more). This page also includes the settings for your PWA’s service worker that out-of-box deals with caching.

Progressive Web App module in Drupal

Progressive Web App module in Drupal

Progressive Web App module in Drupal

System requirements for the Progressive Web App module

In order to use this PWA integration module, you will need to fulfil these two key technical requirements:

The PHP version on your server should be 7.2 or higher. The module creators plan to further raise this minimum PHP requirement in line with the upcoming PHP updates.

Your server has to support secure connections using HTTPS. This is required by the W3 specification.

Let our team help you with progressive web app and Drupal integration

If you are interested in a fast, engaging, and secure PWA for your Drupal site, our Drupal development team is ready to assist you.

We will perform the smooth integration and configure your PWA to behave in accordance with all your requirements, including the creation of custom service worker scripts. In addition, we will take care of the technical requirements for the integration (update your PHP and switch your site to HTTPS if it hasn’t yet).

Let’s discuss the details of your successful progressive web app and Drupal integration. Try a progressive web app and may it help your business progress!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web