Introduction to Progressive Web Apps - Part 1

by Parth Mehta on the 12th of June 2017

Progressive Web Apps (or PWAs for short) isn’t a technology, but a terminology which describes a rich website in a way of quality and ability to progress as an application to user’s device.

The biggest disadvantage of web apps over native apps is the internet connection. While apps can be configured or written in away that they work even offline, web apps generally tend to remain non-functional without a reliable network connection.

ux-requirementsUsers have come to expect certain experiences from apps they use. They need them to be reliable, fast and engaging. Even a relative shortcoming on one or more these is enough to stop users from coming back and using your apps.

Introduction

Progressive web apps are not a new thing. Mobile browsers have had the ability to bookmark a website to your phone’s home screen since 2011 (2013 on Chrome) with meta tags in the head determining the appearance of the installed web page. For example, Financial Times has been using a web app for content delivery on mobile devices since 2012.

Web apps truly achieve “build once, deploy anywhere.

Anyone can add a website to the home screen but the browser won’t prompt you to do so and you have to do it manually using a button inside the menu. But, with PWAs, the idea is that web apps have to progress to the home screen as native apps do. Almost no one cares that they will lose the URL bar when using it. This isn’t bad, this is what mobile devices are about.

Progressive web apps isn’t a Google only thing.

Although Google is unarguably the biggest proponent of progressive web apps, it isn’t a Google only thing. Google wants these web apps to be great, which is why NOT every web app can progress to the Home Screen. This adds new meaning to PWAs, a modern meaning which wasn’t available with previous attempts to introduce PWAs, and this is the right way to go.

Why Progressive Web Apps?

Studies have shown that on average, an app loses 20% of its users for every step between the user’s first contact with the app and the user starting to use it. A user must find the app, download it, install it and then, finally open it. When a user finds a PWA, they can start using it immediately, eliminating the unnecessary downloading and installation stages.

However, native apps are definitely not all bad. Apps with push notifications achieve up to 3 times more retention than their counterparts. In addition, well designed mobile apps consume less data and are much much faster since many resources reside on the device.

A progressive web app takes advantage of a mobile app’s characteristics, resulting in improved user retention, better performance, without the complications involved in maintaining a mobile application.

Use Cases

Should every web app be converted to a Progressive Web App? Native is usually the recommended way if you expect users to return frequently, and a PWA is no different. For example,

  • Flipkart uses a PWA for its popular e-commerce platform Flipkart Lite
  • Air Berlin uses a PWA for its online check-in process, allowing users to access their tickets without an internet connection
  • Alibaba uses PWA for its e-commerce platform Ali Express

When assessing whether your application should be a progressive web app, a website or a native app, first identify your users and the most important user actions. Being “progressive,” it works in all browsers and the experience is enhanced whenever a user’s browser is updated with new and improved features.

There is no compromise in the user experience between a PWA and a website; however you have to decide on what functionality to support offline, and you have to facilitate navigation (remember that in a standalone mode, the user doesn’t have access to the back button).

If your website already has an app-like interface, applying the concepts of progressive web apps will only make it better.

If certain features are required for critical user actions but are not yet available due to lack of cross-browser support, then a native mobile app might be the better option, guaranteeing the same user experience for all users.

What Makes a Web App Progressive?

Before we start jumping into code, it is important to understand the important characteristics of a progressive web app. We know what a website looks like and what an app looks like. There is no definitive metric as to what makes something a web app rather than a website.

A progressive web app should exhibit certain app-like properties…

  • Responsive – The UI must fit the device form factor and screen size.
  • Offline-first – It should be capable of starting offline and still display useful information.

  • Touch-capable – The UI should be designed for touch. User interaction must feel responsive and snappy, with no delay between a touch and a response.
  • Push notifications – The app is able to receive push notifications, even when its not running (if applicable).

It should also maintain certain web-like properties:

  • Progressive – The app’s ability to be installed is a progressive enhancement. It is vital that the app still functions as a normal website, especially on platforms that do not support installation or service workers.
  • HTTPS on the open web – The app should not be locked to any browser or app store. It should be able to be deep linked to and should provide methods for sharing the current URL.

How Do PWAs Work?

PWAs can be thought of as a single webpage or a set of web pages that are rendered on a device browser using common web technologies that simulate app-like behaviour.

There are three components to a PWA:

  • Content – The is the core HTML page content.
  • Presentation – This is the middle tier that contains the CSS.
  • Client Side Scripting – The JS that works with the service worker to increase speed, loading times and the functionality to create the user experience.

To pull the PWA together we need to add in the service worker and the web App manifest.

Service Worker

The key to PWAs is the service worker, a JavaScript background task that replaces the traditional web cache with a cache API. The API wakes up when needed and listens to network requests and saves or caches the static resources from the visited sites. This enables the PWA to function even when offline, making the app “always available.”

The Web App Manifest

The Web Application Manifest is a JSON script that makes it possible for the Web application to assign a home screen icon, theme and background colour to the app, define a splash screen, and run the web app in full-screen mode as a standalone application.

Conclusion

Google does not own the web and neither owns web apps. This all is about web apps, no matter how one or the other vendor names them – Pinned Sites, Hosted Web Apps, Installable Web Apps or Progressive Web Apps. This is what all vendors tried to achieve. Some gave up on it, some didn’t…

No one other vendor prioritises web apps as Google does today.

Next Steps


There are quite a few ways to get started. You can start from scratch or just convert a single feature to its own PWA. This guide from Google is one of the best out there in my opinion. It contains a handy checklist and tools and methodologies with best practices in developing progressive web apps.

This is Part 1 of the article. Watch out for Part 2 in which I’ll discuss AMP and how it can be used with PWAs to provide further progressive enhancements to your app. Stay tuned!