PWA Kit Overview

This overview briefly introduces the main parts of the Progressive Web App (PWA) Kit architecture and provides you with helpful context for the rest of the product documentation.

The Retail React App is a server-side rendered React app that’s optimized for ecommerce. It gives you a starting point for building your storefront that already includes key features, such as:

  • Code bundling, code splitting, and transpilation
  • Component library with theming
  • JavaScript-based styling system (CSS in JS)
  • Scripts for automating routine development tasks
  • Service worker and manifest for Progressive Web App (PWA) features
  • Test suites

The Retail React App’s storefront includes standard ecommerce pages and functionality, such as product listing page (PLP), product details page (PDP), cart, and checkout. Every aspect of the storefront is designed to be enhanced and extended with your own code.

To learn more, checkout a demo of the Retail React App at pwa-kit.mobify-storefront.com or read the full architecture guide → The Retail React App.

A site created with PWA Kit is compatible with the following web browsers:

Operating SystemBrowsers
Android
  • Last two major versions of Chrome
  • Last two major versions of Samsung Internet
iOS
  • Last two major versions of Chrome
  • Last two major versions of Safari
Operating SystemBrowsers
macOS 10.10+
  • Last two major versions of Safari
  • Last two major versions of Firefox
Windows 8.1+
  • Last two major versions of Chrome
  • Last two major versions of Edge
  • Last two major versions of Firefox

For the best possible shopper experience, PWA Kit storefronts use a system for rendering and routing that runs the same source code in two different contexts: on the server side and on the client side. Server-side rendering optimizes for initial page loading speed, while client-side rendering enables a responsive user interface and smooth page transitions.

The rendering and routing system is established by the Retail React App with its Express server configuration and a hierarchy of React components. Within this system, you can:

  • Add new page components and modify existing page components
  • Supply data to page components from API requests or from user interaction
  • Define patterns for routing URL requests to page components
  • Customize the output of all pages

To learn more, read the full architecture guides → Rendering and Routing.

See Data and Analytics.

The PWA Kit is an open-source project hosted on GitHub.

The GitHub repository for PWA Kit is set up as a monorepo with several packages, including libraries, project templates, SDKs, and other tools.

To help you navigate the repository, here is an overview of each package that it contains:

PackageDescription
pwa-kit-create-appCreates PWA Kit projects based on project templates.
pwa-kit-devCommand-line tools to develop, build, and deploy PWA Kit projects.
pwa-kit-runtimeEnables Node.js applications to run on Managed Runtime.
pwa-kit-react-sdkUtilities that support the rendering pipeline.
commerce-sdk-reactReact hooks for interacting with the Salesforce B2C Commerce API
template-retail-react-appDefault template for starting projects.
template-typescript-minimalZero-configuration project template for TypeScript applications.
template-express-minimalBare-bones project template for apps running on Managed Runtime.

Security patches are provided for 24 months after the general availability of each major version of the PWA Kit SDKs (1.0, 2.0, and so on).

PWA Kit releases nightly builds on a nightly cadence for better visibility about upcoming features and a chance for implementers to test code integrations.

Nightly releases of PWA Kit packages are released to npm using the distribution tag nightly-next. The latest nightly-next tag can be viewed on npm.

These packages can be installed by running:

npm install <package-name>@nightly-next

As an example, to install the latest nightly build for @salesforce/commerce-sdk-react to your PWA Kit project, run:

npm install @salesforce/commerce-sdk-react@nightly-next

Do not use preview versions in production.

These builds are untested and unsupported. Some features included in the nightly builds may not be included in final PWA Kit releases. These unreleased builds may not even load, may have undocumented features, known defects, and any number of other issues. They are intended for use by developers and others wishing to get early access to planned PWA Kit features.