Mobile

The Mobile Web Strikes Back with Progressive Web Apps

This column is authored by Suyash Katyayani, CTO, Purplle.com

Progressive Web AppsBy now, you might have heard about the whole hype around “Progressive Web Apps” being the future of mankind and that they would save the endangered species from extinction, bring world peace, end poverty, end hunger and what not! But is the hype really worth it or is it just another ephemeral buzz word? Well to be really honest, all this hype really got my attention.

I am the CTO of Purplle.com which is India’s #1 beauty destination. Like many other startups, recent cues like mobile penetration in India & existing customers’ device split led us into adopting a “Mobile First” strategy. Mobile (Native + Web) has been a big driver of our growth & it contributes to 75%(approx) of all our transactions. Presently, 67% of our organic traffic is from mobile. Traffic from pretty much every marketing channel including email, Facebook or Google-display has similar device wise split in traffic. It was logical for us to put in significant efforts in improving the conversions & user experience of our mobile website.

It is understandable that people have historically preferred focusing on native apps over mobile websites.

Native Apps –

a) can re-engage — send push notifications

b) support connectivity-independent functionality- work offline , create local databases

c) use native functionality (like reading a gallery and creating a custom view for it, with the right permissions of course)

d) are installable on devices

In general native apps give a much superior user experience to the end user. Therefore it doesn’t come as a surprise that people who have native apps are sticker (4x more visits a month) and have higher LTV (2.5x more revenue in 6 months) than the mobile web users. But then if that is the case, why does a company need a mobile website at all? Probably this is the dilemma that triggered Myntra’s infamous app-only approach. But there are a few things that worry me about such an approach.

Stat — Majority of the users discover your business for the first time on the mobile.

1) If you go by the industry standards, only 20–25 % of the people who visit your app store pages end up downloading the app. This means that around 80% of the users do not experience your business at all and drop out. You lose out on the opportunity of showcasing yourself and even re-targeting them in the future.

2) Since majority of the people in India use phones which have a space constraint, the chances of retention of the app are minimal and the average 90 day retention of native apps is only around 16%

In my experience native apps & mobile web serve different purpose. And only a fool would ignore either. Mobile website makes your business discoverable and lets the first time users experience your business without making a commitment of installing the app.

Therefore, improving the user experience on mobile website is of paramount importance. That is where progressive web apps take the lead.

What is a progressive web app?

Progressive web apps are browser based mobile websites that bring features from the native web apps to the web browser.

It should not be confused with hybrid apps that run in the native environment. As a concept, progressive web apps describe a collection of technologies, UX design concepts and web APIs that come together to deliver a native app like experience and functionality to mobile websites.

Does it solve traditional mobile web problems?

Indeed! By using progressive mobile web technologies you can make your website work offline and gracefully handle patchy network scenarios. You can use service workers to send push notifications, background content updating, content caching and a lot more.

Purplle.com’s Mobile Website

Architecture & Building Blocks

Let us look at some tenets that govern its principles

Service workers

At a very high level, service workers are threads that can respond to events (like push notifications, network api calls or network changes) and react to them in the background. These are just JavaScript files that give you a great control over how to handle these events. Example — You could detect a network API call, intercept it to check if the device is online and if not, you can render a view component or automatically retry the call once the device is online again. At the very core, the service workers are the building blocks that make progressive web apps what they are.

Having said that, the flexibility, complexity and the novelty of this concept gives developers some sleepless nights. But fret not, there are a ton of recipes available which makes getting started easier. You’ve got to love open source and the developer community that bolsters it! Google also has a lot of service workers samples. For security reasons, the service workers work only on secure (https) websites.

App shell

App Shell is a simple design concept that provides a basic shell for the UI on the initial load and the actual content loads thereafter. It is more of a design approach rather than a framework or a specific technology. Ideally, an app shell is cached using service workers so that it loads quickly & renders the common components (header/navigation etc) of the web app immediately. There are service workers recipes available for caching, offline support and background content refreshing.

Installability & App Manifest

Traditionally browsers have provided an option to pin any web-page on your mobile home screen. The experience though was second rate and the websites still didn’t have all the powerful features that we have been talking about (and most importantly, does anyone really do that?).

This has changed now (to an extent). You can intimate Google Chrome that mobile website is installable as an app by writing a manifest.json file and link to it from your index file. This means that on Google Chrome for android, you can trigger this from a native app install banner.

On iOS though , there is no such functionality (beyond pinning the web-page on the home screen). Hoping Apple surprises us with some kindness this year.

Technology Landscape

Angular 2 Js and ReactJs are the two most popular frameworks for developing a progressive web app. We choose the former since it takes a much broader view of the development process. Angular 2 is a tighter framework and it shepherds the way in which you build your apps while also allowing you to create rich and reusable UI. The choice, as always, depends on a lot of factors. It will vary based upon the goals of your application as well as the opinions of your development team.

Final Thoughts

The mobile web comes closer to parity with native apps through home screen installability using app manifest, background thread functionality with service workers, faster load time with App Shell & push notifications.

The entire progressive web paradigm is still in a very seminal stage. With more developers & businesses embracing these technologies and modern browsers adding more capability & support, expect this space to expand more and gain more popularity. Personally, I believe Purplle.com has taken a step in the right direction by embracing Progressive mobile app and certainly it has helped us deliver a better user experience for our users.

Progressive Web Apps are slated to radically change the way web apps are built, almost as significant a pivot as AJAX was a few years ago. What do you think? Is it really going to be as significant or is it just a passing fad?


Have ideas to share? Submit a post on iamwire

2 Comments

  1. 1

    Progressive web apps are faster to build and less expensive than apps, and they open up new distribution channels. If you need help integrating one into your business, reach out to us. We’re SF AppWorks, a digital agency whose AI-powered voice bot wins the TechCrunch Disrupt London Hackathon.

  2. 2

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>