プログレッシブ ウェブアプリ（PWA）は、プログレッシブ エンハンスメントを使用してより信頼性の高いエクスペリエンスを提供し、新機能を使用してより統合されたエクスペリエンスを提供する、インストール可能なウェブアプリです。また、ウェブアプリであるため、1 つのコードベースを使用して、場所やデバイスを問わず、誰にでもアクセスできます。インストールすると、PWA は他のアプリとよく似ています。具体的には次のとおりです。
- ホーム画面、アプリ ランチャー、ランチャー、スタート メニューにアイコンがあります。
- デバイスでアプリを検索すると表示されます。
- ブラウザのユーザー インターフェースから完全に独立したウィンドウが開きます。
- URL の処理やタイトルバーのカスタマイズなど、OS とのより高度な統合にアクセスできます。
- オフラインで動作します。
ウェブ プラットフォーム
ウェブはすばらしいプラットフォームです。デバイスやオペレーティング システムを超えた普遍性、ユーザー中心のセキュリティ モデル、単一の企業によって仕様や実装を管理していないことから、ソフトウェアを配信するための強力なプラットフォームとなっています。
ウェブが本来持っているリンク機能と組み合わせることで、ウェブ全体を検索して、見つけた情報を場所を問わず誰とでも共有できます。アクセスしたウェブサイトは、パブリッシャーがデプロイした最新バージョンであり、そのサイトのエクスペリエンスは一時的または永続的に自由に設定できます。
ウェブ アプリケーションは、1 つのコードベースを使用して、場所やデバイスを問わず、誰にでもアクセスできます。ウェブでは、透過的でわかりやすいデプロイ メカニズムも提供されています。パッケージ化の必要性、追加のコンテンツの審査、更新の遅延はありません。 ユーザーは、アプリにアクセスしたときに常に最新バージョンを入手できます。新しい機能と手法により、数年前には克服できなかったハードルであるオフラインの場合でも、ウェブアプリでコンテンツを操作したり表示したりできるようになりました。
プラットフォーム固有のアプリ
モバイルとパソコンの両方でプラットフォーム固有のアプリは、機能豊富で信頼性が高いことで知られています。ホーム画面、ドック、タスクバーに常に表示されています。 ネットワーク接続に関係なく動作し、独自のスタンドアロン環境で起動します。 ローカル ファイル システムのファイルの読み取りと書き込み、USB、シリアル、Bluetooth 経由で接続されたハードウェアへのアクセス、デバイスに保存されているデータ（連絡先やカレンダーの予定など）の操作を行うことができます。プラットフォーム固有のアプリでは、他のアプリを使用しながら、写真を撮ったり、ホーム画面に表示されている曲を再生したり、メディアの再生を操作したりできます。 このようなアプリは、デバイス上で動作しているデバイスの一部であるかのように感じられます。
プラットフォーム固有のアプリの課題は、複数のプラットフォームやデバイスと互換性がないことです。そのため、Android アプリを iOS に移行したり、iOS から Windows または ChromeOS に移行したりするには、ゼロから新しいアプリを作成する必要はありません。
両方の長所を活かす
プラットフォーム アプリとウェブアプリを機能とリーチについて考えると、プラットフォーム アプリが優れた機能を代表するのに対し、ウェブアプリは最もリーチが広いことを表現します。プログレッシブ ウェブアプリは、プラットフォーム アプリの機能とウェブアプリのリーチを組み合わせたものです。 プログレッシブ ウェブアプリは、両方の機能を兼ね備えています。
ウェブ
- リンク可能性
- 開発時からユーザー補助に配慮
- 神出鬼没
- 簡単に設置
- 容易な更新
- 誰でも公開できます
プラットフォーム アプリ
- オフライン対応
- 高パフォーマンス
- デバイス統合
- スタンドアロン エクスペリエンス
- インストール済みアイコン
- 豊富な機能
導入によるメリット
米国の動画ストリーミング サービスである Hulu は、ユーザー レビューや利用率が低いデスクトップ アプリに代わり、プログレッシブ ウェブアプリ版のエクスペリエンスを作成しました。Google I/O 2019 で紹介したように、1 人のデベロッパーは 2 週間で、既存のウェブ アプリケーションからこのエクスペリエンスを調査して実装できます。
5 か月以内に、以前のアプリユーザーの 96% が PWA を導入し、リピート訪問が 27%、エンゲージメントが 5.5% 増加しました。PWA はランチャーとタスクバーにあるため、タブに移動するよりも簡単に戻れます。
インドネシアの e コマース プラットフォームである JD.ID は、多くの商品の配達サービスを提供しています。同社は、パフォーマンスとネットワークに依存しない PWA の堅実なエクスペリエンスを重視することで、オンライン プレゼンスを拡大したいと考えていました。この改善により、全体的なモバイル コンバージョン率は 53%、インストール ユーザーは 200%、1 日のアクティブ ユーザー数は 26% 増加しました。
Clipchamp はブラウザ内のデスクトップ クラスのオンライン動画エディタで、誰もが動画を通じて共有する価値のあるストーリーを発信できます。リリース後 5 か月間の PWA では、標準のデスクトップ アプリ ユーザーと比較して PWA のユーザー維持率が 9% 向上し、PWA のインストールは毎月 97% の割合で増加しました。
Corel Corporation の Gravit Designer は、高性能で手頃な価格のベクター イラスト ソフトウェアを必要とする 1 日あたり何万人ものアクティブ ユーザーにサービスを提供する、デスクトップ クラスの強力なベクター デザインツールです。ユーザーがインストール オプションとして PWA を追加した後、他のプラットフォームやインストール オプションと比較して、PWA ユーザーのアクティブ度は 24% 増加し、リピート ユーザー数は 31% 増加し、Gravit Designer PRO を購入する可能性は 2.5 倍向上しました。
ストリーミングのゲーム チェンジャー
プログレッシブ ウェブアプリの優れた例は、クラウドゲームやリモート コンピューティングなどのストリーミング プラットフォーム業界です。2021 年以降、ほとんどのクラウドゲーム プロバイダがプログレッシブ ウェブアプリをリリースしました。iPhone、Android、iPad、ノートパソコン、Mac、PC など、あらゆるデバイスからブラウザまたは PWA インストールでコンソール ゲームをプレイできます。Amazon Luna、Microsoft Xbox Cloud Gaming、Facebook Gaming、Google Stadia、Nvidia GeForce Now、BlueStacks X はブラウザでクラウドゲーム ソリューションを提供しています。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
- Safari（iOS 11.3 以降）、AppStore（iOS/iPadOS 14 以降、一部制限付き）、エンタープライズ配信用のモバイル設定。
- Android
- Firefox、Google Chrome、Samsung Internet、Microsoft Edge、Opera、Brave、Huawei Browser、Baidu、UCWeb、Play ストア（Google Chrome がインストールされたバージョン 72 以降、または TWA 対応のブラウザ）、Galaxy ストア、企業向け配布用の managed Play iframe。
次の動画では、ユーザーがモバイル デバイスのブラウザ ダイアログと [ホーム画面に追加] メニューを使用して、ブラウザから PWA をインストールします。
他のデバイス
ゲーム機（Microsoft Store の Xbox）や XR デバイス（Microsoft Hololens、Facebook の Oculus 向け計画）など、他の小型デバイスも PWA をサポートしています。ただし、ブラウザを備えた他のデバイスは、通常、PWA を受け入れません。
- ゲーム機
- スマートテレビ
- スマートウォッチ
- 車
PWA は、特定の制限があるすべてのデバイスのブラウザで常に動作します。多くのデバイスで機能するこの機能により、マルチデバイス ジャーニーを作成できます。ユーザーは、あるデバイスでタスクを開始し、別のデバイスでデータの同期を行い、デプロイしたまったく同じアプリを使用してタスクを完了できます。