Introduction to PWA

Published in

Aeologic

7 min readJun 21, 2020

A Progressive Web App is a website that functions just like a native app. It has all the functionality of a native app and still manages to deliver the usability of a website. It's a web app that provides app-like experience to the users without installing the app from the play store, apple store, or anywhere else. PWA has some great features to support offline experiences, background synchronization, and push notifications. This opens the door to functionality that previously required using a native application.

The term Progressive Web Apps was first coined by Frances Berriman and Alex Russell in 2015. They described applications that take advantage of new features supported by modern browsers, including service workers and web app manifests, and also let users upgrade web apps to progressive web applications regardless of their native operating system.

Why PWA?

So everyone has a question why PWA? Do we really need to convert our web app to PWA? or it's all just a hype and noise?

The answer is no, it’s not just a hype. The advantage and features of PWA are massive that is why in today's world PWA is gaining popularity and users are adopting it.

Following are the key features and characteristics of PWA:

Progressive: It works on any browser.
App-like: Feel like a native app to the user with app-style interactions and navigation.
Reliable: Loads instantly and never shows a website to be down, even under uncertain network conditions.
Fast: PWAs load instantly, even in low internet connectivity or no internet.
Engaging: Feel like a natural app on the device.
Higher Reach: Progressive apps require no complicated installations. With only a few taps, users can enjoy the products.
Installable: Easy to install without the hassle of an app store by adding it to the home screen from the browser.
Up-to-date: They use a service worker update process to update the app in the background every time we have a new version of the app.
Cost: The cost of building a PWA is less than that of a mobile application.
Connectivity Independent: Service workers allow apps to work offline or on low-quality networks seamlessly.
Easy discovery: Are identifiable as applications in search engines.
Safe: Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Responsive: Fit any form like a desktop, mobile, tablet, or any.

How are PWAs different from Mobile Apps?

The main difference between PWAs and Mobile Apps is all mobile apps must be downloaded from any app store whereas PWAs are just web pages that can be installed from the browser by just adding the app to the screen. PWAs deliver an app-like experience, except users don’t need to download them. Many companies are using a PWA in place of a mobile app.

PWA case studies

Flipkart observes 3x increased in session time, 40% higher re-engagement, and 70% higher conversions.
Twitter increased pages per session for Twitter by 65% and the number of tweets sent increased by 75%.
Trivago reached 150% growth engagement and a 97% increase in conversion rate.
Tinder loads 7.22 seconds faster, with longer sessions, swipes, and messages.
AliExpress increased pages visited by 100% and time spent per session increased by 74%.
OLX lowered their bounce rates by 80%.

Technical components of a PWA.

PWA is characterized by a Service Worker file, a Web App Manifest, HTTPS.

1. Service workers

Explaining how the service worker works in online and offline mode.

Service workers are scripts that run in the background of your application. It is a programmable proxy that lives client-side and sits between your browser and the rest of the Internet. Service workers are installed on the device from which the website is accessed and they allow you to control how network requests from your page are handled.

Service workers facilitate its offline capability, push notifications, and resource caching.
Service workers only run on a secure network over HTTPS. Because service workers can intercept network requests and modify responses and anyone can easily manipulate the response and request of your web page.
Service workers remain idle when it's not in use and instantly get active when needed.

What a service worker can do?

It enables the application to control the network requests, it caches all the request to provide offline access and also to improve the performance by providing the files from the cache if available instead of getting it from the network again.
Service workers depend on two APIs Fetch ( Getting the files from the network ) and Cache ( Getting the file from the persistent content storage ) to make an app work in offline mode and in the low network also.
Caching resources will make the content load faster under most network conditions.

Service worker lifecycle

1. Registration
In order to install a service worker, we need to register the service worker first in our main javascript file. In this registration process, it will tell the browser about the location of the service worker file in the application directory and to start installing the app in the background.

//app.js - Your main javascript file
navigator.serviceWorker.register(‘/app/service-worker.js’, {
 scope: '/app'
});

2. Installation
After the registration process is done by the service worker it checks for the installation. It will install the service worker in your browser only if the browser finds a new service worker that is not installed previously by the browser. Also, it considers when there is a difference between the new service worker and the previously installed one.
We can include an install event listener in the service worker to perform some task when the service worker installs.

//service-worker.js - Service worker file
// Listen for install event, set callback to perform some task after installationself.addEventListener('install', function(event) {
    // Perform some task like caching the file or anything
});

3. Activation
Once the service worker gets installed properly, it moved into the activation stage. In case if there is an open page that is using the previous service worker it stays in the waiting state. The new service worker will only be activated when there is no page still using the old service worker because at a time only one version of service worker can run at a given time.

//service-worker.js - Service worker fileself.addEventListener('activate', function(event) {
 // Perform some task like cleaning up outdated caches
});

2. Web app manifest

A manifest is a JSON file associated with your application which controls what the user sees when launching from the home screen. Which includes splash screen, theme color, app name, and URL that has opened, standalone, or fullscreen option.
Web app manifests for PWAs have the following properties:

//file name: manifest.webmanifest{
   "short_name": "App Name",
   "name": "App Name",
   "icons": [
               {
                 "src": "favicon.ico",
                 "sizes": "192x192",
                 "type": "image/png"
               },
               {
                 "src": "android-chrome-512x512.png",
                 "sizes": "512x512",
                 "type": "image/png"
               }
            ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#1976d2",
  "background_color": "#fafafa"
}

To link the web manifest file add the below link in the head of your files.

<link rel="manifest" href="manifest.webmanifest">

3. HTTPS

It’s very important that Progressive Web application must be served over a secure network. That’s why it’s a requirement for an application to be served with HTTPS so it can be considered a Progressive Web App.
Most of the features related to a PWA such as geolocation and even service workers are available only when the app has been loaded using a secure network.

Some advance features of PWA

Push notifications: Push Notifications is a way of allowing users to get timely updates from the sites and also allow you to effectively re-engage them. They work with service workers because of the background usage of service workers.
PRPL
a. Push (or preload) the most important resources.
b. Render the initial route as soon as possible.
c. Pre-cache remaining assets.
d. Lazy load other routes and non-critical assets.
Web storage: PWA supports offline support and for offline support to work, some sort of data persistence is needed. This is where Web Storage comes in. When a user temporarily loses internet connectivity. In order to make the PWA still usable in offline mode, web storage can be used to display already saved data when needed.
Web storage comes with various Web Storage APIs such as Local Storage, Session Storage, and IndexedDB.

Summary

In this blog, we have explored PWA, its advantages, features, and why it is gaining popularity, and PWA help to provide a better experience for users who access the internet through their mobile devices. I explained service worker, Web manifest, HTTPs which are the key components of PWA. Hopefully, this blog can help you to get a basic idea about PWA.

Creating a PWA

I will cover creating your own PWA including setting up service workers, web manifest JSON file, offline access gets new version update notification, and more in the next blog post using Angular. So stay tuned and follow my account so that you can catch all the new posts when it’s live.

Feel free to connect with us read more articles from Aeologic.com.

Aeologic Technologies is a dynamic, solution and value driven technology company. We position ourselves as a new generation cutting edge technology company. We work creatively to enable businesses with leading technologies and solutions. You can connect with us on Facebook, Twitter, and LinkedIn for any queries.