特徴
ウェブアプリとネイティブアプリの利点を兼ね備えたアプリ
- ネイティブアプリのように素早く表示され、オフラインでも利用できる。
- ブラウザで利用するが、アプリのホーム画面への追加やプッシュ通知もできる。
- URLで簡単にアプリを公開でき、検索エンジンからも発見できる。
鍵となる技術
App Shell アーキテクチャ
アプリのユーザーインターフェースが機能するために必要な最小限のHTML、CSS、JavaScriptをシェルとして、アプリで利用するデータから分離して構築する考え方。PWAではシェルには積極的にキャッシュを活用して、ユーザー体験を高める。詳細は App Shell モデル を参照。
Service Worker
ブラウザがWebページの処理とは別にバックグラウンドでスクリプトを実行する仕組み。PWAではService Workerを使ってApp Shellやデータをキャッシュして高速な表示とオフライン利用を可能にする。詳細は Service Workerの紹介 を参照。
Cache API (Service Worker の一部)
ブラウザのキャッシュを制御するAPI。PWAではURL指定可能なリソースをオフラインで利用するためのキャッシュ制御に使われる。
IndexedDB
クライアント（ブラウザ）のローカルデータベースにデータを保存するためのAPI。PWAではURLで指定不可能なデータをオフラインで利用するための保存に使われる。LocalStorageやSessionStorageは同期的であるため、PWAでの利用は推奨されない。
Web App Manifest
ネイティブアプリとしての表示方法（アプリ名やアイコンなど）をJSON形式で定義したファイル。詳細は MDN web docs を参照。
Service Workerを使ったキャッシュ制御実装
はじめてのプログレッシブ ウェブアプリ で紹介されている実装の流れを簡単にまとめている。
Service Workerの登録
navigator.serviceWoker.register() を呼び出して Service Worker のスクリプトを登録する。
App Shell のキャッシュ制御（キャッシュ優先）
-
caches.open()でキャッシュ名（Service Workerを変更する度に異なる名前にする）を指定してキャッシュを開き、キャッシュするURLのリストをキャッシュに追加する。 -
activateイベントリスナーで使われていないキャッシュを削除する。 -
fetchイベントリスナーでキャッシュが存在する場合はキャッシュデータを返却する。
データのキャッシュ制御（キャッシュ、ネットワークの順にデータ取得）
まずはキャッシュからデータを取得しデータを早く表示した後に、ネットワークから新しいデータが取得できればそのデータで更新する。
- fetchイベントリスナーでデータのリクエスト時に結果をキャッシュ処理を挟む。
- アプリでは、キャッシュからデータを取得して、サーバーへのリクエストの応答がない場合はキャッシュデータでアプリを更新する。サーバーから応答を受け取ったときに最新データでアプリを更新する。