Building Modern Shopping Experiences with Salesforce Commerce PWA Kit

In today’s fast-paced e-commerce world, online businesses need to offer fast, easy-to-use, and engaging shopping experiences to attract and retain customers. However, building and maintaining feature-rich native apps for various platforms can be costly and time-consuming. This is where Progressive Web Apps (PWAs) come in to save the day.

Salesforce Commerce Cloud offers the PWA Kit, a toolset that helps developers quickly create PWA storefronts delivering app-like experiences on the web. In this article, we’ll explore what the Salesforce Commerce PWA Kit is, its features, benefits, and how to use it to build a modern omnichannel shopping experience.

What is Salesforce Commerce PWA Kit?

The Salesforce Commerce PWA Kit is an open-source JavaScript framework designed to help developers build PWA storefronts for Commerce Cloud. It is built using React and provides all the necessary tools to create, develop, and deploy PWAs that take full advantage of Commerce Cloud’s API capabilities.

Main Goals of PWA Kit

The main objectives of Salesforce’s PWA Kit are:

Faster time-to-market: Get new storefronts live quickly without starting from scratch each time.
Flexibility: Customize the shopping experience using any UI framework.
Leverage Commerce Cloud’s scalability: Tap into the power of Salesforce’s reliable and scalable platform.
Follow PWA best practices: Ensure your storefront offers fast and engaging shopping experiences that feel like an app.

Key Features and Benefits

Here’s a breakdown of the standout features and advantages of the Salesforce Commerce PWA Kit:

1. Streamlined Development Workflow

pwa-kit-create-app: This tool helps developers quickly set up a new project using a starter template, which already includes integrations with Commerce Cloud and follows PWA best practices.
pwa-kit-dev: This package includes a development server with features like hot reloading and source maps, making it faster and easier to iterate and test your storefront.
Managed Hosting: Deploy your PWA storefront to Managed Runtime, a secure, scalable cloud hosting service provided by Commerce Cloud.

2. Commerce Capabilities

The commerce-sdk-react package enables easy integration with Commerce Cloud’s APIs, providing hooks for key commerce features such as:

Customer information
Cart management
Product catalog
Pricing and promotions

For example, you can fetch product data easily using the following code snippet:

const {data} = useShopperProducts({
  variables: {
    first: 12
  }
})

Similarly, you can manage the shopping cart with code like this:

const [addItemToCart] = useAddItemToCart()
const [updateCart] = useUpdateCart()

3. Progressive Web App (PWA) Features

Salesforce’s PWA Kit leverages the latest web technologies to create engaging and app-like experiences, including:

Offline access using service workers, allowing customers to continue browsing even without an internet connection.
Push notifications to keep customers updated on new offers and product updates.
Add to Home Screen functionality, enabling users to easily install your PWA on their devices.
Responsive design and mobile optimization, ensuring your storefront looks great on any device.

4. Performance Optimizations

To provide users with fast browsing experiences, PWA Kit includes performance best practices such as:

Code splitting and dynamic imports to load only the necessary code.
Lazy loading of components for faster page loading.
Image optimization to speed up the user experience.
Caching and prefetching to ensure fast load times, even on slow networks.

This ensures a smoother, faster experience for users, especially when they have limited bandwidth.

5. Flexibility for Developers

Developers can choose the front-end technology they are most comfortable with. PWA Kit works seamlessly with popular JavaScript frameworks like React, Angular, and Vue, allowing teams to reuse existing code. Additionally, it supports integration with third-party tools, including:

Payments: Stripe, PayPal, etc.
Reviews: Trustpilot, Yotpo.
Personalization, Analytics, SSO (Single Sign-On), CDNs, and more.

This flexibility allows businesses to create a truly custom shopping experience while integrating essential features.

How to Get Started with PWA Kit

Now, let’s walk through the steps to create and run a new PWA project using the template-retail-react-app template provided by Salesforce.

Step 1: Install Requirements

To get started, make sure you have Node.js version 18+ and npm version 9+ installed on your computer. You will also need access to a Commerce Cloud sandbox to test the app.

Step 2: Scaffold a New Project

Run the following command to create a new project using the template:

npx @salesforce/pwa-kit-create-app

Step 3: Configure Sandbox Settings

You’ll need to provide your Commerce Cloud sandbox credentials such as the hostname, site ID, and API key. These will be saved in an .env file for easy configuration.

Step 4: Install Dependencies

Next, install all the necessary dependencies by running:

npm install

Step 5: Start the Development Server

Now that the dependencies are installed, start the development server with this command:

npm start

This will launch your app locally on localhost:3000, with hot reloading enabled for fast development.

Step 6: Start Developing!

You can now customize the storefront on your local server. Some ideas for customization include:

Changing the homepage layout.
Modifying the product listing or product detail pages (PDP).
Adding new pages such as FAQ, Account, or custom content pages.
Adjusting styles, components, and the overall theme.
Setting up translations and localization for international customers.
Integrating features like payments, reviews, or user authentication.

Step 7: Simulate PWA Features

To test PWA features like offline functionality or push notifications, use tools such as Workbox or Chrome’s dev tools to simulate different network conditions and offline scenarios.

Step 8: Build and Deploy

Once your storefront is ready for production, build and deploy your app using this command:

npm run push -- -m "v1.0"

This will push your PWA storefront to Managed Runtime, enabling features like secure hosting, automatic scaling, and improved security.

Why Choose Salesforce Commerce PWA Kit?

Here are some compelling reasons why Salesforce’s PWA Kit is a top choice for building storefronts on Commerce Cloud:

Faster Time-to-Market: The PWA Kit provides all the tools you need to launch your store quickly.
Reuse Existing Skills: Developers can use existing skills with frameworks like React, Angular, and Vue, avoiding the need to learn proprietary stacks.
Cost Efficiency: Build a single PWA storefront that works across multiple platforms, saving the cost of developing and maintaining separate native apps.
User Engagement: Offer an app-like experience directly on the web, improving customer satisfaction and conversion rates.
Customization and Flexibility: With full control over the front-end, you can create a truly unique shopping experience.
Scalability: Leverage the enterprise-grade capabilities of Commerce Cloud for reliability and security.
Omnichannel Experience: Provide a seamless shopping experience across web, mobile, and other platforms.

Conclusion

The Salesforce Commerce PWA Kit provides an ideal solution for creating fast, responsive, and engaging shopping experiences on the web. By leveraging modern web technologies, best practices for PWAs, and the robust capabilities of Salesforce Commerce Cloud, businesses can deliver high-quality, app-like storefronts that work seamlessly across devices.

With its flexibility, developer-friendly tools, and omnichannel capabilities, the PWA Kit is the perfect solution for building the next generation of e-commerce storefronts. Whether you’re a developer looking to save time or a business aiming to boost conversions, Salesforce Commerce PWA Kit can help you build a top-tier shopping experience.