Headless PWAs: Why They’re Changing Ecommerce for Good

April 8, 2021
Rhys Williams

Headless PWAs: Why They’re Changing Ecommerce for Good

April 8, 2021
Rhys Williams
Back to the blog
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

In an increasingly mobile-first world, Progressive Web Apps (PWAs) are transforming the way customers interact with brands.

If you run an ecommerce store then you’ll be familiar with the problem: that is, the mobile web still suffers from sluggish page-load times and patchy network coverage. 

You want to give your ecommerce site visitors the high-quality experience they deserve, but designing and building a downloadable app is a huge undertaking, and frankly isn’t your only option anymore. 

Enter PWA headless commerce, or — progressive web apps.

Most of the excitement around PWAs has focused on a progressive web app’s advantages over native apps, but they also have huge speed and UX advantages compared to traditional/dynamic sites, and this — much more than how they mimic native app capabilities — is what’s reshaping ecommerce.

Many brands like Lancôme, West Elm, and Zadig & Voltaire are turning to headless PWAs for their performance benefits, and we’ll walk you through why.

#cta-visual-fe#<cta-title>Build a Headless PWA for Your Brand<cta-title>See how Shogun Frontend can transform your site into a headless PWA.Learn more

What is a progressive web app or PWA?

A progressive web app is a website served over HTTPS, in a web browser, but — because of its architecture — behaves more like a downloadable native app than a static website. A PWA headless store first loads as a static web page and then progressively becomes a “single page web application” in your browser (hence the name). 

Upfront, PWAs request the same amount of info as a traditional web page, but on each subsequent page click, a PWA just swaps out the parts of the page that need to change. Unlike a traditional site, PWAs don’t completely reload an entire page — they’re surgical about it. This makes clicks between pages nearly instant.

As an example, Adidas has seen impressive improvements in sales and conversion rates since moving to a PWA store. The menu and customization options come pre-loaded on-site, so there is no need to wait around for extra pages to load. The result is a fast and polished customer experience that is more akin to a native app than the usual mobile web.

In a nutshell, PWAs are:

  • Fast to load because of their reduced data fetching requirements
  • Responsive to how visitors interact with the site
  • Installable on a mobile device’s home screen (with a JSON manifest file)
  • Smooth to navigate with less interruptions when network service is unavailable
  • Safe and secure for customers because they’re served over HTTPS

Because of the way PWAs request information from servers (in small, careful chunks), the amount of data needed to load the site on each subsequent load is vastly reduced. Added to this, PWAs cache lots more information on the visitors’ side, meaning that there’s less new info to load with each visit.

We’ll get into the nuts and bolts later, but for now, the main takeaway is what PWAs do for speeding up your ecommerce site. Because the payload requirements are greatly reduced, sub-second site load-times suddenly become possible, even on mobile

#cta-mini-fe#Find out if your store is a good fit for headless commerce.Take the quiz

The Benefits of PWAs

The main, overriding benefit of using PWAs is speed. 

The reduced data requests make PWAs less dependent on servers that can introduce significant lag time — such as when a traditional, dynamic website has to completely refresh all the information required to load a page.

PWAs have gained a reputation for being superior to native apps. Just like native apps they can:

  • Be added to a home screen, and
  • Send push notifications to store visitors who enable this functionality

But increasingly, PWAs have some big advantages over native apps, in that they are:

  • Available to access offline
  • Flexible, as they’re not limited to a particular device or browser (unlike the different versions of native apps needed for iOS and Android)
  • More accessible to more people
  • Discoverable by search engines so help SEO
  • Usable in a browser and don’t need to be downloaded

The last three points are perhaps the most important. What makes PWAs special is that they’re delivered over a standard web browser just like any other website. 

There’s no need for your customers to do anything apart from load the site and, hey presto! They’re already immersed in your app-like headless commerce experience

And again, it's the speed with which all this happens that is the key driver of their adoption.

Overall, you can think of adding your brand’s PWA to device home screens and push notifications as more of an added bonus. It can be useful for your brand to do, but to put these features at the center of your headless PWA build would be to prioritize a bit strangely. In creating your PWA, you can pick and choose the benefits most advantageous to you.

So, are PWAs better than native apps?

Oftentimes, they are doing different things and, depending on your needs, your brand might even want both a PWA-powered headless commerce site and a native app. So it’s hard to say one is ‘better’ than the other. 

But if you’re looking to create a fast, easily accessible ecommerce website, headless PWAs are a great way to go.

The important thing is that web browsers, in general, have become incredibly powerful tools. There aren’t many things that you can do in an app that you can’t do more straightforwardly in a regular browser these days. 

Want to measure the size of your room and see how that new sofa you want to buy will look? Just point your web browser in the direction of a URL with augmented reality and you’re there. Want to see what those new shoes would look like in a different color? Ordinary sites in a browser can now quickly swap out blue for green.

Where PWAs come into play is that they offer the UX advantages of native apps, alongside huge site speed increases. All discoverable and shareable over the ordinary internet, and so available to a much larger group of people than is the case with native apps.

