How to use Progressive Web Apps and Mobile Push for E-Commerce

How to use Progressive Web Apps and Mobile Push for E-Commerce

Let’s say you want to be in constant touch with a website that you love, so you try downloading the app. Then you realise you have to delete a few things on your mobile due to insufficient space. Finally you download the app and it functions great, until… your net connection is lost. Is it worth going through all of this when all you wanted was to browse with ease?

37% of users use e – commerce & retail apps for one month after they downloaded it, meaning 63% of users have churned and are no longer using the app one month after they downloaded it.

Now this is a huge percentage of people. So what is the use of making an app if it ends up in the bin. Mobile users get irritated when an e- commerce website takes forever to load. A 500ms connection speed delay, results in up to a 26% increase in peak frustration and up to an 8% decrease in engagement.

The problem of delayed “page load” is far more critical in Africa or even the Indian sub continent. It is of paramount importance that E-commerce marketers create powerful native experiences for their mobile users. It was under this premise, that the idea of progressive web apps was proposed.

How to use Progressive Web Apps and Mobile Push for E-Commerce

A website is all good (of course if you ignore the load speed), unless you decide to open it on you mobile. Especially when a website is not optimised for a mobile, all hell breaks loose.

There are many websites that have a mobile version of the same, making mobile websites more accessible to users and enhances user experience. It just like a regular version of the website but customised to a mobile friendly layout. In this fast paced world, everyone expects that a website should load fast. Websites as we know, do not function offline. So what do we do?

How to use Progressive Web Apps and Mobile Push for E-Commerce

The concept of progressive webs apps was first introduced by Google in 2015. Since then, it has been talked about with much awe and amazement. E-Commerce marketers have aggressively pursued the idea of building progressive web apps.

The Progressive web app summit recently (June 2016) explained the anatomy of progressive apps and everything that came along with it. It is the next big thing that could revolutionise the way things function and give us an out of the world experience, hence the word ‘progressive’ is prefixed to web apps. Progressive web apps address the shortcomings of both the browser and the native apps; establishing itself as a superhero for marketers and developers.

So, what are progressive web apps?

Why choose between website and native apps, when you can use both at the same time? This is where progressive web apps come in. So what are progressive web apps?

Mobile browser audiences have grown at a rate of 1.2x, over the past three years. Progressive web apps (PWA) help developers and marketers adopt to this growing base of mobile users. PWA has all the dynamic features of an app and also functions like a website, making it both powerful and useful for the end user. It is a hybrid of native web apps and a regular website, which makes a mobile website as fast and useful as native apps.

Developers can start creating near native experiences with their Progressive Web Apps. Here is why progressive web apps are as powerful as native apps

Characteristics of progressive web apps

Progressive –Has the capability to work on any device and provide users with all the functions that are capable, according to the technology in their devices.

Responsive –It eliminates the size construct irrespective of the device

Connectivity independent –  Should work smoothly with limited connectivity or no connectivity at all

App- like – It should feel like an app to the users as it is build on a app shell model.

Fresh – All the fresh updates should be available to the user. The service worker plays a major role to keep things up to date.

Safe – The web app should be hosted in HTTPS to make it secure and prevent any harmful intervention from anyone.

Discoverable – As progressive web apps are also like a website, it should be easy for other people to find it. One of the things that an app lacks is, it is not discoverable, as no URL is attached to it making it difficult for search engines to search.

Re engageable – Web apps just like native apps, make the user engage more than once. This is achieved by a features like push notifications.

Installable – native apps are installed on the homepage, so are progressive web apps. The only difference is that the former has to be downloaded from an app store. A progressive web app can be added to the home screen and can be readily available.

Linkable – It does not require any installation like a native app does and can be easily shared via URL like a website.

The blend of these 10 awesome characteristics make progressive web apps unique and one of a kind.

“The reason it’s called ‘progressive’ is because the experience gets progressively better depending on what technology is available in the device,” said David Merrell, senior mobile product manager at The Washington Post.

How to “install” progressive web apps on your mobile?

There are 2 ways to get progressive web browser

Website prompt

When you browse a site for a certain number of times (varies from website to website) it prompts with an web app installation banner, asking permission to add the website to you mobile homepage. When you click on add, it automatically adds to your home page, which will look like an icon of an app.

Manually adding

You can manually add progressive web app by opening the website and then adding a shortcut to the home screen.

How to use Progressive Web Apps and Mobile Push for E-Commerce

Once you open the website from the shortcut, if starts functioning just like an app and gives you a dynamic experience.

Essentials for progressive web apps to function

There are two main essentials to insure that your progressive apps will function correctly:

Service workers

Remember how we said service workers play an important role in keeping things fresh? So let’s now understand what exactly are service workers. They are like a boon to the mankind. Service workers help an web app to function offline. With service workers it is easy to retrieve data that was received when the user was last online.

How to use Progressive Web Apps and Mobile Push for E-Commerce

Service works acts as a middle man, providing service even when you are offline. It syncs background data and presents it to the user. Service workers work behind the scenes and plays an important role in handling push notifications. Check out our article on service workers, to get better idea of what service workers are.

Skip to 6:45 for the good stuff.

Application Shell 

An application shell is like a blueprint or a frame, that it static, and always present. The content that is in it keeps changing. An application shell is required to load the minimal things when a user opens the web app. It is the minimal HTTP, CSS, JavaScript required for smooth user interface.

How to use Progressive Web Apps and Mobile Push for E-Commerce

An application shell should load fast and be cached. The more times the user views the web app, the faster the cached shell loads.It is enhanced by the catching abilities of a service worker.

The mobile push

Over 100K+ websites are using chrome web push notifications. There is so much potential in push notifications, but many websites are not making use of it. Let’s look at the technological hype cycle to understand where we are right now.

How to use Progressive Web Apps and Mobile Push for E-Commerce

The main reason for e- commerce marketers to adopt web push notification is to convert users to customers. They not only help you reach out to them, but also encourage them to spend more time on you website. Mobile push notifications is majorly an application feature. But with the advent of browser push notifications, it became possible to send it without an app, but not when users are offline.

One can’t take users for granted. Once you lose touch with them, they might not make an effort to get back to you. So maintaining constant cordial communication is necessary to keep them in loop and encourage them to revisit your website. This means that you have to stay connected even even when they are offline. This imminent demand is fulfilled by progressive web apps.

How to use Progressive Web Apps and Mobile Push for E-Commerce

Progressive web apps work 24/7, thanks to service workers which make it possible to receive personal and timely notifications anywhere, anytime on mobile phones. Mobile web push notification gives timely updates and effectively re- engages with the users when they are not on the browser or even when you they offline for that matter! Now that’s what we call innovation.

How to use Progressive Web Apps and Mobile Push for E-Commerce

Success story

There are many success stories when it comes to progressive web apps. One such story belongs to Flipkart, who came up with Flipkart Lite. They used progressive web apps and saw an increase of 70%.

How to use Progressive Web Apps and Mobile Push for E-Commerce

The users loved the amazing speed, the smooth navigation and swiftness in which it worked. The thing they they loved the most is they got all of this even when they had low connectivity or no connectivity at all.

With this video made by Flipkart, you will get to know exactly how progressive web apps work.

You can test progressive web apps in Chrome 47 or later. Today there are many progressive web apps and the number is growing. Progressive web apps are here to stay. They are also been used aggressively by many countries, including India.

With progressive web apps, gone are those days of native apps and those never ending hours waiting for the connection to come back. Finally you can browse what you want to, whenever you want to.

Have you tried progressive web apps for your e-commerce? Tell us about it below or tweet us!

Image credit: Marco Goran Romano