Progressive Web Apps (PWA) Explained

If you are a web development geek like us here at GeekyMinds, you must have heard the term PWA a lot. PWA stands for Progressive Web App. Why are Progressive Web Apps so important for the web developers and what’s in it for the common user? Let’s find out!

Introduction

Back in the early 2000s with the advent of Web 2.0, the world started moving to web applications. It enabled users to interact with the website rather than just enjoy the static content in it.

Progressive Web Apps are the next generation of web technologies and they set themselves apart from web applications by behaving more like a native app. For example, just like native apps, Progressive Web Apps:

  • Can be installed on your device (PC or Mobile)
  • Load faster and can be used online or offline
  • Can push notifications to your device.

Related: Let’s Compare: Websites & Web Applications

Comparison between Flipkart native app and its progressive counterpart
The above screenshot shows Flipkart’s native app and Flipkart Lite PWA installed side by side

The Benefits of Progressive Web Apps

Being able to let the customers/users of your web application install it on their smartphone without you having to build a native app sounds cool, right?

Unlike native applications, Progressive Web Apps are lightweight as they consume fewer resources to run on a device. Not only do they consume lower storage space, but they also consume less memory and they are updated automatically, eliminating the need of the user to update the app from the store.

Progressive Web Apps are cross-platform and will work everywhere, regardless of whether your users are on a Surface Book, Android phone, iPad, or Xbox One. All of the major browsers now support the Service Worker API that enables PWAs to look and feel like native apps.

How Do Progressive Web Apps Work?

Progressive Web Apps require three prerequisites:

  1. Served over HTTPS
  2. A Service Worker module
  3. A Web App Manifest

Related: HTTP, HTTPS and SSL Explained

Service Worker

The Service Worker is a JavaScript file responsible for three things –

  1. Cache the crucial resources (HTML, CSS and JS files) of your website on the client device so that your website launches even when the client device is offline. This is how your site works offline like any other native app.
  2. Enables your web app to push notifications on the client device.
  3. Handles network requests. As the service worker intercepts network requests and modifies responses, it requires to run over HTTPS in order to prevent “man-in-the-middle“ attacks.

Web App Manifest

The Web App Manifest is a JavaScript Object Notation (JSON) file and is required to be present in order for a supported browser to show the “Add to Home Screen” prompt like in the screenshot below.

GeekyMinds PWA Add To Homescreen Prompt

The Web App Manifest stores information about the app’s behavioural properties like:

  1. The app’s name when installing on the device.
  2. The app’s icon, splash screen icon and colours.
  3. The page to use as a start page for the app.
  4. The app’s default orientation (portrait, landscape or device orientation).
  5. The app’s display mode which decides what browser user interface is shown when your app is launched. More information here.

Related: What is JavaScript Object Notation (JSON)?

Examples of Progressive Web Apps

As mentioned above, if the web application manifest is present, a supported browser like Google Chrome will show an option to add the app to the home screen.

Installing A PWA on Mobile

GeekyMinds is a PWA, which means you can install it on mobile (iOS or Android), desktop, etc. To see it in action, if you are using Google Chrome, open the three-dot menu. Tap on “Add to Home screen” option as shown in the photo below.

Installing A PWA on Desktop

You can also install Progressive Web Apps on your desktop! From your PC, fire up Google Chrome and visit Starbucks.

Next, open the three-dot menu and you’ll find “Install Starbucks” option. Just click on “Allow” and Chrome will add a shortcut of the app on your desktop. You can also install GeekyMinds on your desktop in the same way.

Uninstalling a PWA

Uninstalling Progressive Web Apps are straightforward. You can uninstall a PWA from your smartphone the same way as for a native app from the store.

In a PC, you can uninstall it by selecting the uninstall option from the three-dot menu as shown in the screenshot below.

Starbucks Progressive Web App
Uninstallation of a PWA

More Examples

Progressive Web Apps are gaining popularity and already many live examples can be found online. Here are a few examples we accumulated for you:

All Platforms –

Desktop –