A quick guide to PWAs: What next generation eCommerce sites look (and act) like

You may have heard the term “PWA” or “SPA” start to float around in relation to eCommerce sites, but its definition and importance can sometimes still feel blurred. What exactly is a Progressive Web Application or Single Page Application and why is it gaining popularity? Are they another trend or the future basis of eCommerce sites and mobile commerce? We’ve put together a quick guide on PWAs, their purpose for eCommerce, a little exploration on the pros and cons, and a few examples for better understanding.

What does PWA mean and what exactly is it?

Progressive Web Application is a website that looks and acts like an app. It is built with the basic languages (HTML, JS, CSS). Another way to think about it is as an app, functionality and interaction wise, “delivered” through the web rather than through the app store. PWAs are flexible, lightweight, and easier to deploy and maintain than an app. The goal is to keep the benefits of a browser (i.e. you don’t need to download it from the App Store) while creating a mobile app-like experience. Advancements in APIs, service workers, and browsers has made it possible to create dynamic experiences on desktop and mobile.

This is clear but it still feels like an umbrella term (which it is). It’s easier, and more important, to define the beneficial features of a PWA.

Thankfully, Google has taken it’s normally authoritative stance to define them for us:

What features indicated a PWA?

• Mobile responsive (and Desktop friendly)
• Delivers app-like functionality and experience via the web
• Fast interactions and load time
• Discoverable and accessible via all search engines — unlike a traditional app
• Linkable, open, and shareable using URLs
• Independent of connectivity: able to run offline and in with unreliable connection (think Google docs; hugely beneficial for eCommerce)

How are PWAs built?

PWAs are built with normal HTML, CSS, and Javascript and include client-side APIs and service workers to enhance functionality. They are lightweight, faster to build, and easier to deploy than traditional apps.

PWAs and eCommerce: Why are they so important?

eCommerce sites are facing a massive problem…

The expectations of performance and functionality are increasing and traditional eCommerce platforms are not keeping up. Because they’re not built for that.

eCommerce shoppers expect flawless, friction-less and fast experiences that reflect their interactions with brands on social platforms. Customers notice speed: 79% of customers say that they will not buy from your site again if they experience poor performance. eCommerce SEO relies on fast page speeds as well for consistent, quality traffic. A 1 second delay in page load results in an 11% drop in page views. Both leads and conversions rely on a fast, custom experience.

Current architectures don’t support what eCommerce companies need.

Monolithic architectures or “out-of-the-box” solutions were great for an easy way to get up and running for eCommerce companies. But anything “easy to set up” comes with its limitations. There is very little customization possible on the front end and limitations on performance as they are not built with speed as a top priority. Many eCommerce dev teams will try to chase incremental performance improvements with CDNs and caches, but these are just patchwork solutions — they don’t get to the root of the issue. They require a technical, process-heavy work-arounds, their performance is inconsistent, and they don’t make a justifiable difference.

Here’s where PWAs change things:

PWAs bring the high-functionality, fast experience customers are looking for. They’re easy to build and highly customizable so eCommerce companies can be agile in meeting customer needs and pivoting to enhance their brand. They also deliver the instant speeds that template front end clients from current eCommerce solutions cannot. They’re the perfect solution for eCommerce companies experiencing brand-damaging limitations.

However, in order to adopt a PWA, eCommerce companies need to Headless . What is Headless? We’ve put together a more in depth explanation, but with respect to time: it’s a modern eCommerce architecture that separates out the front and back end so companies have complete flexibility, can deploy PWAs for the frontend, can integrate new tools, and can streamline data flow for instant performance.

Many eCommerce companies that know the value beautiful and fast customer experiences have made the switch to Headless architecture + a PWA front end.

PWAs at work: Some effective examples of eCommerce PWAs

1. George:

This massive UK retailer made the switch to a PWA frontend and now effortlessly delivers so much dynamic content and functionality on their homepage to support their vast and highly segment-able shopping experience for their equally vast target markets. Their interactions are remarkably fast, even in areas of poor connection — making this an ideal experience for shoppers anywhere.

Why it works:

• Fast, intuitive segmentation
• Engaging, content-rich homepage with a lot of functionality and movement

2. Restoration Hardware:

As the furniture industry struggles to find its place in eCommerce, Restoration Hardware takes a modern stance by supporting their luxury brand with a customized, luxury online customer experience. Characterized by their moody, modern look, the experience displays their growing product catalogue in a way that is organized, functional, and still beautiful — something that can only be done with a completely custom build. Segmenting down to product type and style is easy and exploring all the details of a product is effortless.

Why it works:

• Branded navigation and creative segmentation
• Plenty of product views and intuitive suggestions at every step

Take a look at other eCommerce PWAs here: 10 best eCommerce PWA examples

How do you make the switch to a PWA?

First things first is moving to a Headless architecture. We’ve written out a guide on what you need to know about Headless you can check out here. After this change, the door is open to complete customization of your customer experience and the limitations on performance are eliminated. Read more about best eCommerce customer experience practices. *link to blog*

To learn more about the best way to speed up your eCommerce customer experience, book a demo with Instant Labs.