Progressive Web Apps

12Jun, 2017

Subramanya S M, Technical Architect, Quadwave

Introduction

“History doesn’t repeat itself but it often rhymes” – Mark Twain

About a decade back, we were accustomed to using thick/heavy desktop client applications which were connected to a (mostly on-premises) server. Upgrading/maintaining each client instance meant lots of hardship in terms of time and effort. Frequent updates were discouraged, as even a small fix in the client application needed the same effort and time to roll-out, as for a major upgrade. These limitations and much more were overcome by the browser-based web applications which centralized the maintenance to the web servers (or the cloud).

Native Apps and their Challenges

Past few years have been dominated by Mobile Apps which are gradually becoming the center of most online activities. Many Mobile Apps are still getting developed in different languages natively supported by the three popular mobile platforms, viz., Android, iOS, and Windows. However, in this case also, we face a similar problem with maintenance, as Mobile Apps are updated more often, almost weekly, in most cases. Although the users are prompted to update the Apps, many of the users may not do it immediately due to various reasons like bandwidth limitations, high data charges, and other issues. Hence, the user may have an older version of the App which may not work partly or entirely. Alternately, support/maintenance for few older versions needs to be provided by the App provider for long periods.

Concept of Progressive Web Apps

There are few mobile Apps that run on mobile web-browsers and have their set of limitations against native App-Store Apps, which do things like sending push notifications, working off-line, loading on the home screen, look like a typical native App, and so on.

Progressive Web Apps overcome these limitations with new Web APIs, new design concepts, and new terminologies. Progressive Web Apps use latest web capabilities to deliver a native App-like look and feel. They bring the main features that are part of the native Apps experience into the mobile browser using standards-based technologies while running in a secure container.

Tenets of Progressive Web Apps

  • Service Worker – A Service Worker is a worker script that works behind the scenes, independent of the App, and runs in response to the events like network requests, push notifications, connectivity changes, and much more. Service Worker is a JavaScript file, like any other, running in the background and triggered via events. We can use default implementations to handle caching, push notifications, content fetching, and the related aspects, or customize them as required.
  • App Shell – App Shell model is a simple design concept whereby the initial load of a Mobile Web App provides a basic shell of an App UI and the content for the App is loaded later. In the App Shell model, the focus is to keep the shell of the App UI and the contents separately and cache them separately.
  • Installability and App Manifest – Google Chrome on Android now supports installing web Apps to the home-screen with a native install banner, just like the native App banners. To let Chrome realize that the mobile website is installable as an App, a manifest.json file, which is linked to the main HTML page, is used.

Limitations

Progressive Web Apps are fully supported in Chrome 50 or later versions, on Android. However, full support on other mobile platforms is still in the pipeline.

Scope

With Progressive Web Apps, the mobile web comes closer to parity with installable App-Store Apps through the App manifest and home-screen install support; background worker functionality with Service Workers; and faster load time with App Shell. Hence, this is one of the technologies that we can look forward to in the near future.