プログレッシブウェブアプリ（PWA）：ネイティブのようなウェブ体験

プログレッシブウェブアプリ：アプリのように感じるウェブサイト

プログレッシブウェブアプリ（PWA）は、ネイティブモバイルアプリのように動作するウェブサイトです。アプリストアを経由せずに、スマートフォンのホーム画面にインストールしたり、オフラインで動作したり、プッシュ通知を送信したり、デバイス機能にアクセスしたりできます。PWAはウェブサイトとネイティブアプリの両方の長所を兼ね備えています。

ウェブサイトをPWAにするもの

ウェブサイトをプログレッシブウェブアプリにするには3つの要素があります。まず、セキュリティのためにHTTPS経由で提供される必要があります。次に、サービスワーカーが必要です。これはバックグラウンドで実行されるJavaScriptファイルで、ネットワークリクエストをインターセプトし、リソースをキャッシュしてアプリがオフラインでも動作するようにします。3つ目に、ウェブアプリマニフェストが必要です。これはJSONファイルで、インストールされたときのアプリの外観（名前、アイコン、スプラッシュ画面、表示モード）をブラウザに伝えます。

これらの要件が満たされると、ブラウザはユーザーにPWAのインストールを促します。Androidでは、ブラウザのUIなしで全画面アプリとして表示されます。デスクトップでは、独自のウィンドウで開きます。その体験はネイティブアプリとほとんど区別がつきません。

オフライン体験

サービスワーカーはPWAの心臓部です。ユーザーが初めてアクセスしたときにアプリのファイルをキャッシュし、その後のアクセスではインターネット接続がなくても瞬時に読み込まれます。さまざまな戦略を定義できます。静的アセットにはキャッシュファースト、動的コンテンツにはネットワークファースト、速度と鮮度のバランスを取るにはstale-while-revalidateなどです。

つまり、PWAはユーザーが飛行機の中やトンネルの中、または接続が不安定な場所にいても、意味のあるコンテンツを表示できます。接続が回復すると、サービスワーカーはバックグラウンドで保留中のデータを同期できます。

プッシュ通知

ネイティブアプリと同様に、PWAはプッシュ通知を送信してユーザーを再エンゲージできます。プッシュ通知APIは、サービスワーカーとプッシュサービスの組み合わせを使用します。サーバーはプッシュメッセージをプッシュサービスに送信し、プッシュサービスがそれをブラウザに配信します。サービスワーカーが起動し、通知を処理して表示します。ウェブサイトが開いていなくても機能します。

PWAを構築するタイミング

PWAは、コンテンツ重視のサイト、ニュースアプリ、eコマースストア、およびオフラインアクセスと高速読み込みがユーザー体験に役立つあらゆるアプリケーションに最適です。ネイティブアプリよりも開発と保守のコストが低く、アプリストアの承認も必要ありません。主な制限は、デバイスハードウェアへの完全なアクセスがないことです。Bluetooth、NFC、高度なファイルシステムアクセスなどは、ネイティブアプリと比較して依然として制限されています。

多くの企業がPWAで印象的な結果を出しています。Twitter Liteでは、セッションあたりのページ数が65％増加し、送信されたツイート数が75％増加しました。PinterestはモバイルサイトをPWAとして再構築し、エンゲージメントが60％増加しました。これらの結果は、PWAが妥協案ではなく、多くのユースケースでネイティブアプリよりも優れている可能性があることを示しています。