PWA Kit の概要
この概要では、PWA Kit アーキテクチャの主要部分について紹介します。製品の残りのドキュメントに関する有用なコンテキストも含まれています。
Retail React App はサーバー側でレンダリングされる React アプリで、e コマース用に最適化されています。次のような主要機能がすでに含まれており、ストアフロント作成のスタート地点として利用できます:
- コードのバンドル、コードの分割、およびトランスパイル
- テーマ設定をもつコンポーネントライブラリ
- JavaScript ベースのスタイリングシステム (JS の CSS)
- 定期的な開発タスクの自動化のためのスクリプト
- Progressive Web App (PWA) 機能のための Service Worker と Manifest
- テストスイート
Retail React App のストアフロントには、商品一覧ページ (PLP) や商品詳細ページ (PDP)、買い物カゴ、注文手続きなど、標準の e コマースのページや機能が含まれています。ストアフロントは、独自のコードで強化や拡張が可能なように設計されています。
詳細については、pwa-kit.mobify-storefront.com で Retail React App のデモをチェックするか、完全なアーキテクチャガイドの Retail React App をご覧ください。
買い物客に最善の体験を提供するために、PWA Kit ストアフロントは、サーバー側とクライアント側の 2 つの異なるコンテキストで同じソースコードを実行する、レンダリングとルーティングのシステムを使用しています。サーバー側のレンダリングは初期のページ読み込み速度を最適化し、クライアント側のレンダリングはレスポンシブなユーザーインターフェイスとスムーズなページの移行を可能にします。
このレンダリングとルーティングのシステムは、Retail React App によって Express サーバー構成と React コンポーネントの階層を使用して確立されます。このシステム内では以下を実行できます:
- 新規ページコンポーネントの追加および既存のページコンポーネントの変更
- API リクエストまたはユーザー操作からのページコンポーネントへのデータの提供
- URL リクエストからページコンポーネントへのルーティングパターンの定義
- すべてのページの出力のカスタマイズ
詳細については、完全なアーキテクチャガイドのレンダリングとルーティングを参照してください。
PWA Kit のストアフロントでは、Einstein Activities を使用してユーザー体験を強化し、Reports & Dashboards でレポートデータを提供します。
Einstein アクティビティベースの Report & Dashboards を有効にするには、Business Manager で有効にする必要があります。
PWA Kit は GitHub でホストされるオープンソースプロジェクトです。
PWA Kit の GitHub リポジトリは、ライブラリ、プロジェクトテンプレート、SDK、その他のツールを含むいくつかのパッケージで構成される monorepo として設定されます。
リポジトリのナビゲーションに役立つよう、構成要素の各パッケージの概要を説明します。
| パッケージ | 説明 |
|---|---|
| pwa-kit-create-app | プロジェクトテンプレートに基づいて PWA Kit プロジェクトを作成。 |
| pwa-kit-dev | PWA Kit プロジェクトを開発、ビルド、デプロイするためのコマンドラインツール。 |
| pwa-kit-runtime | Managed Runtime 上で Node.js アプリケーションを実行。 |
| pwa-kit-react-sdk | レンダリングパイプラインをサポートするユーティリティ。 |
| commerce-sdk-react | Salesforce B2C Commerce API と対話するための React フック。 |
| template-retail-react-app | プロジェクトを開始するためのデフォルトのテンプレート。 |
| template-typescript-minimal | TypeScript アプリケーション用のゼロ構成プロジェクトテンプレート。 |
| template-express-minimal | Managed Runtime 上で実行されるアプリ用の基本的なプロジェクトテンプレート。 |
セキュリティパッチは、PWA Kit SDK の各メジャーバージョン (1.0、2.0 など) が一般公開されてから 24 か月の間提供されます。
PWA Kit は、今後の機能について可視性を高め、実装者がテストコードのインテグレーションの機会を得られるよう、ナイトリービルドを毎晩リリースします。
PWA Kit パッケージのナイトリーリリースは、配布タグ nightly-next を使用して npm にリリースされます。最新の nightly-next タグは、npm で確認できます。
これらのパッケージは、以下を実行してインストールできます。
npm install <package-name>@nightly-next
たとえば、@salesforce/commerce-sdk-react の最新のナイトリービルドを PWA Kit プロジェクトにインストールするには、以下のコマンドを実行します。
npm install @salesforce/commerce-sdk-react@nightly-next
Production (本番) 環境ではプレビューバージョンを使用しないでください。
これらのビルドはテストされておらず、サポートされません。ナイトリービルドに含まれる一部の機能は、最終的な PWA Kit リリースには含まれない場合があります。 これらのリリースされていないビルドは読み込みすらできない可能性があり、文書化されていない機能、既知の欠陥、その他多くの問題が存在する可能性があります。これらは、計画されている PWA Kit の機能に早期にアクセスしたいデベロッパーやその他のユーザーによる使用を目的としています。