Progressive Web Applications  – Introduction and Journey so far

How simple mobile apps, developed by using common web technologies are improving the way we interact with apps. 

In 2015, when google introduced PWA, it was focused on three fundamental things:-

  • Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging — Feel like a natural app on the device, with immersive user experience.

By 2019, PWAs were widely adopted throughout the industry. Let’s see a few adoptions of PWA’s and how they are making a difference for the companies.

Flipkart — India’s largest company adopted PWA early in 2015. How did they do?

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

So In case of Flipkart, They achieved performance and engagement and reliability. later on Alibaba also adopted PWA in AliExpress and Alibaba app, they also achieved significant improvement in user experience. 

Twitter — In 2017, Twitter also launched Twitter lite (PWA app) and Significantly Increases Engagement and Reduces Data Usage. Some results –

  • 65% increase in pages per session (Fast)
  • 75% increase in Tweets sent (Engaging)
  • 20% decrease in bounce rate (Reliable)

Twitter lite became the most reliable way to use twitter. It is fast, engaging and reliable. 

Many startups like Housing.com, OLA, Voot also adopted PWA’s and result were same — Fast, Engaging and reliable. 

So in the app ecosystem, if you want to achieve these features in your app then PWA is a perfect choice for you.

Components of a PWA

There are many commonly used technologies to create progressive web apps. All PWAs require at minimum a service worker and a manifest.

  1. service worker — service worker is a type of web worker which provides a scriptable network proxy in the browser to manage the HTTP requests programmatically. Means over here you can write your logic to cache API response, images and provide data to browse from the cache in case of network failure or offline experience. It works separately from the main browser thread which helps in push notifications, synchronize data in the background, etc. 

Service worker has their own lifecycle — Registration, Installation, and Activation.

Registration — by registering the Service Worker, you tell the browser where your Service Worker JavaScript file lives. Let’s look at the following code:

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful');
}, function(err) {
// Registration failed
console.log('ServiceWorker registration failed: ', err);
});
});
}

Installation — Installation occurs when there is no service worker installed in the browser for the web app, or if there is an update to the service worker.

Activation — Once activated, the Service Worker will start controlling all pages that fall under its scope.

  • It will handle fetch and message events that occur when a network request or message is made from the page
  • It will be terminated to save memory.

2. manifest — manifest is a JSON file in which the developer put metadata associated with a web application including. Sample manifest file-

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

name 
The title of the app. This is used when prompting the user to install the app. It should be the full title of the app.

short_name 
Is the name of the app as it will appear on the app icon. This should be short and to the point.

lang
The default language the app is localized in. In our case, English.

start_url
Tells the browser which page to load up when the app is launched. This will usually be index.html but it doesn’t need to be.

display
The type of shell the app should appear in. For our app, we are using standalone to make it look and feel like a standard native app. There are other settings to make it full screen or include the browser chrome.

background_color
The color of the splash screen that opens when the app launches.

theme_color
Sets the color of the toolbar and in the task switcher.

The important fact about PWA — 

PWA works only on HTTPS. 

As network requests are routed via a service worker script, adding https to the server helps mitigate certain vulnerabilities. HTTPS allows the user to feel relatively safe.

PWA browser support:

For PWA, the manifest file is required which is supported in the following browsers.

I hope this has helped to get a good understanding of Progressive Web Apps, but if not, please leave a comment

We here at HYR Global Source have a very deep understanding of web development growing process, In the last 5 years, we have worked with various clients and students, and helped them in creating better products and career respectively. 

In HYR Global Source, We have dedicated mentorship programs for students and software professionals to get into the world of web development. If it is something which interests you please connect us here – https://www.hyrglobalsource.com/contact.html

If you already well versed in technology, then we are always looking for bright minds like you, Please check out career page here – https://www.hyrglobalsource.com/careers.html

One Reply to “Progressive Web Applications  – Introduction and Journey so far”

  1. Normally I don’t learn post on blogs, however I would like to say that this write-up very pressured me to check out and do so! Your writing style has been amazed me. Thank you, very great post.

Leave a Reply

Your email address will not be published. Required fields are marked *