Build Modern Shopping Experiences with PWA Kit

The Progressive Web App (PWA) Kit is a new storefront technology for headless commerce using Salesforce Commerce APIs and React. It provides front-end developers with a more flexible and agile approach to build and maintain modern shopping experiences. This release focuses on localization updates and improvements related to SEO, performance, and shopper experience.

Where: Available to all Salesforce B2C Commerce customers.

When: January 6th, 2022

Why: Each change has a numbered link to the relevant pull request in the open-source repository.

Changes

• Locale-based URLs. You can include the locale in the URL path or as a query parameter using the new configuration in pwa-kit-config.json. #228 #255
• All configuration options related to the Commerce API and the Einstein API that were previously in commerce-api.config.js and einstein-api.config.js are now in one file: api.config.js. #256
• The new DynamicImage component can transform your images by mapping an array of widths to the corresponding sizes and srcSet attributes. This component also makes it easier to use the Dynamic Imaging Service. #186
• The query parameters mobify_server_only and mobify_pretty used for debugging are now called __server_only and __pretty_print. The old query parameters are deprecated but still work. #250
• New id and defaultMessage parameters to enable translation for the Retail React App. #195 #207 #239 #252 #260
• New example product scroller on the home page of the Retail React App. #218 #208 #216
• The outputDir option for the npx pwa-kit-create-app script defaults to pwa-kit-starter-project instead of generated-project. #268
• The Seo component now fetches the default site title from pages/constants.js. #279
• The createApp function takes a new option called enableLegacyRemoteProxying that defaults to true. When set to false, local development proxying is disabled when running remotely. In future, local development proxying will be disabled when running remotely. #205
• More informative error output when the locale configured in PWA kit doesn’t match the one in Business Manager. #225
• Error messages point to the latest documentation and help topics. #268
• New and updated tests for search pages. #245

Bug Fixes

• Promotion codes appear in uppercase in order summary. #224
• Order summary prices on checkout page misaligned on mobile. #233
• Shipping method description overflows the price section. #232
• Stack trace data and SSR options are visible on error pages when viewing page source. #230 #249
• Incorrect prop warning for section subtitle. #282
• Incorrect repository URL in the NPM registry. #257

Security Updates

• Set common HTTP security headers in the Retail React App. #263
• Remove upgrade-insecure-requests for local development. #270

Full changelog v1.2.0...v1.3.0

How: The PWA Kit is available as an open-source project on GitHub. To get started, see the documentation on the Salesforce Developers site.