Using PWAs to enhance your customer's eCommerce experience

pwa-lighthouse.png
Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.

In this article we are going to talk a little about Progressive Web Apps (PWAs), what they are and how the principles can be applied to an eCommerce store to improve customer experience.

A little background…

Although PWAs are currently being talked about a lot in the world of eCommerce they are actually not a completely new concept. In fact the term 'Progressive Web Applications' was first coined back in 2015 by Google engineers Frances Berriman and Alex Russell.

The key concepts behind a PWA is that modern web applications should display a common set of behaviours in order to enhance user experience and become more… well app-like.

Building a web application to behave more like a native app has some pretty good advantages over both a normal web application and a native app.

The PWA principles also encourage modernisation of the web application through enhanced performance and secure browsing via HTTPS.

So what exactly is a PWA?

A PWA is any web based application that displays the following characteristics:

Reliable

Load instantly and never show the downasaur, even in uncertain network conditions.

Fast

Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging

Feel like a natural app on the device, with an immersive user experience.

This is a fairly broad definition but some more detailed examples of what a PWA might do over a normal web app are:

  • Allow the user to save the site to their mobile home screen

  • Still browse the site even when there is no network connectivity

  • Loads very fast by minimising network traffic needed on each request.

  • Ensures secure browsing via the use of HTTPS

You can read Google's documentation on PWAs here.

PWAs and eCommerce

Now that we know what a PWA is let’s talk more specifically about eCommerce.

Most eCommerce merchants in this day and age know the value of mobile. There are now around 6.8 billion smartphones in existence on the planet, that is nearly one for every man, woman and child. Mobile traffic is also now responsible for around 52 percent of all Internet traffic. So a responsive online store is a must but it is not enough to stand out as one of the more usable sites.

From the above description you can already see the benefits of implementing PWA features on an eCommerce store. It does however take some extra planning, implementation and testing in order to implement well. 

Let’s take a look at some particularly useful functions of a PWA when it comes to eCommerce:

The service worker

A service worker is a very clever layer that sits between the user’s browser and the web server.

.jpeg

One of its most important features is that it gives the control of the network connection back to the developer. Typically this would be outside the realms of what a developer could control.

Why is this useful? For example it allows the developer to decide when to go and fetch new content for the site.

Therefore in the event of the user losing their network connection, the service worker can choose to deliver an offline version of the previously loaded site resulting in the customer retaining their ability to browse the catalog and interact with the site. Typically this would be accompanied by a message letting the user know they are browsing the offline version of the store. 

A normal network connection error

No connection using service workers

IMG_6153.PNG
IMG_6152.PNG

Save to home screen

IMG_6154.PNG

Many eCommerce sites have attempted to develop and deploy native apps with varying success. Often people don’t want to have to download the app and shop when they are used to shopping via a regular browser. Also, while native apps have some advantages, the update process is controlled fully by the user and therefore you can quite easily end up with users on different versions of the app without any control over it.

PWAs allow you to give the user the ability to save your store to their phone home screen. It looks and feels like an app, has a presence on the user's phone but is actually just a web application with everyone always viewing the exact same version of your application, via the web server.

Push notifications

Adding to the app-like behaviour another really valuable attribute of a PWA is the ability to perform push notifications to the end user straight to their phone.

Screen Shot 2018-07-20 at 01.46.03.png

Imagine being able to instantly notify your customers of an upcoming sale or promotion directly to them without going through the route of a typical email campaign. The user’s experience is instantly enhanced and one less barrier to purchase is created. Pretty neat stuff.

This is also achieved using service workers, covered earlier in this article. 

Example eCommerce sites using PWA

Here are some examples of eCommerce sites that have implemented PWAs already

Testing your PWA with Google Lighthouse

Finally as implementing a PWA by its nature is something that can be done in varying degrees, there is a very handy tool created by Google that allows you to test just how progressive your web app is. It’s called Lighthouse and tests various aspects of the application.

Luckily it is natively built into the Google Chrome dev tools and can be found under the audit tab. 

It generates a report on the fly for any given site, rating its PWA score based on a number of different criteria.

cdt-report.png
report.png

Summary

We have looked at the benefits of implementing a PWA for an eCommerce site. PWAs are a logical progression from mobile first, responsive eCommerce stores as they greatly enhance your end user and customer experience and most importantly break down the barrier to purchase.

I highly recommend looking at implementing some PWA features on your next eCommerce project.