PWA: the unicorns of e-commerce

We have all heard the newest buzzword: Progressive Web Apps. How they are the future of all mankind, here to end wars, bring peace, save rainbows and much more. They are a combination of Khaleesi and Yoda: here to fight this horrendous monstrosity called “Slow Websites”. In the process, they might push the mobile web forward, unify the web and make us rethink how we are building websites. They will bring user experiences to a whole new level and increase conversion rates to astronomical heights.

They are the unicorns of e-commerce development: mythical, heavily theorised by many and not really spotted in real life. Until now.

 

At it’s core, a Progressive Web App (PWA) is simply a web application that uses the latest web capabilities to deliver a native app-like experience to users. They are reliable, incredibly fast and engaging. It is the technology that will bring consistency between web and native apps, giving businesses the opportunity to target a mass market.

As defined by Google, PWAs are:

• Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
• Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
• Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
• App-like – Feels like an app, because the app shell model separates the application functionality from application content .
• Fresh – Always up-to-date thanks to the service worker update process.
• Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
• Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
• Re-engageable – Makes re-engagement easy through features like push notifications.
• Installable – Allows users to add apps they find most useful to their home screen without the hassle of an app store.
• Linkable – Easily share the application via URL, does not require complex installation.

Technically speaking, a PWA consist out of two major components:

1. The Web App Manifest. The web app manifest provides information about an application (such as name, author, icon, and description, but also how it behaves) in a JSON text file. A link to this file is required on each page that has to be rendered. It is added in the head section of the HTML page: <link rel=”manifest” href=”/manifest.json”>
2. Service Workers. The service worker is where basically all of the magic happens. It is basically JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure. Also be aware that the service worker can cache the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

When we think of a PWA being a web application, we must think about the web differently than we have in the past. We can explore the possibilities of progressive enhancement to implement features like background sync, offline working, splash screens and push notifications.

A PWA can make use of many more such features. The mentioned features are only to give you a hint of what a PWA is capable of. Think of push notifications when someone abandoned their cart, or extremely fast sites on mobile, even on slow networks.

If you wonder how these features will turn into gold on your webshop? Let’s have a look at some numbers:

Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, and a 20% decrease in bounce rate. Twitter Lite loads in under 3 seconds for repeat visits even on slow networks.

Lancôme’s PWA features a 17% increase in conversions, a 51% increase in mobile sessions overall and a 53% increase on iOS alone. Notifications contribute a 18% open rate and a 12% increase in recovered carts. 8% of people responding to a notification make a purchase.

Flipkart’s users spent 3× as much time on site with 40% higher re-engagement and 3× lower data usage via their Progressive Web App.

These impressive numbers show clearly why PWA is the unicorn of e-commerce. When you think about a unicorn, you might think of this magical horse-like creature, with a twisted horn on his majestic head, flying on rainbows and spreading gold. In the world of business, a unicorn is a company, usually a start-up that does not have an established performance record, with a stock market (estimated) valuation of more than $1 billion.

Unicorns are rare and mythical, they are beautiful and so much better than the ‘normal horse’  – and everyone who encounters them will gain wealth, happiness and prosperity. If you ever wondered how to get your own unicorn: here it is – PWA