プログレッシブ Web アプリ (PWA) の概要

  • [アーティクル]

プログレッシブ Web Apps (PWA) は、Web テクノロジを使用して構築するアプリケーションであり、1 つのコードベースからすべてのデバイスにインストールして実行できます。

PWA は、サポート デバイス上のユーザーにネイティブに似たエクスペリエンスを提供します。 各デバイスでサポートされている機能に適応し、Web サイトなどの Web ブラウザーで実行することもできます。

PWA の構築を開始するには、「プログレッシブ Web Appsの概要」を参照してください。

PWA の利点

ネイティブのようなエクスペリエンス

デバイスにインストールすると、PWA は他のアプリと同じように機能します。 以下に例を示します。

  • PWA には、デバイスのホーム画面またはタスク バーに追加できる独自のアプリケーション アイコンがあります。
  • 関連するファイルの種類が開かれると、PWA を自動的に起動できます。
  • PWA は、ユーザーがサインインしたときに実行できます。
  • PWA は、Microsoft Store などのアプリケーション ストアに送信できます。

高度な機能

また、PWA は高度な機能にもアクセスできます。 以下に例を示します。

  • PWA は、デバイスがオフラインのときに引き続き動作できます。
  • PWA はプッシュ通知をサポートします。
  • PWA は、アプリケーションが実行されていない場合でも定期的な更新を実行できます。
  • PWA はハードウェア機能にアクセスできます。

最後に、PWA は Web サイトと同様に Web ブラウザーで実行できます。 Web サイトのように実行すると、次のような利点がある PWA が得られます。

  • PWA は、検索エンジンによってインデックスを作成できます。
  • PWA は、標準の Web リンクから共有および起動できます。
  • PWA は、セキュリティで保護された HTTPS エンドポイントやその他のユーザーセーフガードを使用するため、ユーザーにとって安全です。
  • PWA は、ユーザーの画面サイズまたは向き、および入力方法に適応します。
  • PWA では、WebBluetooth、WebUSB、WebPayment、WebAuthn、WebAssembly などの高度な Web API を使用できます。

開発コストの削減

PWA は、Android、iOS、各デスクトップ オペレーティング システムなど、プラットフォームごとに特定の個別のコードベースを必要とするコンパイル済みアプリよりもはるかに 低いクロスプラットフォーム開発コスト を持ちます。

PWA を使用すると、Web サイト、モバイル アプリ、デスクトップ アプリ (オペレーティング システム間) 間で共有される 1 つのコードベースを使用できます。

デバイス間の互換性

プログレッシブ Web Apps (PWA) は、Web サーバーでホストされ、Web ブラウザー エンジンで実行される HTML、CSS、JavaScript コードを使用して構築されます。 Web ブラウザー (Web サイトなど) で直接使用するか、アプリ ストアからデバイスにインストールするか、サポート ブラウザーのアプリ インストール機能を使用して使用できます。 Microsoft Edge への PWA のインストールの詳細については、「 PWA のインストール」を参照してください。

PWA のユーザー エクスペリエンスは、デバイス機能を使用してスケールアップまたはスケールダウンします。 特に、Windows と Microsoft Edge では、オペレーティング システムと深く統合するイマーシブ エクスペリエンスを構築できます。 Web テクノロジのみを使用すると、アプリが他のブラウザー、オペレーティング システム、デバイスで動作することを保証します。

デスクトップ コンピューティングは、多くのユーザーにとって引き続き主要な生産性環境です。 PWA は、その環境の利点を継承するデスクトップ オペレーティング システムに、完全にカスタマイズされたインストール可能なエクスペリエンスを提供できます。 ただし、PWA はモバイル デバイスにインストールすることも、Web ブラウザーで直接使用することもできます。

Web とネイティブの間のギャップを埋める

Web テクノロジを使用して現在実行できない操作はあまりありません。 デバイス固有の言語を使用してのみ可能だった多くの機能は、標準の Web テクノロジを使用して実現できるようになりました。 以下に例を示します。

  • ファイルを処理します。
  • 他のアプリとコンテンツを共有する。
  • クリップボードにアクセスします。
  • データを同期し、バックグラウンドでリソースをフェッチします。
  • Bluetooth や USB などのデバイス ハードウェアにアクセスします。
  • コンテンツをデータベースに格納します。
  • ハードウェアアクセラレータグラフィックスを活用します。
  • CSS レイアウト、アニメーション、フィルターを使用して、高度なデザインを作成します。
  • WebAssembly を使用して、ほぼコンパイルされたパフォーマンス コードを実行します。

Microsoft Edge のおかげで、デスクトップ上の PWA は、これらの機能を最大限に活用して、ユーザーがデスクトップ アプリで実行できることを期待する機能を提供できます。 これらの機能は、Web プラットフォームとデスクトップ プラットフォーム間でより魅力的なエクスペリエンスを提供します。

PWA で実行できる操作の例については、「 Myth Busting PWA」を参照してください。

Microsoft Store

プログレッシブ Web Apps (PWA) は Microsoft Store の他のアプリと同じであるため、ユーザーはブラウザーを開くことなく、検出からインストール、実行まで、完全に連携できます。

Microsoft Store は、ユーザーがアプリをインストールするための信頼できる使い慣れたエクスペリエンスを提供します。 さらに、詳細な使用状況の統計情報とグラフを表示して、Microsoft Store のアプリの動作を確認できます。

PWA を Microsoft Store に発行する方法について説明します。

成功事例

プログレッシブ Web アプリ (PWA) テクノロジを使用すると、アプリの 安全、 検出可能、 リンク可能、インストールと更新が 簡単 、 応答性が高く、 ネットワークに依存しない優れた方法です。 多くの企業がPWAで成功を収めています。 以下に例を示します。

  • Starbucks PWA は、毎日アクティブなユーザーを 2 回増やしました。 デスクトップでの注文は、モバイル (ソース) とほぼ同じレートです。
  • Trivago では、PWA をホーム画面に追加するユーザーが 150% 増加しました。 エンゲージメントの増加により、ホテルのオファー(ソース)への退勤が97%増加しました。
  • Tinder は、PWA で読み込み時間を 11.91 秒から 4.68 秒に切断します。 アプリは、コンパイルされた Android アプリ (ソース) よりも 90% 小さくなります。

PWA 統計の Web サイトで、成功事例の詳細をご覧ください。

関連項目