プログレッシブ ウェブアプリ（PWA）は、プログレッシブ エンハンスメントを使用してより信頼性の高いエクスペリエンスをユーザーに提供し、新しい機能を使用することでより統合されたエクスペリエンスを提供できるウェブアプリです。また、インストールすることもできます。また、ウェブアプリであるため、1 つのコードベースを使用して、誰でも、どこでも、どのデバイスでも、アクセスできます。インストール後の PWA の表示は、他のアプリと変わりません。
- ホーム画面、アプリ ランチャー、ランチパッド、スタートメニューにアイコンがあります。
- デバイス上でアプリを検索すると表示されます。
- ブラウザのユーザー インターフェースから完全に分離されたスタンドアロン ウィンドウで開きます。
- URL の処理やタイトルバーのカスタマイズなど、OS との高度な統合にアクセスできます。
- オフラインで動作します。
ウェブ プラットフォーム
ウェブは素晴らしいプラットフォームです。さまざまなデバイスとオペレーティング システムにわたる普遍性、ユーザー中心のセキュリティ モデル、単一の企業で仕様や実装を管理していないという事実が相まって、ソフトウェア配信用の強力なプラットフォームになっています。
ウェブ固有のリンク機能と組み合わせることで、ウェブ全体を検索し、見つけたものをどこでも誰とでも共有できます。ウェブサイトにアクセスするたびに、パブリッシャーがデプロイした最新バージョンが表示されます。そのサイトの使用は、一時的または恒久的に設定できます。
ウェブ アプリケーションは、単一のコードベースを使用して、どこからでも、どのデバイスからでも、すべてのユーザーにリーチできます。デベロッパーにとって、ウェブは透過的でわかりやすいデプロイ メカニズムも提供します。パッケージ化も、追加のコンテンツ レビューも、更新の遅延も必要ありません。 ユーザーはアプリにアクセスするたびに最新バージョンを入手できます。新しい機能と手法により、ウェブアプリではオフラインでもコンテンツを操作したり表示したりできるようになりました。これは数年前には克服できなかったハードルです。
プラットフォーム固有のアプリ
モバイルとパソコンの両方で、プラットフォーム固有のアプリは豊富で信頼性が高いことで知られています。ホーム画面、ドック、タスクバーに常に表示されます。ネットワーク接続に関係なく動作し、独自のスタンドアロン エクスペリエンスで起動します。ローカル ファイル システムからのファイルの読み取りと書き込み、USB、シリアル、Bluetooth 経由で接続されたハードウェアへのアクセス、デバイスに保存されている連絡先やカレンダーの予定など、デバイスのデータの操作を行うことができます。プラットフォーム固有のアプリでは、写真を撮影したり、ホーム画面に表示されている曲を再生したり、別のアプリを使用しながらメディアの再生を操作したりできます。これらのアプリは、実行されているデバイスの一部のように感じられます。
プラットフォーム固有のアプリの課題は、複数のプラットフォームやデバイスと互換性がないことです。そのため、Android アプリを iOS に移行したり、iOS を Windows や ChromeOS に移行したりすることは、新しいアプリをゼロから作成しない限り、簡単ではありません。
両方の長所を活かす
プラットフォーム アプリとウェブアプリを機能とリーチの観点から考えると、プラットフォーム アプリは機能の面で優れており、ウェブアプリはリーチの面で優れています。プログレッシブ ウェブアプリは、プラットフォーム アプリの機能とウェブアプリのリーチの交差点にあります。Progressive Web App には、両方の世界の機能が含まれています。
ウェブ
- リンク可能性
- 開発時からユーザー補助に配慮
- 神出鬼没
- 簡単に設置
- 容易な更新
- 誰でも公開できる
プラットフォーム アプリ
- オフライン対応
- 高パフォーマンス
- デバイス統合
- スタンドアロン エクスペリエンス
- インストール済みアイコン
- 豊富で信頼性の高い
導入のメリット
米国の動画ストリーミング サービス Hulu は、ユーザーのレビューが低く、使用率も低かったデスクトップ アプリに代わるプログレッシブ ウェブアプリ バージョンを作成しました。Google I/O 2019 で共有されたように、1 人のデベロッパーが 2 週間で既存のウェブ アプリケーションからこのエクスペリエンスを調査して実装しました。
5 か月以内に、従来のアプリのユーザーの 96% が PWA を導入し、再訪問が 27% 増加し、エンゲージメントが 5.5% 増加しました。ランチャーとタスクバーに表示されるため、タブに表示されるアプリよりも簡単に戻ることができます。
多くの商品に配達サービスを提供するインドネシアの e コマース プラットフォームである JD.ID は、PWA のパフォーマンスとネットワークに依存しない安定したエクスペリエンスに焦点を当てることで、オンライン プレゼンスを拡大したいと考えていました。このエクスペリエンスの向上により、モバイル全体のコンバージョン率は 53% 増加し、インストール済みユーザーでは 200% 増加しました。また、1 日あたりのアクティブ ユーザー数も 26% 増加しました。
Clipchamp は、ブラウザ内にあるデスクトップ クラスのオンライン動画エディタです。誰でも動画を通じて共有する価値のあるストーリーを伝えることができます。PWA ユーザーの維持率は、標準のデスクトップ アプリ ユーザーと比較して 9% 高く、リリース後 5 か月間、PWA のインストール数は毎月 97% の割合で増加しています。
Corel Corporation の Gravit Designer は、豊富な機能と手頃な価格で使いやすいベクター イラスト ソフトウェアを求める何万人ものアクティブ ユーザーに利用されている、強力なデスクトップ クラスのベクター デザイン ツールです。ユーザー向けのインストール オプションとして PWA を追加した後、PWA ユーザーのアクティビティが 24% 増加し、PWA のアカウントによるリピーターが 31% 増加しました。また、PWA ユーザーが Gravit Designer PRO を購入する可能性は、他のプラットフォームやインストール オプションと比較して 2.5 倍に増加しました。
ストリーミングのゲームチェンジャー
Progressive Web App の強力な機能の例として、クラウド ゲームやリモート コンピューティングなどのストリーミング プラットフォームの業界が挙げられます。2021 年以降、ほとんどのクラウドゲーム プロバイダは、プログレッシブ ウェブアプリをリリースしました。これにより、iPhone、Android、iPad、ノートパソコン、Mac、PC など、あらゆるデバイスで、ブラウザまたは PWA のインストールだけでコンソール ゲームをプレイできるようになりました。Amazon Luna、Microsoft Xbox Cloud Gaming、Facebook Gaming、Google Stadia、Nvidia GeForce Now、BlueStacks X は、ブラウザを介したクラウドゲーム ソリューションを PWA として提供しています。これらのゲームはすべて、WebRTC、WebAssembly、GamePad API などのウェブ技術により、すべてのプラットフォームでネイティブに近いパフォーマンスで優れたエクスペリエンスを提供します。
課題
ウェブ プラットフォームを使用して PWA を公開するメリットについて学んだところで、直面する可能性のある課題についても把握しておくことが重要です。
クロスブラウザの互換性
Apple はマルチデバイス世界にとって重要な企業であり、iOS、iPadOS、macOS、Safari を所有しています。Apple は PWA という用語を公の場で使ったことはありませんが、2018 年以降、iPhone や iPad の Safari で PWA のインストールとオフライン対応を可能にする技術をサポートしています。
ただし、Apple による PWA 仕様の実装では、他のブラウザ（特に Chromium エンジンを搭載したブラウザ）が備えている多くの機能が欠落しています。
中間には、Firefox とその Gecko エンジンがあり、Android ではより多くの PWA 仕様が実装され、デスクトップではインストール機能が制限されています。
この制限には、プッシュ通知の欠如、統合 API（ウェブ Bluetooth や WebNFC など）、インストール促進手法などがあり、ユーザーは現在のウェブサイトをインストールしてアプリのエクスペリエンスを得られることを認識できます。また、実装された機能にバグがいくつかあります。
すべてのウェブ開発と同様に、PWA をリリースする際や、新しいメジャー ブラウザや OS バージョンがリリースされた場合は、すべてのプラットフォームでエクスペリエンスをテストする必要があります。機能が使用できない場合は、常に代替ソリューションまたは代替エクスペリエンスを提供する必要があります。
PWA の認知度
PWA デベロッパーは、ビジネス側とユーザー側の両方で認知の問題に直面する可能性があります。ビジネス オーナーの中には、PWA を知らない人や、プログレッシブ ウェブアプリのメリットと課題について誤解している人もいます。
PWA を公開する際の次の課題は、ウェブサイトがインストール可能であることをユーザーに理解してもらい、インストール済みアプリのエクスペリエンスに誘導することです。
iOS や iPadOS などのプラットフォームでは、インストールの難易度が高くなります。また、UX デザイナーが、アプリのインストール方法をユーザーに説明する画面を含める場合もあります。
互換性
プログレッシブ ウェブアプリは単なるウェブアプリであるため、コンテンツとサービスは標準仕様とプロトコルの上で実行されます。したがって、PWA は技術的には、ウェブが動作するすべての場所で動作します。プラットフォームが「PWA 仕様」と互換性を持つ必要はありません。
ただし、PWA と互換性について話す場合、通常はブラウザとオンライン専用のコンテキストの境界を越える機能（アイコンのインストールとオフライン サポート）について考えます。
従来のウェブ プラットフォームのサポートに加えて、アイコンのインストールやオフライン機能など、アプリの基本機能のサポートを確認しましょう。
97%
オフライン対応のブラウザ
88 %
ウェブユーザーが PWA をインストールできる
データの提供元は StatCounter で、使えますか？
パソコン、ノートパソコン
多要素デバイスの世界では、デスクトップ デバイスが何であるかを確認するのはもはや困難です。ただし、少なくともオペレーティング システムの観点からは、これらのブラウザとストアは PWA インストールおよびオフライン機能に対応しています。
- Windows 10 または 11
- Google Chrome（バージョン 73 以降）、Microsoft Edge（バージョン 79 以降）、Microsoft Store
- ChromeOS
- 組み込みの Chrome ブラウザ（バージョン 72 以降）、Play ストア（バージョン 85 以降）
- macOS、Linux、Windows 7、8.x
- Google Chrome（バージョン 73 以降）、Microsoft Edge
次の動画では、ユーザーがパソコンのブラウザから PWA をインストールし、スタンドアロン ウィンドウで他のアプリと同様にアクセスしています。
モバイル デバイス
スマートフォンとタブレットの場合、プログレッシブ ウェブアプリは、以下のブラウザとアプリストアを使用してオフライン機能とともにインストールできます。
- iOS と iPadOS
- サードパーティ製ブラウザ（iOS/iPadOS 16.4 以降）、Safari（iOS 11.3 以降）、AppStore（iOS/iPadOS 14 以降、一部の制限あり）、企業向け配布用のモバイル構成。
- Android
- Firefox、Google Chrome、Samsung Internet、Microsoft Edge、Opera、Brave、Huawei ブラウザ、Baidu、UCWeb、Play ストア（Google Chrome がインストールされているバージョン 72 以降、または TWA と互換性のあるブラウザ）、Galaxy Store、企業配信用の managed Play iframe。
次の動画では、ユーザーがブラウザ ダイアログと [ホーム画面に追加] メニューを使用して、モバイル デバイスのブラウザから PWA をインストールしています。
その他のデバイス
ゲーム機（Microsoft Store 搭載の Xbox）や XR デバイス（Microsoft Hololens、Facebook の Oculus の計画）など、他の小型デバイスでも PWA がサポートされています。ただし、ブラウザを搭載した他のデバイスでは、通常、PWA はサポートされていません。たとえば、以下のようなデバイスが該当します。
- ゲーム機
- スマートテレビ
- スマートウォッチ
- 自動車
PWA はすべてのデバイスのブラウザで常に動作しますが、特定の制限があります。 複数のデバイスで動作できるため、マルチデバイス ジャーニーを作成できます。ユーザーは、1 つのデバイスでタスクを開始し、別のデバイスで完了できます。デバイス間でデータが同期され、デプロイされたアプリはまったく同じです。