Brands and retailers: are you ready for Progressive Web Applications (PWA)?

Brands and retailers: are you ready for Progressive Web Applications (PWA)?

I’m Kane Balagtey and have worked in UI/UX for 12 years and have worked for the last 5 years as a UI Consultant for Tacit Knowledge, a technology enabler for brands and retailers. As a specialist in storefronts, I have a keen interest in keeping an eye on user experience trends and technologies. Lately, I noticed a growing adoption of Progressive Web Applications (PWA) in commerce. PWA is about to flood the whole digital commerce domain. Whether you’re a technologist, marketer or a creative, the question is the same. Are you ready for PWA?

Background

sales per year graph

Before we jump to PWA, let’s review the history of how we got here. The Responsive Web Era was triggered in 2007 when Apple released the first iPhone. This led to Responsive Web Design, the idea of designing and developing mobile-friendly websites.

In 2015, mobile phone sales increased to 1064.08% from 2007, which then led to the Mobile-First Era. Today, no one in commerce would question the importance of mobile. It has reached a point of saturation and to use the terms of innovation adoption; even the laggards have joined the trend.

innovation adoption lifecycle graph

So what’s next after Mobile-First? PWA is the answer. Innovators like Alibaba and Flipkart have made mistakes for everyone, and many early adopters like Arcadia, Aldo, George, and Tesco have started bringing PWA over to mainstream commerce. If this trend of early adoption continues, then the early majority is expected to join the PWA Era by 2022.

ui-ux trend commerce adoption

What is PWA, and how did it get to commerce?

PWA is a set of technologies and practices that aim to bring native-app experiences into websites. The idea is to make the web compatible with native mobile features, and user experience should ‘progress’ as technology improves.

PWA entered commerce in 2015, when Flipkart, the biggest commerce platform in India released Flipkart lite for mobile. It was the first enterprise-grade PWA commerce website and had been the leading progressive web since. The key feature was speed and offline awareness.

Since 2015, many have struggled to define what makes a website PWA. The number of definitions is expected because PWA should not be a tick box exercise. The goal is to deliver a good user experience that gets better, based on device capability. Beyond knowing what it is, asking why PWA is important to commerce customers should follow.

Why is PWA important to the customer?

PWA is important because 82% of customers use their phone for shopping. PWA is the next evolution of Mobile-First experiences as it allows customers to enjoy the benefits of native apps on the web, like snappy transitions, quick access from the home screen, geolocation, and so on. Native-app capability combined with web features, like sharing via secure URLs and seamless links with other websites, offers customers the best of both worlds. In short, PWA offers customers an experience that is Fast, Safe, Convenient, and Social.

Fast

PWA provides new technologies and practices to speed up the user journey.

  • Single Page Application w/ CSS animations
    • Perceived speed due to snappy page load and transitions at 60 frames per second. Sections of the page can be loaded instead of the whole page.
  • Service Workers
    • Client-side caching and offline aware options. Pages and data can be stored in the user’s device with background syncing.
  • Preload, Prefetch, Prelink, and Intersection Observer
    • Priority loading like Above-the-fold data loading.
    • Prefetch data that you think users will need. This can be automated and data-driven with google analytics.
    • Native lazy load support which means the browser itself does it in the best way possible.
  • Network Information API
    • Detect the user’s network speed and decide to preload data or reduce the quality of large images and videos. For faster connections, you can choose to load more products in PLP or more cross-sells in PDP.
  • Responsive Images

Safe

The concern over data breach, fake websites and the popularity of privacy control in social media has conditioned users to be careful.

  • HTTPS
    • Encrypts data between the user’s browser and the website, this prevents data sniffing and session hijacking.
  • Content Security Policy
    • Control what domains can do to your website to prevent XSS. For example, if image.com only exists to host images, then you can set the policy not to allow scripts.
  • Web App Manifest
    • Adds the application into the user home screen without installation or data sharing.
  • Permission API and privacy control
    • By default, web apps feel safer than native-apps because features are enabled by permission.

Convenient

PWA meets the on-demand culture customers want by making authentication and payment simple across websites and channels, saving time and effort.

  • Trusted Digital Wallets (Payment Request API, Google Pay, Apple Pay, PayPal)
    • Payment data is stored in the user’s ‘own wallet’ which allows for faster and consistent payment experience.
  • Single-Sign-On and Credential Management API
    • 1-click account set up with their trusted account like Google. This means the user is auto logged-in on all their devices, a multi-channel experience that is convenient and safe. Gmail is the second most essential app for 18-34-year-olds.
      • Two-factor authentication can also be enabled should the user want more safety.

