Back to All Stories

Last October, we outlined what a Progressive Web App (PWA) is and how it helps retailers and brands deliver the fast experience of a native mobile app to a much larger audience on the web. Now, we’ll cover how to deliver a PWA based on your organization’s ecommerce architecture and strategic objectives on the Salesforce Commerce platform.

Let’s dive in.

A commerce platform provides many paths to ecommerce success

For modern commerce leaders, keeping pace with the explosion of new channels and maintaining a world-class customer experience is the key to sustainable growth. Brands must deliver top-shelf shopping experiences to their owned sites and apps as well as all the channels and ways in which consumers interact with them.

Leading commerce organizations have responded to this shift with a platform-led approach. This means that rather than optimizing for owned sites and apps, companies build their commerce strategy around a core set of commerce data and services. These services can be embedded into any channel or experience, wherever a consumer discovers new products or makes purchases.

The Salesforce Commerce Platform, backed by the world’s #1 CRM, is a flexible solution that offers brands multiple ways to imagine, build, and deliver commerce experiences. The Commerce Platform provides brands with an array of templates and APIs to optimize any customer journey.

 

 

Salesforce presents three ways to connect commerce to every experience:

  • Commerce-led experiences: Speed-to-market with an expertly designed comprehensive commerce suite.

  • Integrated experiences: Mix third-party systems and custom apps to create integrated commerce solutions.

  • API-led experiences: Maximize flexibility with commerce APIs and a platform of developer tools.

 

The best way to build a PWA depends on which of these architectures you follow, as well as your organizational goals.

How to build a PWA with a commerce-led experience

If your front-end experience is delivered through Commerce Cloud, then you fall under the commerce-led experience category. There are two options here: building a PWA from scratch directly on SiteGenesis or Storefront Reference Architecture (SFRA), or building it on a Front-end as a Service that integrates with Commerce Cloud.


Building a PWA on SiteGenesis or SFRA

Customers planning to launch a PWA on Commerce Cloud can decide between enhancing the existing website or building a dedicated PWA, which targets user experience expected on mobile platforms.

Launching a dedicated, high-quality PWA is similar to launching a Single Page Application experience like the team at Burton did with their multi-year journey with Salesforce Commerce Cloud.

The reason for the long journey is that technical teams decided to build a new app-like custom front-end from scratch. This required adding PWA dependencies like Service Workers, Web Manifests and HTTPs everywhere, as well as rewriting common cartridge integrations to work with the new custom front-end.  

It requires a single team of experts to handle complexities around, integration, backend, SEO, and frontend, and needs to keep up with the next iteration of PWAs.

Because these technical challenges can make for a complex and often lengthy project that could impact business objectives, it’s important to consider the implications:

  • It requires skilled resources that are in high demand and at a premium in retail (front-end engineers, DevOps teams, operations teams, API experts).

  • There’s an opportunity cost as it takes time away from building out innovation and highly impactful unique experiences.

  • It introduces a lot of risk, which may be compounded by risk already incurred through related initiatives like a CMS or OMS.

  • Launching a PWA is only half the battle; there are also maintenance, evolution, and ongoing integration efforts to consider.


Building a PWA on a Front-end as a Service

You could launch a PWA up to 4x faster by building it on Mobify's Front-end as a Service that includes a certified Salesforce Commerce Cloud connector for easy integration.

A Front-end as a Service provides the foundational technology without confining you to a rigid, or templated PWA solution. It’s 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.

The Front-end as a Service sits on top of Commerce Cloud to deliver a PWA on mobile devices, while the desktop experience would still come from Commerce Cloud. You would use existing APIs or convert HTML into an API to pull content from Commerce Cloud into the PWA experience. With this approach, you can get a PWA to market very quickly to generate an immediate mobile revenue boost.

 

 

How to build a PWA with an integrated experience

If your front-end experience is delivered through your CMS, then building a PWA would be very similar to a commerce-led environment. The APIs would simply pull content from the CMS instead of the commerce platform into a PWA on mobile and tablet.

 

 

The separation between the front-end and backend allows frequent UX experimentation and deployments at scale, as well as quick adoption of the latest web innovations. By leveraging a Front-end as a Service in a commerce-led or integrated environment, you can move faster on mobile and tablet, but if you want to unlock agility across your organization, then an API first experience will be the best fit for your business.

 

How to deliver a PWA with an API-led experience

By leveraging a Front-end as a Service to build a PWA across all screens, you can separate your entire customer-facing experience from your backend to unlock agility across your organization. This architecture also activates the full value of your Commerce Cloud instance and CMS. Both platforms are crucial to delivering the best customer experience possible, and by lining them up side-by-side you can leverage their full functionality.

 

 

This approach will also result in the fastest experience as not all PWAs are created equal when it comes to speed. An API-led approach defers and reduces the total amount of data being sent to the device to ensure the PWA is as fast as possible, especially on mobile devices.

 

The best fit for your organization

Building a PWA with a Front-end as a Service provides the foundational technology to get a high-performing PWA to market quickly, as well as the tools and infrastructure to ensure ongoing maintenance, evolution, and integration efforts don’t eat away at time that could be spent innovating your customer experience.

Where you begin this journey really depends on your current architecture — even if your ultimate goal is an API-led experience, you don’t need to start there. Start with a PWA on mobile to quickly get a faster, revenue-generating experience up on your highest traffic channel. Then you can take a phased approach to extend your PWA across all screens and get the additional benefits of an API-led experience.


For a deeper dive on how to deliver PWAs across all three different architectures, check out the Enterprise Guide to Delivering Commerce PWAs.