How to launch a progressive web app as the first step to a headless commerce architecture

Progressive web apps (PWAs) deliver some of the best web experiences available today. So, why doesn’t every retailer have a PWA yet? This is a symptom of a larger challenge — retailers must be agile enough to keep up with continually changing shopper expectations and constantly evolving customer experience technology. That's where headless technology — and by extension composable commerce — comes in.

What is a PWA?

A PWA is a type of application software delivered through the web, built using common web technologies such as HTML, CSS and JavaScript. The term "progressive" signifies that PWAs are designed to work across different devices and user capabilities. The concept of PWAs was introduced to combine the best features of the web and mobile applications. They aim to bridge the gap between traditional websites and native mobile apps, providing a seamless and engaging experience for users across various platforms. PWAs offer advantages, such as faster loading times, offline functionality and improved user engagement, making them a popular choice for modern web development.

Forrester Consulting found a significant shift in global web traffic toward mobile devices. In response, businesses are redirecting their focus from traditional websites to apps, recognizing the enhanced content delivery and user engagement offered by apps. Furthermore, Gartner analyst, Jason Wong, predicts a substantial impact of low-code application development, projecting that over 65% of application development activity will be driven by this approach by 2024. Wong emphasizes that PWAs represent the future of desktop and mobile web experiences, urging application leaders to incorporate PWAs strategically into their mobile development plans to effectively bridge the web experience with native app functionality.

Here are some key characteristics and features of PWAs:

• Responsive: Can adapt to different screen sizes, providing a consistent user experience on desktops, tablets and mobile devices.
• Connectivity-independent: Can work even when the device is offline or has a slow or unreliable network connection. They use service workers to cache content and functionality, allowing users to access certain features without an internet connection.
• App-like experience: Provides features such as smooth animations, navigation and interactions. This is achieved through the use of modern web technologies and design principles.
• Discoverable: Can be found by search engines and can be indexed, making them findable through search results. Users can also add PWAs to their home screens, making them easily accessible.
• Easily installable: Users have the option to install PWAs on their devices, creating an icon on the home screen and enabling a more app-like launch experience. This is done without the need to go through traditional app stores.
• Secure: PWAs are served over HTTPS, ensuring a secure connection between the user and the application. This is crucial for protecting sensitive information and maintaining user trust.
• Always updated: PWAs are always up-to-date due to the use of service workers (a type of script that runs in the background of PWAs), which update content and features in the background. Users don't need to manually update the app.
• Linkable: PWAs are easily shareable through URLs. Users can share links to specific content or features within the app, enhancing the app's social and viral aspects.

Launching a PWA as the first step toward going headless

A headless eCommerce architecture facilitates a distinct separation between customer-facing experiences and backend business logic, providing several advantages. Firstly, it unlocks agility by allowing faster innovation in the customer experience, as the frontend is not tied to the slower pace of backend systems. 

This separation also future-proofs customer experience investments, preventing the need to discard hard-earned gains during replatforming. Additionally, a headless approach enables teams to fully leverage the value of content management systems (CMS) and eCommerce systems by aligning them side-by-side on the frontend, enhancing the overall immersive commerce experience.

If you want to go headless, introducing a PWA is the perfect first step.There are three routes to launching a headless PWA: Leveraging a vertically integrated PWA solution, building a custom PWA frontend from scratch, or building a PWA on a frontend-as-a-service (FEaaS). Let’s explore these three options  in more detail below.

Option 1: Launching a vertically integrated PWA

A vertically integrated solution is when a single vendor provides the backend platform, the frontend 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. Another issue is that you’re relying on backend experts; hence, they won’t drive the same speed of innovation on the frontend. 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.

Option 2: Building a custom PWA from scratch

Due to the limitations of a vertically integrated solution, many retailers consider building a custom PWA frontend 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 (frontend 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 risks, which may be compounded by the risk you are incurring on other related initiatives like eCommerce replatform, CMS, OMS, etc.

Option 3: Building a PWA on an FEaaS

An FEaaS, like commercetools Frontend, 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.

An FEaaS 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.

Read more about using an FEaaS to build a PWA

Using commercetools Frontend to build a PWA

commercetools Frontend delivers your site as a PWA, ensuring an app-like experience optimized for performance and speed. It emphasizes the importance of understanding user interactions for PWA optimization, offering a comprehensive tooling package for both business users and developers to create, enhance and customize their digital storefronts. 

This composable frontend solution manages the entire lifecycle of digital storefronts, providing developer tooling, a no-code business tool (Frontend Studio), an API hub for seamless synchronization between backend and frontends, and efficient delivery of fast, reliable and secure shopping experiences through Google Cloud and Netlify. The solution is designed to enhance digital presence, SEO rankings and conversion rates while aligning with the principles of composable commerce.

The impact of PWAs on CHRONEXT's CX journey

With commercetools Composable Commerce and Frontend, CHRONEXT, a luxury watches platform, switched from a rigid and difficult-to-use monolithic architecture to a flexible, modern webshop solution. The phased rollout of PWAs for all site domains enhanced user engagement with quick loading times and a user-friendly experience, plus CHRONEXT successfully created a visually appealing platform that emphasized its love for luxury watches. This has impacted buying conversions with an increase of more than 10% since the relaunch, which completely exceeded the company's expectations. The buying conversions continue to rise since teams can keep optimizing their frontend platform quickly and easily.

The CHRONEXT marketing team leverages the Frontend Studio to swiftly and independently build pages without relying on developers. This streamlined approach enables various departments to modify almost every aspect of the page, including product details, SEO content and checkout pages. Business users at CHRONEXT can implement changes without IT involvement, leading to significant time savings for both teams. 

This efficiency has resulted in impressive outcomes, such as: 

• Launching a new country site within two weeks.
• Achieving a 300% faster website.
• Optimizing frontend capabilities with improved efficiency.
• Attaining 40% better SEO rankings.
• Executing new website releases seamlessly without downtime. 
• Boosting developer productivity by 80%.

PWAs: An improved experience with more agility

Retailers need a headless and composable 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.

To learn more about headless frontends, download our white paper An Introduction to Frontend for Headless Technology Guide.