プログレッシブウェブアプリとは？ネイティブのように感じられる Web アプリ

プログレッシブウェブアプリ（PWA）は、最新のブラウザ機能を使って、インストール可能で、オフラインで動作し、よりネイティブアプリのように振る舞う Web サイトです。

PWA は別個の技術ではなく、通常の Web アプリに重ねられた一連の機能です。service worker と web manifest があれば、サイトをホーム画面に追加し、全画面で起動し、ネットワークなしで動作し続けることができます。これらの要素を生成し検証する責任は、build pipeline が担います。

中核となる要素

名前、アイコン、表示モードを記述する web manifest。
キャッシュとオフラインサポートのための service worker。
ほとんどの PWA 機能が必要とする HTTPS。

PWA にできること

条件を満たす PWA は、デバイスにインストールでき、ブラウザのクロームなしで起動でき、オフライン利用のために asset をキャッシュでき、対応プラットフォームでは push notification を受け取れます。その体験は、Web サイトのままでありながらネイティブアプリに近づきます。

プログレッシブエンハンスメント

プログレッシブという言葉が重要です。サイトは PWA をサポートしないブラウザでも通常の Web ページとして動作し、追加の機能は利用可能な場所で重ねられます。基本となる Web 体験を失うことはありません。

オフラインキャッシュのモデル

service worker はネットワークリクエストをインターセプトし、キャッシュされたレスポンスを提供できるため、接続がなくてもアプリが読み込まれます。何をキャッシュし、どのように更新するかを設計することが、信頼できる PWA を構築する上で最も難しい部分です。

CI/CD における PWA

build は manifest と service worker を生成し、多くの場合、ハッシュ付きの build asset をプリキャッシュするプラグインを使います。CI は manifest と service worker が出力され有効であることを検証すべきであり、pipeline での Lighthouse チェックは、PWA の要件が後退した場合に build を失敗させられます。

重要なポイント

PWA は、通常の Web アプリにインストール可能性とオフラインサポートを追加します。
web manifest、service worker、そして HTTPS が必要です。
CI は manifest と service worker を生成し、Lighthouse の PWA チェックで gate をかけられます。