PWA Kit の概要

この概要では、Progressive Web App (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 で作成されたサイトは、次の Web ブラウザーと互換性があります。

オペレーティングシステムブラウザー
Android8+Chrome 53+
Android 8+Samsung Internet
iOS 10+Chrome 53+
iOS 10+Safari 10+
オペレーティングシステムブラウザー
Android8+Chrome 53+
Android 8+Samsung Internet
iOS 10+Chrome 53+
iOS 10+Safari 10+
オペレーティングシステムブラウザー
macOS 10.10+Safari 10+
macOS 10.10+Firefox 49+
Windows 8.1+Chrome 53+
Windows 8.1+Edge 14+
Windows 8.1+Firefox 49+

買い物客に最善の体験を提供するために、PWA Kit ストアフロントは、サーバー側とクライアント側の 2 つの異なるコンテキストで同じソースコードを実行する、レンダリングとルーティングのシステムを使用しています。サーバー側のレンダリングは初期のページ読み込み速度を最適化し、クライアント側のレンダリングはレスポンシブなユーザーインターフェイスとスムーズなページの移行を可能にします。

このレンダリングとルーティングのシステムは、Retail React App によって Express サーバー構成と React コンポーネントの階層を使用して確立されます。このシステム内では以下を実行できます:

  • 新規ページコンポーネントの追加および既存のページコンポーネントの変更
  • API リクエストまたはユーザー操作からのページコンポーネントへのデータの提供
  • URL リクエストからページコンポーネントへのルーティングパターンの定義
  • すべてのページの出力のカスタマイズ

詳細については、完全なアーキテクチャガイドのレンダリングとルーティングを参照してください。

PWA Kit のストアフロントでは、Einstein 活動を使用してユーザー体験を強化し、Reports & Dashboards でレポートデータを提供します。

Einstein アクティビティベースの Report & Dashboards を有効にするには、Business Manager で有効にする必要があります。

PWA Kit は GitHub でホストされるオープンソースプロジェクトです。

PWA Kit の GitHub リポジトリは、ライブラリ、プロジェクトテンプレート、SDK、その他のツールを含むいくつかのパッケージで構成される monorepo として設定されます。

リポジトリのナビゲーションに役立つよう、構成要素の各パッケージの概要を説明します。

パッケージ説明
pwa-kit-create-appプロジェクトテンプレートに基づいて PWA Kit プロジェクトを作成。
pwa-kit-devPWA Kit プロジェクトを開発、ビルド、デプロイするためのコマンドラインツール。
pwa-kit-runtimeManaged Runtime 上で Node.js アプリケーションを実行。
pwa-kit-react-sdkレンダリングパイプラインをサポートするユーティリティ。
commerce-sdk-reactSalesforce B2C Commerce API と対話するための React フック。
template-retail-react-appプロジェクトを開始するためのデフォルトのテンプレート。
template-typescript-minimalTypeScript アプリケーション用のゼロ構成プロジェクトテンプレート。
template-express-minimalManaged 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 の機能に早期にアクセスしたいデベロッパーやその他のユーザーによる使用を目的としています。