Understanding PWA and Headless Commerce

Every eCommerce manager wants to engage more consumers and increase conversions, but in order to do that you need to keep up with the ever-changing habits of the consumer.

Gone are the days when people shopped exclusively via their laptops. Today, consumers are more likely to rely on their mobile devices to shop. Additionally, a growing number prefer to buy while browsing Instagram or Facebook — bypassing the site visit and checkout process altogether. According to a recent survey, 54% of shoppers say they made a purchase after seeing an item on Instagram, which explains why social commerce will grow 34% in 2021.

These new shopping behaviors pose many challenges for site owners. Page loads on a mobile device can take forever, especially if the consumer is out and about and far from Wi-Fi. A frustrating experience will prompt visitors to abandon your site, and potentially your brand. And how do you sell to customers who have no interest in leaving their Instagram and Facebook session, or some other channel that will grow in popularity over in the years to come?

Fortunately, over the past few years two new approaches to eCommerce have emerged that can help you adapt to evolving consumer behavior: progressive web app (PWA) and headless commerce.

Progressive Web APP (PWA)

Everyone knows that apps are much easier to use, but let’s face it, they can be a lot of work for both the site owner and the user. As the store owner, you’ll need to design, build, and test the app for all desktop and mobile environments, and submit it to the app stores. Next, you’ll need to launch a UA campaign so that consumers will install them. And you’ll need to update the app periodically, resubmit it to the app stores, and hope that your users will agree to re-install, rather than uninstall your app (research shows that over 25% of all apps are uninstalled after 30 days!).

These thorny issues are precisely where PWA shines. PWA lets you provide your users with an app-like experience, without the inconvenience of actually installing it or updating it regularly. All they need to do is visit your eCommerce site via their preferred device and that app-like experience is automatic.

So what is PWA exactly? It’s a method of website development that uses web browser APIs and other features (discussed below), along traditional web technologies, such as HTML, CSS, and JavaScript to deliver a native app-like user experience to the web and mobile web.

There are three requirements to meet in order for your web app to be PWA:

1. Secure Context (i.e. https) in order to establish your web app as a trusted site, an essential criteria if you want users to feel safe buying from your store.
2. Service workers, which are scripts that work in the background of the user’s browser doing tasks like handling network requests and caching a wide range of items locally (images, pages, etc.). Service workers speed up page loads and have the added advantage of providing uninterrupted experiences for users in the event they’re bumped off the Internet for whatever reason (like going through a tunnel while riding a train).
3. Web app manifest, which is a file that contains all the information about your web app that users can opt to install on the home screens of their mobile phone, tablet, or computer. Think of it like an icon for an app, only it’s an icon for your PWA-enabled site.

Combined, these features make your website feel like an app.

Key Benefits of PWA

• Operational efficiencies. Unlike building a traditional app, PWA lets you build your web app once and deploy it anywhere: desktop, mobile, iOS, Android, Windows Mobile, and so on. PWA is also highly responsive which means it can adapt to any screen size automatically. And because you essentially turn your eCommerce site into an app, you’ll have fewer code-bases to maintain.
• Higher user engagement. There are several ways that PWA makes websites stickier, and that starts with the web app manifest, aka the “add to home screen” feature. Consumers will be reminded of your brand — and how easy it is to shop with you — whenever they look at their home screen. Plus, it has all of the features of native apps that help you re-engage users, including push notifications and offline support.
• Faster load times. Users get frustrated when pages take too long to load, and PWA goes a long way in eliminating that frustration. Faster load times also promote product discovery, upsells, and cross sells, and can drive better lifetime value among your customers.

Headless Commerce

In a traditional eCommerce environment, the frontend of the site is tightly integrated with the backend, which was fine when consumers mostly visited your site in order to make a purchase and hyper-fresh content wasn’t as critical as it is today.

But as we said earlier, consumer behavior has changed, and eCommerce brands need to keep up with those changes. Headless commerce is all about flexibility.

In a nutshell, headless commerce decouples the front end of your eCommerce shop from the backend, or as Magento explains it, your “content presentation layer (content and experience management systems) is separated from the business logic and functional layer (existing eCommerce stack, integration, and commerce management).”

So why would you want to decouple the front end and backend of your site? First and foremost, headless commerce allows you to update the customer-facing elements of your sites quickly and easily — and without engaging a costly developer. You’re free to make as many enhancements as you wish, and test which ones deliver the best results for your customer base.

Headless commerce also allows you to meet the customer in whichever channel they prefer to shop, including social media. You can present the consumer with an ad, and allow him or her to complete the purchase without ever leaving that channel.

The best way to think of headless commerce is to think of it as future-proofing your brand. There’s a whole generation of consumers who have grown up (or will grow up) outside of the traditional shopping-cart paradigm. Already we see commerce fully integrated with news and information sites, social media, YouTube videos, and so on. Purchasing is never more than a click away.

Take, for instance, NBCUniversal Checkout, which is a commerce engine that “grants any business—local or national—the ability to set up shop within NBCUniversal’s ecosystem at mass scale.” Within time, consumers of all ages will learn that they don’t need to visit an actual eCommerce store to purchase something that catches their eye; they can simply buy from within whichever channel they happen to be. Ultimately, it’s headless commerce that will enable this new shopping paradigm.

The Future is Now

Although the use cases are new, the underlying technologies that power PWA and headless commerce are not. Every quarter we see more brands deploy these approaches to capture the consumer’s attention and share of wallet, and those that don’t may be putting their long-term viability at risk. Fortunately, PWA and headless commerce aren’t rocket science, they’re just careful approaches to presenting your brand to consumers in friendlier and more flexible ways.

Talk to a PWA Expert

Need more information on PWA development and headless commerce? Contact us or learn more about our PWA solution.