Hybrid Stability Upgrade for PWA Kit Version 2.x

This guide explains how to make and verify code changes in a hybrid storefront to:

Update a Progressive Web App (PWA) Kit project on version 2.8.4 or earlier to implement hybrid stability. This potentially improves the performance of baskets.
Upgrade from Plugin Shopper Login and API Access Service (Plugin SLAS) version 7.3.0 or later to version 7.4.0.

We recommend testing the steps in a non-production environment before deploying your changes to production.

Only existing customers can access some of the links on this page. Visit Salesforce Commerce Cloud GitHub Repositories and Access for information about how to get access to the repositories.

Tip

The steps in this guide apply to a hybrid storefront that uses Plugin SLAS. With B2C Commerce version 25.3, hybrid authentication (auth) replaces Plugin SLAS. For more information, see Configure a Hybrid Storefront with Hybrid Auth.
This guide applies to hybrid storefronts built in part with PWA Kit version 2.8.4 or earlier. For the steps that apply to PWA Kit version 3.x, see Hybrid Stability Upgrade for PWA Kit Version 3.8.0.

Note

What’s New

To improve stability and performance for hybrid storefronts, we:

Removed calls to OCAPI /sessions from PWA Kit to eliminate session churn (frequent changes to dwsid). For more information about dwsid, see Understand Session Management between SFRA and PWA Kit.
Added a header (sfdc_dwsid) to Salesforce Commerce API (SCAPI) calls to send the dwsid to SCAPI to ensure that requests from a given shopper session are routed to the same app server.
Removed the Open Commerce API (OCAPI) proxy from the PWA Kit configuration, which makes PWA Kit fully SCAPI-based.

If you haven’t already done so, complete these steps.

Open a support case that asks Salesforce Customer Support to enable Session Override for dwsid. In the support case:

Request to enable both parent and child toggles.
Mention your correct realm ID and tenant ID. If you don’t know your realm ID, ask your Account Executive or Customer Success Manager.

If you’re using PWA Kit version 2.8.4 or earlier, complete these steps in your project.

Check the diff between these files in your project and the files changed in this pull request.
- template-retail-react-app/app/commerce-api/auth.js
- template-retail-react-app/app/commerce-api/index.js
- template-retail-react-app/app/commerce-api/utils.js
Update your project with the new and changed code in the pull request.

If you’re using Plugin SLAS version 7.3.0 or later, complete these steps.

In cartridges/plugin_slas/cartridge/controllers/Login.js:
- Remove the access_token cookie after logout in the /Login-Logout controller
- Add config.ACCESS_TOKEN_COOKIE_NAME to the cookiesToRemove array in the /Login-Logout controller.
In cartridges/plugin_slas/cartridge/scripts/helpers/slasAuthHelper.js, update the removeCookie function to remove any existing chunks of cookies:
- Change the condition from exact match (==) to .startsWith.
In cartridges/plugin_slas/cartridge/scripts/hooks/request/onSession.js, update the onSession hook implementation for the new guest shopper flow:
- Extract the dwsid from x-is-session_id header into a variable.
- Use the variable in the call to getSLASAccessTokenForGuestSessionBridge.
- Set the dwsid cookie to the response for new guest shoppers.

See the files changed in this pull request.

Confirm that PWA Kit isn’t making calls to OCAPI /sessions.
- Go to your storefront and clear all site data.
  
  If you’re using Chrome DevTools, see Delete all cache data.
- Refresh your storefront or go to any page that’s PWA Kit-based and inspect the Network Tab in Chrome DevTools. Confirm that you don’t see requests being made to dw/shop/<version>/sessions. See this example from Chrome DevTools.

No Sessions

Confirm that dwsid is sent with all SCAPI requests.
- Go to your storefront. Visit any SFRA/SG-based page then go to a PWA Kit-based page.
- If you’re using Chrome DevTools:
  - Open Cookie Storage and look for dwsid value in the cookies. See Open the Cookies pane.
  - Open the Network Tab and inspect any SCAPI request (for example, /baskets). In the Request Headers, confirm that you see the sfdc_dwsid header with the value same as the dwsid that you found in the previous step. See this example from Chrome DevTools.

No Sessions