PWA Kit バージョン 2.x のハイブリッド安定性アップグレード

このガイドでは、ハイブリッドストアフロントでコード変更を行い、検証する方法について説明します。

バージョン 2.8.4 以前の Progressive Web App (PWA) Kit プロジェクトを更新して、ハイブリッド安定性を実装します。これにより、買い物カゴのパフォーマンスが向上する可能性があります。
Plugin Shopper Login and API Access Service (Plugin SLAS) バージョン 7.3.0 以降からバージョン 7.4.0 にアップグレードします。

変更を本番環境にデプロイする前に、非本番環境で手順をテストすることをお勧めします。

このページ内のリンクには、既存のお客様のみがアクセスできるものがあります。Commerce Cloud リポジトリにアクセスする方法については Salesforce Commerce Cloud GitHub リポジトリとアクセスを参照してください。

Tip

このガイドの手順は、プラグイン SLASを使用するハイブリッドストアフロントに適用されます。B2C Commerce バージョン 25.3 では、プラグイン SLAS がハイブリッド認証 (auth) に置き換わります。詳細については、「ハイブリッド認証を使用したハイブリッドストアフロントの構成」を参照してください。
このガイドは、PWA Kit バージョン 2.8.4 以前で部分的に構築されたハイブリッドストアフロントに適用されます。PWA Kit バージョン 3.x に適用される手順については、「PWA Kit バージョン 3.8.0 のハイブリッド安定性アップグレード」を参照してください。

Note

新機能

ハイブリッドストアフロントの安定性とパフォーマンスを向上させるために、マイクロソフトは以下を行います。

セッションチャーンを排除するために、PWA Kit からOCAPI /sessionsへの呼び出しを削除しました ( dwsidへの頻繁な変更)。dwsidの詳細については、「SFRA と PWA Kit 間のセッション管理について」を参照してください。
Salesforce Commerce API (SCAPI) 呼び出しにヘッダー ( sfdc_dwsid ) を追加して、dwsidを SCAPI に送信し、特定の買い物客セッションからのリクエストが同じアプリサーバーにルーティングされるようにしました。
PWA Kit 構成から Open Commerce API (OCAPI) プロキシを削除し、PWA Kit を完全に SCAPI ベースにしました。

まだ行っていない場合は、次の手順を実行します。

dwsid のセッション上書きを有効にするよう Salesforce カスタマーサポートに依頼するサポートケースを開きます。サポートケースでは、次のようになります。

親と子の両方のトグルを有効にするように要求します。
正しいレルム ID とテナント ID を指定します。レルム ID がわからない場合は、アカウントエグゼクティブまたはカスタマーサクセスマネージャーに問い合わせてくださいCustomer Success Manager。

PWA Kit バージョン 2.8.4 以前を使用している場合は、プロジェクトで次の手順を実行します。

プロジェクト内のこれらのファイルと、このプルリクエストで変更されたファイルとの差分を確認します。
- 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
プルリクエスト内の新しいコードと変更されたコードでプロジェクトを更新します。

プラグイン SLAS バージョン 7.3.0 以降を使用している場合は、次の手順を実行します。

範囲 cartridges/plugin_slas/cartridge/controllers/Login.js:
- /Login-Logoutコントローラーでログアウトした後、access_token Cookie を削除します
- /Login-LogoutコントローラーのcookiesToRemove配列にconfig.ACCESS_TOKEN_COOKIE_NAMEを追加します。
cartridges/plugin_slas/cartridge/scripts/helpers/slasAuthHelper.jsで、removeCookie関数を更新して、既存の Cookie のチャンクをすべて削除します。
- 条件を完全一致 ( == ) から.startsWithに変更します。
cartridges/plugin_slas/cartridge/scripts/hooks/request/onSession.jsで、新しいゲスト買い物客フローのonSessionフックの実装を更新します。
- x-is-session_id headerからdwsidを変数に抽出します。
- getSLASAccessTokenForGuestSessionBridgeへの呼び出しで変数を使用します。
- 新規ゲスト買い物客への応答にdwsid Cookie を設定します。

このプルリクエストで変更されたファイルを参照してください。

PWA Kit がOCAPI /sessionsに電話をかけていないことを確認します。
- ストアフロントに移動し、すべてのサイトデータを消去します。
  
  Chrome DevTools を使用している場合は、「すべてのキャッシュデータを削除する」を参照してください。
- ストアフロントを更新するか、PWA Kit ベースの任意のページに移動して、Chrome DevTools の [ネットワーク] タブを調べます。「dw/shop/ /sessions」へのリクエストが表示されていないことを確認します。Chrome DevTools のこの例を参照してください。

セッションなし

すべての SCAPI リクエストでdwsidが送信されることを確認します。
- ストアフロントに移動します。SFRA/SGベースのページにアクセスし、PWA Kitベースのページに移動します。
- Chrome DevTools を使用している場合:
  - Cookieストレージを開きdwsid Cookieの値を探します。「Cookie ペインを開く」を参照してください。
  - 「ネットワーク」タブを開き、SCAPI リクエスト ( /basketsなど) を検査します。[Request Headers] に、前の手順で見つけたdwsidと同じ値を持つsfdc_dwsidヘッダーが表示されていることを確認します。Chrome DevTools のこの例を参照してください。

セッションなし