How to Launch a Progressive Web App as the First Step to a Headless Commerce Architecture
Written by Drew Lau, VP Product Management at Mobify — Progressive Web Apps (PWA) have overtaken responsive as the best web experience available today. Forrester analysts Michael Facemire and Ted Shadler stated, “PWAs provide the best of the native and web worlds: a great customer experience with the efficiency of building the web,” in their February 2019 report,It’s Time to Make Every Web Application a Progressive Web App [paywall].
So why doesn’t every retailer have a PWA yet? This is a symptom of a larger problem – retailers aren’t agile enough to keep up with changing shopper expectations, and constantly evolving customer experience technology.
A PWA can be the perfect first step to ‘going headless.’ A headless commerce architecture affords retailers the agility needed to stay at the forefront of the best digital experiences, and reduces the time and effort required to build and maintain amazing experiences for all shoppers. By launching a PWA that’s separated from the backend, retailers can get the benefits of a faster, revenue-generating PWA experience, as well as the benefits of a headless commerce architecture.
The Benefits of a Headless Commerce Architecture
A headless ecommerce architecture provides a clean separation between the customer-facing experience and all the backend business logic, enabling organizations to:
- Unlock agility.Separating the front-end enables faster customer experience innovation because it’s not locked into the same pace of change as backend systems. Since the deployments are smaller and less risky, retailers can do frequent UX experimentation and deployments to drive compounding value quickly.
- Future-proof customer experience investments. Decoupling the front-end experience ensures hard-fought wins and customer experience investments don’t need to be thrown out when it comes time for a replatform. This architecture enables teams to quickly adopt the latest web innovations, and continuously iterate, which can replace large website redesigns that need to start from scratch.
- Activate full value of CMS and ecommerce systems.The CMS and ecommerce platform are both crucial parts of creating immersive commerce experiences – but teams aren’t able to activate the full value if they have to force one application through the other to expose it on the front-end. With a headless architecture, teams can line them up side-by-side to equally expose both.
Launch a PWA as the First Step Towards Headless
Retailers can launch a PWA experience that’s separated from backend systems to achieve all the benefits of a headless approach. There are three routes to launching a ‘headless’ PWA – leveraging a vertically integrated PWA solution, building a custom PWA front-end from scratch, or building a PWA on a Front-end as a Service.
Launching a Vertically Integrated PWA
A vertically integrated solution is when a single vendor provides the backend platform, the front-end experience, and the APIs that separate the two. By relying on a single vendor, retailers are dependent on their roadmap and the speed at which they drive innovation – and as backend experts, they won’t drive the same speed of innovation on the front-end. As a result, the reference storefronts provided are primarily code examples and starting points, but not necessarily examples of how to create a great PWA experience.
Building a Custom PWA from Scratch
Due to the limitations of a vertically integrated solution, retailers will consider building a custom PWA front-end from scratch. This is perceived as the more flexible option, but in reality, most teams will spend their time building the foundation with frameworks, design systems, and components that don’t directly add business value. Building from scratch introduces risk and lengthy project timelines because it:
- Requires a lot of skilled resources that are in high demand and at a premium in retail (front-end engineers, DevOps teams, operations teams, API experts, AWS/Cloud experts)
- Introduces an opportunity cost as it takes time away from building out innovation and highly impactful unique experiences
- Comes with a lot of risk, which may be compounded by the risk you are incurring on other related initiatives like ecommerce replatform, CMS, OMS, etc.
Building a PWA on a Front-end as a Service
A Front-end as a Service like the Mobify Platform provides a PWA across all screens and separates the customer experience from the backend through an API layer, giving retailers the freedom to select best-of-breed solutions throughout the entire tech stack.
A Front-end as a Service provides the foundational technology without confining you to a rigid, or templated PWA solution. It’s so much faster than building from scratch because it includes the testing, build, deployment, and server side rendering infrastructure, as well as a pre-built and tested service worker and data layer.
A Phased Approach to ‘Going Headless’
By building a PWA on a Front-end as a Service, you can take phased approach to going headless rather than taking on a big, risky project.
A Front-end as a Service sits on top of backend systems to deliver a PWA experience on the front-end, so you can start with your highest traffic channel where there’s the biggest opportunity for improvement – i.e. mobile – and then extend. To start, you would use existing APIs or convert HTML into an API to pull content from the backend systems into a PWA on mobile, and continue to deliver the desktop and tablet experience from the ecommerce platform or CMS. This enables you to get get a PWA to market very quickly and generate an immediate mobile revenue boost.
Once you’re making more money on your highest traffic channel, you can extend the PWA experience across tablet and desktop, separating the entire front-end and gaining the agility of a headless commerce architecture.
PWA: A Better Experience & More Agility
Retailers need a headless commerce architecture to keep up in today’s retail landscape – and a PWA can be the first step in that direction. Not only will your customers get a better, faster experience, but your team will get the agility needed to stay at the forefront of the best digital experiences.
For a deeper dive on how to launch a PWA, download the Enterprise Guide to Delivering Commerce PWAs.
Mobify is a Front-end as a Service (FaaS) for building modern, customer-first shopping experiences through Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP), and native apps. Working as a seamless extension of ecommerce and IT teams, Mobify and its network of partners use the Mobify Platform to help retailers and brands drive immediate revenue with a friction-free shopping experience that’s up to 43% faster than previous generation mobile sites. The FaaS enables leading global brands to embrace a superior PWA experience on mobile, and then extend it across desktop, tablet, and other digital touchpoints. Mobify’s customers include digital innovators like Lancôme, Debenhams, Crabtree & Evelyn, Lilly Pulitzer, Payless Shoe Source, Carnival Cruise Line, US AutoParts, Hobbycraft, and PureFormulas. (source: https://www.mobify.com/press-release/mobify-and-coremedia-team-help-brands-create-faster-more-immersive-shopping-experiences/)