What are Progressive Web Apps (PWAs)?

If you are a tech geek like us here at GeekyMinds, you must have heard the term PWA a lot throughout the past year. It’s the latest buzzword in the web development industry and it seems like everyone is talking about it. Why is it so important for the web developers of today and what’s in it for the common user?

Say Hi to Progressive Web Apps

Back in the early 2000’s 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. PWAs 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:

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

As a developer, why should I care?

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 applications are lightweight as they consume less resources to run on a device. Not only do they consume lower storage space, they consume less memory and they are updated automatically, reducing the need of the user to update the app from the store.

PWAs 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.

The Technical Side of PWAs

Progressive Web Applications require three prerequisites:

  1. Your website needs to be running on HTTPS
  2. A Service Worker module
  3. A Web App Manifest

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.

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. It stores information about the app’s behavioral properties like –

  1. The app’s name when installed on the device.
  2. The app’s icon, splash screen icon and colors.
  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.

Enough theory. Let’s See It In Action.

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.

To see it in action, visit Flipkart Lite from Google Chrome on your smartphone and open the three-dot menu. Tap on “Add to Home screen” option as shown in the photo below.

Installing a PWA

You can also install a PWA on your PC. We will not be able to use Flipkart as only the mobile version, that is Flipkart Lite, is a PWA. From your PC, fire up Google Chrome and visit Starbucks. 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.

The above screenshot shows Flipkart’s native app and Flipkart Lite PWA installed side by side

Uninstalling these apps are also 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.

Uninstallation of a PWA

That was awesome! What other PWAs can I try right now?

Progressive Web Apps are gaining popularity and only few live examples can be found online. While PWAs are cross-platform, some examples below use PWA for only mobile platforms. Here are a few examples we accumulated for you:

Windows 10 –

  1. Google Photos
  2. Android Messages
  3. Telegram
  4. Twitter (Microsoft Store)

Android –

  1. Myntra
  2. Twitter
  3. Google+
  4. GeekyMinds