Progressive Web Application

Bal Krishn Singh

February 23, 2019

What is Progressive Web Application (PWA)?

PWA are an experience that combines the best of web and the best of apps. PWAs are web applications that load like regular web pages but can offer the user functionality that is traditionally available only to native applications.

Progressive Web Apps also are known as PWAs are the web apps that look and feel just like a native mobile app. It works on any browser whether it be chrome, opera, Safari or Samsung internet browser and the users are not obliged to download from the app store. Just tap on the link and PWA is installed on the user’s phone.

Just like a native mobile app, a PWA is displayed on the homepage, in the app drawer, sends push notifications and integrate into system settings.

PWA Characteristics:

Progressive- Work for every user and on all browsers
Responsive - It can fit into any screen layouts like mobile, tablet and desktop etc.
Connectivity independent -One can rely on Progressive Web Apps even when the network is shoddy as it can even work offline. This is possible through service worker, a type of web worker. Konga, a leading e-commerce website in Nigeria managed to reduce 92% of the user data usage due to its Progressive Web App.
Fresh - One of the most amazing features of PWA is that it is easy to update. Since there is no app store that works as a mediator, your users can enjoy the updated app as soon as you have updated it from your side.
App-like - The user won’t notice any difference between PWA and the native app. It exactly looks and feels like a native app and even provides similar features like push notification, integration with the system, display icon on the home screen and app drawer, etc.
Safe- PWA’s are more secure compared to traditional web apps because they are always served via HTTPS. This ensures that the app can is tamper proof and cannot be vandalized. Served via HTTPS to prevent snooping and ensure content hasn't been tampered with
Discoverable- manifests and service worker registration scope allows search engines to find them.
Re-engageable - Make re-engagement easy
Installable- Allow users to add to home screen
Linkable- Easily shared via a URL and do not require complex installation.

Flipkart Lite - real life example

Approach used to develop Flipkart Lite, a Progressive Web App-

Added service workers for quicker load times
Smooth navigation and scrolling at 60 frames/second
Created an “Add to Home Screen” prompt to encourage users to add the mobile webpage to their home screens

Key insights-

Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds.
3x more time spent on site
40% higher re-engagement rate
70% greater conversion rate among those arriving via Add to Homescreen
3x lower data usage

Key Techniques used to Develop PWA:

Service Workers ( Offline experience)
App Shell Architecture ( Fast loading)
Application Manifest ( Add to homescreen)

Service Worker:

Technically, service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. The service workers lie between the network and device to supply the content. They are capable of using the cache mechanisms efficiently and allow error-free behavior during offline periods.

Caching strategies

Asset Caching

Cache static assets.

Dynamic caching:

stale-while-revalidate strategy
cache only strategy
network first, but fallback on cache strategy
cache first, but fallback on network strategy

How to use Service worker:

The simplest way to get started with service worker is to use Google’s Workbox.

How to register a service worker:

To use service worker you have to first register the service worker. In your project add the below code in your index.html (main file) to register service worker.

Here ‘navigator’ is something that will create a scope for your project in web browser so that a service worker on one website is completely unaware of service worker from all other website.

if ("serviceWorker" in navigator) {
navigator.serviceWorker.register(
"./service-worker.js").then(function() {
            console.log("Service Worker Registered");
   });
 }

Application Shell Architecture:

Minimal HTML, CSS and JS without the dynamic contents
Design approach that works with service workers

Application Manifest:

This tells the browser that the mobile website can be installed as an app.

Add to Home Screen:

Add to Home Screen, sometimes referred to as the web app install prompt, makes it easy for users to install your Progressive Web App on their mobile or desktop device. After the user accepts the prompt, your PWA will be added to their launcher, and it will run like any other installed app.

What are the criteria?

In order for a user to be able to install your Progressive Web App, it needs to meet the following criteria:

The web app is not already installed.
Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
Includes a web app manifest that includes:

short_name
icons must include a 192px and a 512px sized icons
start_url
display must be one of: fullscreen, standalone, or minimal-ui

Served over HTTPS (required for service workers)
Has registered a service worker with a fetch event handler

How to include manifest in your project:

To use manifest you have to include it into your project. In your project add the below html code in your index.html (main file) to include manifest.

<link rel="manifest" href="/manifest.json">

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. You can run Lighthouse in Chrome DevTools.

Demo: Flipkart Lite

PWA Websites for example-

The best and most popular Progressive Web Apps at the moment.

PWA in the real world against web and native apps:

Following companies and many more have received positive results in business using PWA.

Twitter:

75% increase in tweets
Reduced data usage by as much as 70%

Alibaba:

76% rise in conversions
Four times higher interaction rate.

MakeMyTrip:

conversion rate triple
160% increase in shopper sessions

The Weather Channel:

80% faster loading

Forbes:

100% increase in session duration
43% more sessions per user.

Challenges for PWA:

Browser Support:

Though PWA’s work flawlessly on most of the popular browsers such as Chrome, Opera and Samsung Internet but until 2018, it was unsupported in browsers like Safari. As of now, Safari does not support some of PWA features.

Device Support:

PWAs work flawlessly on most of the android devices but it is still unsupported with iOS devices. However, acknowledging the potential and popularity of PWAs, Now in 2018, Apple is supporting some of the PWA technology on iOS.

Hardware Functionality:

There is a list of hardware functionalities that are still unsupported with PWAs. But with the passing time, many hardware functionalities have been made available just like a native app.

PWA vs Native App:

Many people compare PWA with Native apps. For some of the readers this article is incomplete without the comparison between two technologies.

We use our mobile devices a lot and a large amount of that time is spent on apps. However, the remainder of that time is spent browsing and searching the web from the mobile device. PWAs aim to capitalize on this time by using the power of an app with the immediate accessibility of visiting a website. Here we will look at the advantages and disadvantage that PWA have over native apps in Feb, 2019.

Native apps have to be built for each platform separately to accommodate the ‘native’ programming language of that platform, whereas PWA are universal, which saves development time and costs. They don’t require the hassle of requiring an app marketplace (App Store, Google Play, etc.) to access.
A user can experience the app-like experience of a PWA with just the click of a link and never need to worry about updating that experience with new versions.
Despite all the benefits that PWAs, there are also certain drawback. The primary drawback of PWAs is its performance. Native apps can perform better and faster, more in-depth features because they are loaded directly into your device.
You can’t do many thing using PWA that you can do using a Native app. PWA can’t access Bluetooth and other hardware functionalities of device, as a Native app can do. PWA don’t have access to User Contacts and SMS on any devices.
Apple devices doesn’t support many features of PWA on Safari and iOS platform including Push Notification.

Conclusion:

The advantages of PWAs mirror the disadvantages of native apps. PWA’s are not here to replace Native apps. I think both the technologies can coexist in this large and ever evolving world. PWA provide alternative way to use same application on any Mobile that also work on Tablet, Laptop and Desktop, irrespective of their platforms. The ultimate choice will come down to use-cases and business priorities of the app. PWA’s use cases need to be considered very carefully. If you have very less time and budget and want to cover more users and your requirements demands offline and app like user experience with limited hardware functionality then PWA can be a good option for you.

References

PWA:

Case Study:

https://developers.google.com/web/showcase/2016/flipkart

Demo: you can access below websites from mobile web:

Others: you can find more PWA on below links: