CMS

Progressive Web App (PWA) integration with Drupal 8

Have you ever wondered about “How can I deliver native-like experiences on Drupal site?”  and achieve modern web features such as offline, push notifications. Yes, we can achieve this by PWA.

What is PWA?

A Progressive Web App (PWA) is a web application that utilizes modern web capabilities to deliver a native-app 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 advancements and outfit devices capabilities.

Going through history, in 2015 the term PWA (Progressive Web App) popped up and it is utilized to depict up stacking advantage of new features supported by modern browsers. Features like web app manifest, service workers redesigns web apps to be amazing applications regardless of their operating system browser and devices. They represent a way to build a better website.

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 like a normal app on your mobile.

PWA gets benefits from the web platform features to provides an app-like experience.

We do not need any installation for PWA. User experience continues to improve each time a user visits site integrated with PWA because of its powerful features such as push notifications, load-time for slow networks and add to home screen icon.

Key features of powerful PWA:

  1. Reliable: Loads instantly and never show the dinosaur even in ambiguous network conditions.
  2. Fast: Responds quickly to user interactions with smooth animations and no kinky scrolling.
  3. Engaging: Feel like an ordinary app on the device, with immersive user experience.
  4. Secure: Site must be served over HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  5. Service worker: A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features which don’t need a web page or user interaction.
  6. Web app manifest: The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in areas where they would expect to see apps.

 

Integrating Progressive web app (PWA) with Drupal 

  We can develop PWA by using front end frameworks like Angular, React, etc. We can’t integrate this functionality directly just by enabling the PWA module this problem is because this version of Drupal doesn’t yet provide configuration 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. By customizing service workers we can experience more features of PWA. Service worker and manifest.json will help in building app-like experience in mobile devices by providing an option like ‘add to home screen’ whenever a user visits your site.

Steps for integration

  • Install module (PWA)

     You can install this by downloading and enabling the PWA module, after enabling the module in admin toolbar navigate to the configuration  -> system -> PWA settings and fill the given fields with your required values

  • Service workers

        Service Worker is a javascript file that will cache all the pages. If a user is viewing the site and the internet connection is lost, the pages will automatically load by intercepting every network request and serve the response from the cache.

Drupal PWA module will provide basic functionality to work your site when you are offline. By customizing that javascript file, we can achieve additional functionalities like ‘push notifications’ and many more.

  • The web app manifest

     Drupal manifest file is a JSON file that allows you to add your PWA to users ‘home screen’ and it contains the configuration like what is your site name, how it should display, theme color, the logo of the site, etc.

This is how the manifest.json file will look like

Below line of code should be added in your head tag of index.html. 

Result: 

Add to home screen option.
An icon will be created in home screen giving you an app-like experience

Conclusion:

By integrating Progressive Web App (PWA) with Drupal 8, you can enable your site to support native apps behavior on mobile devices and you can achieve offline feature for your site.

About The Author