Social

Customers are used to social media features like chat, notifications, and sharing. Using social media patterns make your website feel familiar, helpful, and easy to use.

  • Friendly URLs
    • Allows the user to bookmark and share the link on social media. A distinct advantage over native apps.
  • Push Notification and Badging API
    • Stock, delivery, order, upcoming sale & promotion notification, allow the user to be in the know.
  • Web Share API
    • Personalised sharing dashboard based on the user’s last used apps. It can also be used as a ‘send a gift hint’ feature.
  • Gesture and touch-first design for navigation and components like swipe, scroll snapping, 3d touch, and zoom for app-like behaviour.
  • Emoji friendly gift and personalisation message.
  • 53% of online shoppers say images inspire them to purchase.
    • Fullscreen API to make use of the phone screen edge to edge. 
    • Picture-in-Picture API to create floating hero videos to allow the user to browse the shop while watching a promo video.
  • 500% growth in buy near me mobile searches.
    • Geolocation API to recommend products based on what others are buying nearby, to collect an item nearby, and estimated shipping tax calculations. 
  • 84% of Americans are shopping for something at any given time and in up to six different categories.
    • Page Visibility API tells the website if the tab is idle. This can be used to detect bounce rates better.
    • Local Storage API to store ‘recent searches’ in their mobile device to help users keep track of their searches.
    • WebRTC API and Websockets for Q&A and chat, like Amazon and AliExpress to help users get answers easily and quickly.

Where is commerce technology heading?

For the tech-savvy, you will notice that all of the technologies mentioned above are all ready. The list does not even include upcoming APIs like Bluetooth, NFC, Shape Detection(face, barcode, QR), and so on. 

It begs the question, why don’t all retailers make use of PWA now? I think it is due to cost. It can be expensive to hire good product owners, designers, UX architects, and engineers, who can cook up these technical ingredients and create an experience that nurtures the brand. Most success stories are from technology-first companies or retailers that are technically mature. 

However, this landscape is about to change as all of the major commerce platforms are now PWA ready. SAP and Magento created PWA accelerators, Commercetools and Elasticpath created reference storefronts, and specialist vendors have productised PWA foundations. All the options above lead to reduced cost of technical implementation.

Here is a list of commerce platforms and compatible PWA storefronts:

  • SAP Commerce – SAP Spartacus
  • Salesforce Commerce – Mobify
  • Magento – PWA Studio, VueStorefront, ScandiPWA
  • Commercetools – Sunrise Reference Storefront
  • Elasticpath – React Reference Storefront
  • Bigcommerce – Deity Falcon
  • Shopify – Frontastic

For Q2 2020, our team at Tacit Knowledge delivered an enterprise-grade SAP Spartacus website to production. This proves the production-readiness of PWA storefronts for SAP customers, reducing the risk of PWA adoption. Over time, the risk of PWA adoption is lower, but the risk of revenue loss for late adoption increases. Retailers have to weigh the risk and make a decision.

Conclusion

In conclusion, customers want PWA experiences and technology is advancing to meet this demand. If this trend is like Responsive Web and Mobile-First, then expect PWA to flood the market just as well. 

Retailers need to start thinking about PWA and how this can help their customers. To thrive, retailers need to give customers an experience that is Fast, Safe, Convenient and Social; benefits that PWA enables.

About Tacit Knowledge

Tacit Knowledge develops, integrates, and supports enterprise software for household name brands and retailers. Together with our parent, Pitney Bowes, we offer solutions across all consumer touchpoints, from device to doorstep. We connect the entire ecosystem of our customers’ digital commerce business. We build and support the Ecommerce website and associated technologies through to providing fulfillment (Pick & Pack, Kitting) through to Delivery, Returns, and Post-purchase customer engagement tools.
Highlights from Tacit Knowledge Sponsored E-Commerce Congress
EVENTS News

Highlights from Tacit Knowledge Sponsored E-Commerce Congress

London, UK: Tacit Knowledge sponsored E-Commerce Congress, a Savant Events Conference, the premier e-commerce conference in the UK focussing on...
Read More
Tacit Knowledge sponsors eCommerce event with partners Hybris, Rackspace and Cybersource.
EVENTS News

Tacit Knowledge sponsors eCommerce event with partners Hybris, Rackspace and Cybersource.

For most merchants the task of selecting new territories has been accomplished, including a list of countries to move into. The issues for most eCommerce retailers...
Read More
1 2 3 4 5 8
Minia Oseguera