With users expecting reliable, fast and engaging experiences from apps they use, even a short lapse in loading time is convincing enough to move onto its next available alternative.
An app loses 20% of its users for every step between the user’s first interaction until the user starts to use the app.
Nowadays, Progressive Web Apps are offering higher customer engagement bringing better mobile experience, thus offering better business financial gains than the native apps. Drupal proves to be a great platform for creating PWAs. Let’s understand the what and why of PWAs and how native-app like experience can be delivered on your Drupal site.
What are PWAs?
Progressive Web Apps combine the best of the worlds of mobile and web functionality. With application-like interface, PWAs offer the same engaging experience of a native app, but with the convenience of a web browser.
PWAs are quick, don’t need to be installed and once added to a smartphone home screen, they continue to upgrade silently in the background. It would not be wrong to say that they are web pages which ‘live’ on a user’s home screen.
.png)
Unlike an app, a user doesn’t necessarily need to find, download and install a PWA. They can immediately start using a PWA upon finding it.
Here’s a quick round up of its amazing features:
- Device independent: They can work on any device, taking advantage of existing features available on the device and browser.
- Responsive: PWAs are responsive and fit the device screen size.
- Appearance: A PWA looks exactly like a native app, and is built on the application shell model, with minimal page refreshes.
- Instantly Available: A PWA can be installed on the home screen, making it readily available.
- Secure: Because PWAs reside on a user’s home screen, they are made to be extremely safe by hosting over HTTPS to prevent man-in-the-middle attacks.
You can take a feel of PWA yourself by navigating to mobile.twitter.com and access the fast and responsive PWA of Twitter, which has the capability to work even offline.
How Does PWAs Benefit?
Native apps have been useful for eCommerce conversion as they are known to perform 20% better than websites. However, they are costly to create and are a risky investment as they need to be found in an app store, downloaded, installed and then used.
Here’s a typical consumer app funnel for native apps:
This graph clearly shows there’s a 10–30% dropoff in every step starting from finding the app in the app store to sharing it in the network.
Gartner predicts that progressive web apps will replace 50% of general-purpose, consumer-facing mobile applications by 2020.
PWAs have an edge over native apps in terms of boosting user retention as a user prefers easy to use less data consuming app with improved performance and usability, rather than its website. As per Google Developers, the conversion rates for AliExpress and Safari increased by 104% and 82%, respectively, upon using PWAs.
Housing.com opted for PWA to increase their average page-load time to bring a significant boost in the conversion rate. Also, poor connectivity and the prevalence of low-end devices was hindering its growth.
The development team of Housing.com then built a PWA called Housing Go, which helped a 38% increase in total conversions, with visitors spending 10% longer on the site, many of them returning often.
But should every web app be a Progressive Web App? And if yes, even a native app functions similarly. Then what’s so unique about PWAs?
To decide whether to go for PWA or not, it is important to identify your customer base and their action trends. The needs should be analysed before opting for PWA, such as cross browser support, most often used functionality which needs to be facilitated in offline mode.
How Do PWAs Work?
Developers can create this functionality with the help of Service Worker and Web App Manifest specification.
Source: Bluechili.com
The 3 components of a PWA are:
App Shell: App shell is stored and served from the cache and provides HTML, javascript and CSS to power your application UI.
Service Worker stores the resources in the browser cache when the page loads for the first time. It returns the response to the user post checking the cache when the user visits the app next time. A component of JavaScript code, it manages push notifications and helps build a web application which can work offline.
Web Manifest is a config JSON file which has the metadata of the icon for the installed app, related background color, and theme of the site when downloaded.
Adding Progressive Web App Functionality To Drupal Through React
For Drupal 7 websites, the functionality can be implement by simply enabling the Progressive Web App module. For Drupal 8, one needs to customize service workers apps and apply an easy patch (check the issue). Once done, then go to admin/config/system/pwa and configure the settings. This will implement the 'Add to homescreen' functionality to your website as shown below:
Add to home screen option available on the website
Though PWA can be developed with front end frameworks like Angular, React, etc., we at Srijan make it possible by creating custom blocks using Drupal 8 Block API. This can be done by embedding React JS application file in its library file.
This way, we place our react block on required space on the same Drupal page, so the entire page doesn’t have to be React or Drupal only.
The advantage of using this approach is that it doesn’t unnecessarily increase the load of the application, and makes it load quickly and smoothly. Also, it doesn’t hamper SEO rankings.
We help ambitious enterprises modernize their web experience and build digital solutions. Contact us today to explore the possibilities and get the conversation started.
