Deconstructing PWA — A detailed guide to Google’s bet for the future of Web Applications
What is PWA?
PWA or Progressive app is an extension of modern web applications with some of the native mobile capabilities and app-like experience.
When we open a PWA enabled website, after some moments of activity ( 10–20 seconds ) on the website, it shows an automated browser driven notification to add the shortcut of the web application to the home screen.
When clicked on the same an alert is shown as below —
Now if added then a shortcut of the website will be created in your home screen just like other apps.
So the application becomes more accessible now onwards, as it is there on the home screen and doesn’t need to be opened by browsing through Chrome or other browsers.
Also when opened by clicking on the app shortcut icon it provides a standalone application like interface without the address bar or other icons in a browser. Along with that, it can be accessed offline as well (if configured at the application premises) and it will be capable of receiving push notifications.
Features of PWA
- Progressive — As most of the modern browsers are built with progressive enhancement as a core tenet, PWA Works for every user, regardless of browser choice.
- Responsive — The application is both platform and viewport agnostic, so it fits mobile, desktop, wearables and whatever comes next.
- Connectivity independent — Enhanced with service workers to work offline or on low-quality networks.
- App-like — Can be made as smooth and responsive as a native application.
- Safe — Served via HTTPS to ensure security and non-tampered data delivery.
- Re-engageable — Make re-engagement easy through features like push notifications.
- Installable — Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
- Linkable — It can be easily shared across using links and hassle-free installation method.
- Less-Storage — As it’s mostly rendered on browser engine so it doesn’t need any more than the programs and the frontend code in the package ( unlike the native apps ) so it takes very minimal space in your device.
Who are using
Some of the great examples of PWAs are —
Some Statistics
Lately, there has been a tremendous tech-shift in large scale products, like the application frontend moving towards more view oriented scalable frameworks like React, Vue, etc, Services moving to Serverless Architecture and so on. But one thing is common for all of these applications, that is they all have implemented or implementing PWA to reach more audiences.
Examples:
Trivago’s PWA-evolved website is now available in 33 languages, across 55 countries. Uptake of the new functionality has been impressive, with more than half a million people adding the trivago site to their homescreen. Engagement for users who add to homescreen has increased by 150%, from an average of just 0.8 repeat visits for users of the old mobile site, to two visits for users of the PWA.
- The next billion users: trivago embrace progressive web apps as the future of mobileBookMyShow is India’s largest ticketing firm, with 50+ million monthly visitors. They developed an improved version of their mobile website using a Progressive Web App (PWA), delivering an 80+% increase in conversions, which means more users purchasing tickets.
- BookMyShow’s new Progressive Web App drives an 80% increase in conversions
I have just listed down two of them, there are more.
You can check all the apps that have done the PWA transition in PWAStats which features a community-driven list of stats and news related to Progressive Web Apps.
Should you move to PWA?
There is no straight forward answer to this as of now, as it totally depends on the kind of product or web app that one is building. There has been a shift towards PWA for sure but a large number of products are still running well without PWA.
Having said that, it’s good to have PWA as it provides an opportunity to reach more audience, definitely increases user engagement and ensures re-engagement.
Things you need to create a PWA
The mandatory things to create a PWA are SSL certificate on Website, A Manifest Configuration, and a Service Worker. Let’s dive into the details about them,
SSL Certificate
A web application must have https enabled in order to become a progressive web application. While it was once reserved primarily for passwords and other sensitive data, the entire web is gradually leaving HTTP behind and switching to HTTPS. The “S” in HTTPS stands for “Secure”. It’s the secure version of the standard “hypertext transfer protocol” your web browser uses when communicating with websites.
You can create a free SSL certificate here —
Manifest File
Manifest is a JSON configuration file that resides in the web application. This file assures how the web app should behave when it is installed on a mobile device or desktop.
Configurations in Manifest File
name — the name of the application
short_name — the name that will be shown along with the installed application icon in the device home screen
icons — the icons that will be used to create the shortcut for the installation
start_url — this route will be displayed when the app is opened
background_color — This will be the background color of the splash screen
You can find a detailed description of the manifest configuration here.
You can create a Manifest file here —
Service Worker
A service worker is basically a script that runs in the browser when any web application is rendered in-browser engine. This script is autonomous and independent from any kind of user interaction and it runs even when the browser isn’t open. It doesn’t have DOM access and runs in a completely different thread than the view engine.
Service worker helps a web application to specify it’s caching mechanism (i.e. which static files will be saved in the browser cache), Offline mode configuration ( i.e. pages that are available or can be served without internet), Push Notifications, Background sync process, etc.
More features like periodic sync, geofencing are in development for Service workers.
The Design
The moto of the progressive web app is to provide a native-like rich experience through web applications. So it’s very important that the design of the website has a responsive app-like interface.
Example —
Steps to create a PWA from a Web Application
In this guide, I am considering that you already have a web application
Step 1: Make sure your website has SSL enabled ( i.e. there’s an https version of your site available and any non-https traffic is being redirected to https )
Step 2: Now create a static Manifest file named service-worker.js on your application directory like below —
Here in this manifest file, I have added some of the event listeners that I need for my application, such as —
install — this event is triggered when someone app to the home screen.
fetch — Here I am adding some of the static resources in the cache so that after the first resource fetching it will be cached and will not be fetched again and it will be available offline.
More configuration —
Include the service worker file in your Html File like this —
<script>if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(function() {console.log("Service Worker Registered");});}</script>
Step 3: Add a manifest file in your application like —
And add that to the website as —
<link rel="manifest" href="/manifest.json">Step 4: Add a Non-Javascript content in your markup which will be shown when Javascript is disabled at client browser otherwise the audit will fail and give the following error —
A sample non-js feedback would be —
<noscript>This website requires JavaScript. </noscript>Step 5: Add a theme-color meta configuration on the HTML file which will add the background color of the navigation bar in mobile devices according to your app theme —
<meta name="theme-color" content="#5f5eaa">Step 6: Now test your website by using Chrome’s Lighthouse Audit tool.
To open it you can open the website in the Chrome browser, then open the Developer Options > Audit.
Now select the options as below and click on Run audits.
It will take some time to process the application and then it will provide a report like below —
Generating an app build from the PWA to publish to Play store
If you already have a PWA then congratulations, the force is with you already.
Now you can go to the below website and enter the URL of your website —
After submitting your website, you will see something like this —
Then click on Build My PWA at the top right corner and it will show all the available options —
Clicking on Android gives two options you can select either of them and download. Then extract it and open the directory using Android studio and build the application.
That’s all, you got your app package for your PWA application.
Now you can publish that package in the Play store.
Why Fasal is shifting to WPA
Recently, we have reduced the app size by 50% which resulted in more installs and optimized app performance. But we aren’t stopping there, we are going one step ahead and implementing Progressive Web App Support as well. So that, not only Fasal is accessible through the PWA, also it could serve as a bridge between slower network connections and efficient caching for a faster, richer and smoother offline experience.
