Introduction to PWA

Abhishek Gupta
Jun 21 · 7 min read
Image for post
Image for post

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?

  1. App-like: Feel like a native app to the user with app-style interactions and navigation.
  2. Reliable: Loads instantly and never shows a website to be down, even under uncertain network conditions.
  3. Fast: PWAs load instantly, even in low internet connectivity or no internet.
  4. Engaging: Feel like a natural app on the device.
  5. Higher Reach: Progressive apps require no complicated installations. With only a few taps, users can enjoy the products.
  6. Installable: Easy to install without the hassle of an app store by adding it to the home screen from the browser.
  7. 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.
  8. Cost: The cost of building a PWA is less than that of a mobile application.
  9. Connectivity Independent: Service workers allow apps to work offline or on low-quality networks seamlessly.
  10. Easy discovery: Are identifiable as applications in search engines.
  11. Safe: Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  12. 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

  1. Flipkart observes 3x increased in session time, 40% higher re-engagement, and 70% higher conversions.
  2. Twitter increased pages per session for Twitter by 65% and the number of tweets sent increased by 75%.
  3. Trivago reached 150% growth engagement and a 97% increase in conversion rate.
  4. Tinder loads 7.22 seconds faster, with longer sessions, swipes, and messages.
  5. AliExpress increased pages visited by 100% and time spent per session increased by 74%.
  6. 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

Image for post
Image for post
Explaining how the service worker works in online and offline mode.
  • 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

Image for post
Image for post
SW Lifecycle
//app.js - Your main javascript file
navigator.serviceWorker.register(‘/app/service-worker.js’, {
scope: '/app'
});
//service-worker.js - Service worker file
// Listen for install event, set callback to perform some task after installation
self.addEventListener('install', function(event) {
// Perform some task like caching the file or anything
});
//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"
}
<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

  1. 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.
  2. 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.
  3. 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.


Image for post
Image for post

Aeologic

This publication contains all the major blogs that are on…

Abhishek Gupta

Written by

Team Lead | Full Stack | MEAN Stack | MERN Stack | Laravel | PHP | PWA | Firestore | Certified IoT Developer | IoT Expert | DB Management | Server Management

Aeologic

Aeologic

This publication contains all the major blogs that are on different technologies that are used at Aeologic Technologies.

Abhishek Gupta

Written by

Team Lead | Full Stack | MEAN Stack | MERN Stack | Laravel | PHP | PWA | Firestore | Certified IoT Developer | IoT Expert | DB Management | Server Management

Aeologic

Aeologic

This publication contains all the major blogs that are on different technologies that are used at Aeologic Technologies.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app