September 24, 2017 Viswesh Subramanian 0Comment

The problem

The analytics have spoken yet again – Native applications continue to dominate time spent (87%) than Mobile Web (13%). Interestingly, the 87% is cannibalized by only top 3 applications. So, what happens to the 5 million applications in App Store and Google Play? Are they the modern day terracotta soldiers left to be forgotten? Sadly, Yes. Furthermore, 49% of users do not download a new app per month; well, we don’t need analytics to tell us that. How many of us download a new application every month? Clearly, the native app development is not helping conversion or user retention.

Even though the mobile web has a greater reach than native apps, they are not making an impact due to one single reason – Capabilities.

Progressive Web Applications (PWA) offers the bridge to make mobile web truly capable of features which were reserved for the natives.

Progressive Web Application

Progressive Web Applications are web applications which are Reliable, Fast and Engaging; terms which were previously used to describe a native app experience. Whether users are on airplane mode, entering a subway tunnel or they have retracted to the deepest corners of the world, PWA’s deliver the goods. By using a client-side proxy, network requests are served by the sandboxed environment (if available) instead of letting it hit ‘Server not found’ or ‘There is no Internet connection’. Reliable – Check!. Performance has always been an ongoing effort and will forever be so. But by understanding how HTML, CSS, and JavaScript render with Critical Render Path and optimizing payloads between clients and servers, mobile web applications can be tailored to provide native-like experiences. Fast – Check!. Native applications are engaging because

  • They can be Installed on the home screen
  • They offer push notifications
  • They are operable offline

PWA’s facilitate above 3 features using web manifest file, Push API and Service Workers; enabling web applications to be as engaging as their native counterparts. Engaging – Check!

There have been a plethora of PWA case studies, specifically from: Flipkart, Washington Post, AliExpress, Konga and exTra Electronics. The pointers distilled from these case studies are :

  1. Not everyone will want to install your native application. Get over it – you have spent the time and effort to build this performant and interactive native app but there are no customers? Well, maybe they just want in and out. And not click redirection to the app store, install, wait 30 seconds….
  2. Mobile web audience is 3X the size of native and growing 2x as fast as app audiences. It only makes sense to bet on reach and growth.
  3. A faster site means higher conversion. E-commerce sites such as Flipkart, AliExpress, and Konga have proved the power of app shell and client-side proxies.
  4. Provide an offline experience. Period.
  5. Web customers, especially e-Commerce applications can benefit a lot from push notifications. Think alerts on price change, stock updates or auction updates.
  6. Creating a Web Manifest file (JSON format) is super easy and they provide a great experience to users, so create the JSON document already.

Getting started with PWA

Secure Origin

PWAs are served over HTTPS. A great place to get started with certificates is at https://letsencrypt.org/ 

Web App Manifest

The manifest file contains app label, theme colors, splash screens and icons.

Like ES6+, not every browser acknowledges and understands the presence of a web app manifest file. To explicitly call it out to the browsers, we include tags –

<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="JavaScript Store">
<meta name="apple-mobile-web-app-title" content="JavaScript Store">
<meta name="theme-color" content="#f2e058">
<meta name="msapplication-navbutton-color" content="#f2e058">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="png" sizes="192*192" href="jsstore.png">
<link rel="apple-touch-icon" type="png" sizes="192*192" href="jsstore.png">

Offline support

Offline support is provided by Service Workers, a type of Web Worker which enables applications to intercept and override background processing. As your application bootstraps, registering the service worker kicks off installation; once installed it’s either handling fetch requests or stands terminated. The steps involved in service worker setup are common for most applications and you will find yourself repeating the boilerplate code within no time for all implementations. So, let’s do us a favor and trust in Google –

sw-precache 

It is a build time helper with which, static assets such as applications shells, CSS, images, logos which do not change often can be pre-cached so that they are served from cache. The fact that it also handles cache busting by mapping asset URLs with hashes makes it a compelling node module to use. As you release new builds, only modified assets are requested over the network; others are served by the local cache.

sw-toolbox

It is a runtime helper for dynamic content which provides common strategies (networkFirst, cacheFirst, fastest, cacheOnly, networkOnly) for service worker logic. All you need to write are express-like routes and the sw-toobox takes care of the rest. 

toolboxRouter.get(‘/img’, toolbox.cacheFirst)
toolboxRouter.get(‘/api’, toolbox.networkFirst)
toolboxRouter.get(‘/custom’, toolbox.fastest)

Push Notifications

Push notifications engage users with relevant content in an appropriate manner thereby increasing retention and loyalty. And., it is provided by service workers. You read that right. Push notifications use 2 APIs; Notification APIs to display information and Push API to handle messages pushed from the server. For more information about implementing push notifications, I suggest you follow this tutorial to create your first push notification.

Based on new advancements in the Web API space and improvements to the JavaScript language, there are no compelling reasons to build native applications. The mobile web is here to lead.

References

http://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

https://developers.google.com/web/fundamentals

https://github.com/w3c/ServiceWorker/blob/master/explainer.md