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 にアップグレードします。

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

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

• セッション チャーンを排除するために、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 ベースにしました。

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

• PWA Kit 用 SLAS の設定
• セッションブリッジの設定
• ルーティングの構成。段階的なヘッドレスロールアウト用の CDN API も参照してください。
• PWA Kit プロジェクトへのその他の変更点の追加

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

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

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

1. プロジェクト内のこれらのファイルと、このプルリクエストで変更されたファイルとの差分を確認します。

   • 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

2. プルリクエスト内の新しいコードと変更されたコードでプロジェクトを更新します。

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

1. 範囲 cartridges/plugin_slas/cartridge/controllers/Login.js:

   • /Login-Logoutコントローラーでログアウトした後、access_token Cookie を削除します
   • /Login-LogoutコントローラーのcookiesToRemove配列にconfig.ACCESS_TOKEN_COOKIE_NAMEを追加します。

2. cartridges/plugin_slas/cartridge/scripts/helpers/slasAuthHelper.jsで、removeCookie関数を更新して、既存の Cookie のチャンクをすべて削除します。

   • 条件を完全一致 ( == ) から.startsWithに変更します。

3. cartridges/plugin_slas/cartridge/scripts/hooks/request/onSession.jsで、新しいゲスト買い物客フローのonSessionフックの実装を更新します。

   • x-is-session_id headerからdwsidを変数に抽出します。
   • getSLASAccessTokenForGuestSessionBridgeへの呼び出しで変数を使用します。
   • 新規ゲスト買い物客への応答にdwsid Cookie を設定します。

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

1. PWA Kit がOCAPI /sessionsに電話をかけていないことを確認します。

   • ストアフロントに移動し、すべてのサイトデータを消去します。

     Chrome DevTools を使用している場合は、「すべてのキャッシュ データを削除する」を参照してください。

   • ストアフロントを更新するか、PWA Kit ベースの任意のページに移動して、Chrome DevTools の [ネットワーク] タブを調べます。「dw/shop/ /sessions」へのリクエストが表示されていないことを確認します。Chrome DevTools のこの例を参照してください。

2. すべての SCAPI リクエストでdwsidが送信されることを確認します。

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

• プラグイン SLAS を使用したハイブリッドストアフロントの構成
• 買い物カゴの作成と注文の確定
• B2C Commerce API 入門ガイド
• ハイブリッド認証を使用したハイブリッド ストアフロントの構成
• コンポーザブルストアフロントの使用開始