プログレッシブ ウェブアプリとは

ウェブはすばらしいプラットフォームです。さまざまなデバイスやオペレーティング システムが混在していること、ユーザー中心のセキュリティ モデル、その仕様とその実装が 1 つの会社によって管理されていないことから、ウェブはソフトウェア開発のための独自のプラットフォームとなっています。その本質的なリンク機能と組み合わせることで、検索して見つけた情報を、どこでも誰とでも共有できます。ウェブサイトを訪れるときは常に最新の状態が保たれており、そのサイトのエクスペリエンスは一時的あるいは永続的に自由に設定できます。ウェブ アプリケーションは、1 つのコードベースを使用して、誰でも、どこでも、どのデバイスでも利用できます。

プラットフォーム固有のアプリケーションは、非常に多機能で信頼性が高いことで知られています。ホーム画面、ドック、タスクバーに常に表示されます。ネットワーク接続に関係なく動作します。独自のスタンドアロン環境でリリースする。ローカル ファイル システムのファイルの読み書き、USB、シリアルポート、Bluetooth 経由で接続されたハードウェアへのアクセス、デバイスに保存されているデータ(連絡先やカレンダーの予定など)の操作が可能です。これらのアプリでは、写真を撮る、ホーム画面に表示される曲を再生すること、別のアプリを開いているときに曲の再生を制御するなどの操作を行うことができます。プラットフォーム固有のアプリは、そのアプリが実行されるデバイスの一部であるかのように感じられます。

プラットフォーム固有のアプリの相対的な能力とリーチを示すグラフ(高機能アプリ、高リーチ ウェブアプリ、プログレッシブ ウェブアプリ(高機能かつ高リーチの両方))。
プラットフォーム固有のアプリ、ウェブアプリ、プログレッシブ ウェブアプリの機能とリーチの比較。

プラットフォーム固有のアプリとウェブアプリを機能とリーチについて考える場合、プラットフォーム固有のアプリが優れた機能を発揮するのに対し、ウェブアプリは最もリーチの範囲が高くなります。プログレッシブ ウェブアプリが果たす役割

プログレッシブ ウェブアプリ(PWA)は、最新の API で構築、強化されており、機能、信頼性、インストール性が強化されています。また、1 つのコードベースで誰でも、どこでも、どのデバイスでも利用できます。

アプリの 3 つの柱

プログレッシブ ウェブアプリは、機能性、信頼性、インストール性に優れたウェブアプリです。この 3 つの柱により プラットフォーム固有のアプリケーションのように感じられます

有能

ウェブはそれだけでも十分に機能しています。たとえば、WebRTC、位置情報、プッシュ通知を使用して、ハイパーローカルなビデオチャット アプリを構築できます。このアプリをインストール可能にして、WebGL と WebVR を使用して会話を仮想的に進めることができます。WebAssembly の導入により、デベロッパーは C、C++、Rust などの他のエコシステムを活用し、数十年に及ぶ作業と機能をウェブに導入できます。たとえば、Squoosh.app は高度な画像圧縮にこれを使用しています。

最近までは、これらの機能を実際に活用できるのはプラットフォーム固有のアプリに限られていました。 ウェブではまだ利用できない機能もありますが、新しい API と今後の API では、ファイル システムへのアクセス、メディア コントロール、アプリのバッジ、クリップボードの完全サポートなどの機能を活用して、ウェブでできることを拡大する予定です。これらの機能はすべて、ウェブの安全でユーザー中心の権限モデルに基づいて構築されているため、ユーザーがウェブサイトにアクセスするのを怖がらないようにできます。

最新の API、WebAssembly、今後追加される新しい API の間で、ウェブ アプリケーションの機能性はかつてないほど向上しており、その機能は拡大する一方です。

信頼性

信頼性の高いプログレッシブ ウェブアプリとは、ネットワークに関係なく高速で信頼できるアプリです。

ユーザーに利用してもらうには、スピードが重要です。実際、ページの読み込み時間が 1 秒から 10 秒に変わるにつれて、ユーザーが直帰する確率は 123%上昇します。onload イベント後もパフォーマンスが止まることはありません。ユーザーは、自分の操作(ボタンのクリックなど)が登録されたかどうかに悩む必要はありません。スクロールとアニメーションが滑らかである必要があります。パフォーマンスは、アプリの認識から実際のパフォーマンスまで、ユーザー エクスペリエンス全体に影響します。

最後に、信頼性の高いアプリケーションは、ネットワーク接続に関係なく使用できる必要があります。ユーザーは、ネットワーク接続が低速または不安定な状態でも、オフラインでもアプリが起動することを期待しています。ユーザーは、メディア トラック、チケット、旅行プランなど、サーバーへのリクエストが難しい場合でも、操作した最新のコンテンツが利用可能で使用可能であることを期待します。リクエストを実行できない場合、通知なく失敗したりクラッシュしたりするのではなく、問題が発生したことが通知されることを期待します。

ユーザーには、操作に瞬時に反応し、信頼できるエクスペリエンスが欠かせません。

インストール可能

インストール済みのプログレッシブ ウェブアプリは、ブラウザタブではなくスタンドアロン ウィンドウで実行されます。ユーザーのホーム画面、ホルダー、タスクバー、シェルフから起動できます。 デバイスでアプリを検索し、アプリ スイッチャーで切り替えることができるため、インストールされているデバイスの一部であるかのように感じられます。

ウェブアプリをインストールすると、新しい機能が開きます。通常はブラウザでの実行時に予約されているキーボード ショートカットを利用できます。プログレッシブ ウェブアプリは、他のアプリのコンテンツを受け入れるように登録したり、さまざまな種類のファイルを処理するデフォルトのアプリケーションとして登録したりできます。

プログレッシブ ウェブアプリがタブからスタンドアロン アプリ ウィンドウに移ると、アプリの考え方や操作方法が変わります。

両方の長所を活かす

プログレッシブ ウェブアプリの中核はウェブ アプリケーションにすぎません。最新のブラウザでは、プログレッシブ エンハンスメントを使用することで新しい機能が有効になっています。Service Worker とウェブアプリ マニフェストを使用すると、ウェブ アプリケーションの信頼性とインストール性が向上します。新機能が利用できない場合でも、ユーザーは主要なエクスペリエンスを利用できます。

数字は正しくありません。プログレッシブウェブアプリを リリースした企業は目覚ましい成果をたとえば Twitter では、セッションあたりの閲覧ページ数が 65%、ツイート数が 75%、直帰率が 20% 減少し、アプリのサイズを 97% 以上削減できました。PWA への切り替え後、日経ではオーガニック トラフィックが 2.3 倍に増加し、サブスクリプションが 58% 増加し、1 日のアクティブ ユーザー数が 49% 増加しました。Hulu では、プラットフォーム固有のデスクトップ エクスペリエンスをプログレッシブ ウェブアプリに置き換えたことで、リピート訪問が 27% 増加しました。

プログレッシブ ウェブアプリは、ユーザーに好まれるウェブ エクスペリエンスを提供できるまたとない機会となります。プログレッシブ ウェブアプリは、最新のウェブ機能を使用して機能と信頼性を強化し、1 つのコードベースを使用して、誰でも、どこでも、どのデバイスでも、ビルドしたものをインストールできます。