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
- 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 :
- 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….
- 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.
- 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.
- Provide an offline experience. Period.
- Web customers, especially e-Commerce applications can benefit a lot from push notifications. Think alerts on price change, stock updates or auction updates.
- 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
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 –
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 –
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.
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 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.