ニュース: PWA Kit v2 がリリースされました。詳細については、リリースノートを参照してください。

Progressive Web App Kit の入門ガイド

PWA Kit をデモ設定で試すには、クイックスタートの手順に従ってください。

Progressive Web App Kit (PWA Kit) は、React を使用してストアフロントを作成するためのフレームワークです。

PWA Kit フレームワークを使用すると、以下のものを利用できます。

  • Retail React App を含むプロジェクトテンプレート。Retail React App はカスタマイズ可能なストアフロントで、ホームページから注文手続きまでの e コマースフローの中核部分が実装されています。
  • サーバー側とクライアント側の両方で動作し、ハイドレーション (サーバーからクライアントへレンダリングを転送するプロセス) を処理するレンダリングシステム。
  • Commerce API に由来するデータをコンポーネントにインジェクトするためのルーティングシステム。
  • 定期的な開発タスクの自動化のためのユーティリティ関数とスクリプト。
  • B2C Commerce APIOpen Commerce API (OCAPI) の統合。

Progressive Web App (PWA) は、ネイティブアプリのようなユーザー体験を提供する Web サイトであり、次のような機能を含みます:

  • 高速な読み込み時間
  • スムーズなレンダリングと移行
  • オフラインサポート
  • ホーム画面でのインストール

「プログレッシブ」と呼ばれる理由は、ユーザーのデバイスとブラウザーがサポートできる内容に応じてこういった機能が 1 つずつ (つまり 徐々に) 追加されるためです。

PWA は、標準準拠のブラウザーを使用するデスクトップやモバイルデバイスで機能します。

以下の表は、従来のレスポンシブ Web サイトおよびネイティブアプリを PWA と比較しています。

PWAレスポンシブサイトネイティブアプリ
説明レスポンシブで、かつネイティブアプリのようなパフォーマンスと機能を提供する Web サイト異なるスクリーンサイズに応じて動的に拡大縮小する Web サイト特定のプログラム (iOS、Android) で使用可能なアプリケーション。デバイス側の機能にアクセス可能
ユースケース高速でアプリのようなエンゲージメントを促す体験を望む場合従来の Web ストアフロントがニーズを満たす場合もっともロイヤルな顧客ベースで高度のエンゲージメントを促したい場合

Managed Runtime は、パブリッククラウドプラットフォーム上の PWA Kit ストアフロントをデプロイ、ホスト、およびモニタリングするためのインフラストラクチャとなるものです。Managed Runtime を使用すれば、サーバーの管理ではなく、ストアフロントの開発に集中できます。

Managed Runtime は Twelve-factor App の方法論にのっとっています。ストアフロントは、ステートレスで作成され、使用可能なもののうちで最も効率的かつ低コストなコンピューティングインフラストラクチャでデプロイ可能な単独のコードベースで駆動されます。各デプロイはこれまでのデプロイを完全に置換し、ゼロから再構成されます。

またもっとも重要な点として、Managed Runtime は、すべての Salesforce テクノロジーと同様、エンタープライズ級のセキュリティと 99.99% の稼働率実績を誇っています。

詳細については、Managed Runtime の概要を参照してください。

PWA Kit と Managed Runtime を使用する際に、Mobify という名前に言及することがあります。Mobify はこれらのテクノロジーを最初に開発した会社の名前です。Mobify は 2020 年に Salesforce によって買収され、当社ではリブランディングの作業を進めています。

オープンソースコミュニティからの PWA Kit への貢献を歓迎しています。貢献プロセスの詳細については、Contributing to PWA Kit (PWA Kit への貢献) をご覧ください。

PWA Kit にご満足いただけた場合、GitHub レポジトリで星印を付けてください。他のユーザーが PWA Kit を見つけやすくなります。

これで PWA Kit と Managed Runtime の基礎の学習が終了しました。入門ガイドシリーズの以下のガイドも参照してください。

  1. クイックスタート
  2. On-Demand Sandbox の作成
  3. API アクセスの設定
  4. ローカル環境の設定
  5. バンドルのプッシュとデプロイ