Take Trivago for example. The popular hotel booking site has a native app for its customers, but they transitioned their site to a PWA because they realized they needed to achieve app-like UX and speed more people would be willing to use:

With Trivago, there’s instant access to booking options and navigation is intuitive, fast, and responsive from the moment visitors land on their PWA site.

Progressive web apps function like apps without the need to download and install them. Navigating around an app is often a smoother, more satisfying experience than a website, especially on mobile, which is why brands are often so keen for their customers to download apps. 

And while the market for native apps is undeniably huge, the sad truth is the vast majority of people spend most of their time on three or four globally dominant apps, and the adoption of brand apps, outside of these big hitters, is low. In fact, in our original research 21% of our survey respondents said they don’t shop using specific brand’s own mobile apps. 

Store visitors simply don’t have the time or inclination to download and install a native app. First, would-be customers need to find your app among millions in the app store, then have to use it enough to warrant keeping it on their device. Using a PWA delivers a similarly satisfying  experience, but to a much larger audience of visitors.

Brands that use the speed and UX advantages of PWAs to power their headless commerce storefront, creating smooth, continuous, and fast site navigation, end up with a big competitive advantage over ecommerce businesses using slower-to-load traditional, dynamic websites. Mainly because a faster, more satisfying user experience leads to more traffic and higher ecommerce conversion rates.

#cta-visual-fe#<cta-title>Build a PWA Without the Headache<cta-title>See how Shogun Frontend can transform your site into a headless PWA.Learn more

The secret to their success

One of the key components of PWAs is service workers. These little JavaScript files run in the browsers’ background, creating a rich cache on the device. So on the next site visit, your site doesn’t have to waste time loading information your visitors already have. 

It’s what makes the almost instant site load on repeat visits possible. It also creates a continuous experience that brands are in control of, even in offline mode. 

But for all these innovations, PWAs are built using standard components like HTML, CSS, and JavaScript files.

It’s important to note that PWAs are not just for mobile. Their adaptability means brands can create device-specific experiences for their customers, but the tech powering those experiences is exactly the same. PWAs create enhanced performance across devices. 

PWAs and headless commerce

As anyone who’s taken a brief look into it will tell you, there are many, many options to choose from when considering going headless. 

You don’t have to pursue headless commerce with a PWA (this is just one route available). You can decouple your ecommerce platform backend using a traditional, dynamic website, or even a traditional, native app.

Indeed, one of the main benefits of headless commerce is its flexibility. As the backend is separated from the frontend, the rest of your tech stack is largely agnostic about what’s powering your frontend delivery platform. 

The beauty of this is that you can use the solution that works for you. How you decide to go headless will depend on what your existing ecommerce stack looks like and what needs you have now and in the future.  

Examine these two factors first (existing stack and future needs), then you’ll be in a stronger position to work out which frontend delivery method is going to take you where you want to go. 

So why choose a PWA to go headless?

In short, because faster online shopping delivers higher conversion rates. Page-load times, especially on the mobile web, are a perennial problem for ecommerce brands. Even though load times are coming down, they are still surprisingly high

Pages that take longer than three seconds to load are too slow for most customers. There is a well-established correlation between long load times and high bounce rates.

Stats via Think with Google, 2018

And speed is not an end in itself. The whole point of making a faster site via a PWA is to increase customer satisfaction, remove barriers to sales, and so increase conversions

The speed with which PWAs load, and the ease with which visitors can navigate around them, removes many of the common hurdles on the journey from landing page to cart to checkout. A generally better UX leads to happier, less frustrated site visitors, with more of them becoming customers (and repeat customers).

The two paths to headlessness

Of course, there are drawbacks to PWA headless commerce too. A progressive web app has the potential to be tricky to implement depending on the route you choose. Implementing requirements like service workers and finding the right framework — Next.js, Gatsby, React, Vue, Nuxt.js, Angular, so many to choose from(!) — is a challenge without a dedicated team of developers.

The explosion of interest in PWA technology has gone hand in hand with a proliferation of dev tools that facilitate their use. And with so many options, simply deciding which one is right for your site can become a mammoth challenge.

Added to this, the extra build-step can make some DTC brands hesitate. 

However, a frontend-as-a-service solution like Shogun Frontend bundles up the various dev tools required in a PWA site build end-to-end and makes them work for ecommerce brands in an accessible, low-to-no code environment.

Creating a bespoke solution can work for some brands who need the control, while for scaling DTC brands that want to focus on marketing rather than coding, a frontend-as-a-service can provide a bundled PWA storefront that takes the complex, modular development choices off your hands.

If you are a mobile-first brand that strives to give your customers the fast, rich, and smooth experience you know they deserve, then a PWA route to headless commerce can be a major step forward.

#cta-visual-fe#<cta-title>Build a Headless PWA for Your Brand<cta-title>See how Shogun Frontend can transform your site into a headless PWA.Learn more

Rhys Williams

Rhys is a writer specializing in enterprise software, ecommerce, and SaaS. He describes himself as a geek and a wordsmith and relishes making complex, technical topics come to life in easy-to-understand web copy.