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

2007年のWorldwide Developers Conferenceでスティーブ・ジョブズはiPhoneが「Web 2.0インターネット標準で作成されたアプリケーションを実行する」と発表した^[11]。ソフトウェア開発キット（SDK）は不要で、アプリはSafariのブラウザエンジンを通じてデバイスに完全に統合される^[12]。後にこれに不満を抱いた開発者を宥めるためにこのモデルはApp Storeに切り替えられた^[13]。2007年10月、ジョブズはSDKが翌年に公開されることを発表した^[12]。その結果、Appleがウェブアプリのサポートを継続したにもかかわらず、iOSアプリケーションの大部分はApp Storeに移行した。

2010年代初頭から、動的ウェブページによってウェブ技術を使用してインタラクティブなウェブアプリケーションを作成できるようになった。レスポンシブウェブデザインとそれが提供する画面サイズの柔軟性によってPWAの開発がより簡単になった。HTML、CSS、JavaScriptの継続的な強化によってウェブアプリケーションにより高いレベルの対話性を組み込むことができるようになり、ウェブサイト上でネイティブアプリのような体験を実現できるようになった^[14]。

2013年、MozillaはFirefox OSをリリースした。これはウェブアプリをモバイル機器上でネイティブアプリとして実行するためのオープンソースオペレーティングシステムとすることを意図していた。Firefox OSはGaiaと呼ばれるHTML5で書かれているユーザインタフェースを備えたGeckoレンダリングエンジンを基盤としていた。Firefox OSの開発は2016年に終了し^[15]、プロジェクトは2017年に完全に打ち切られたが^[16]、Firefox OSのフォークはフィーチャーフォン向けのOSであるKaiOSの基盤として使用された^[17]。

2015年、デザイナーのFrances BerrimanとGoogle ChromeのエンジニアのAlex Russellは、サービスワーカーやウェブアプリマニフェスト（英語版）を含むモダンなブラウザでサポートされている新機能を活用してユーザーがウェブアプリをネイティブOSのプログレッシブウェブアプリケーションにアップグレードできるアプリを説明する「プログレッシブウェブアプリ」^[18]という用語を作り出した。その後、GoogleはAndroid向けのPWAの開発の促進にかなりの努力を注いだ^[19][20]。Firefoxは2016年にサービスワーカーのサポートを導入し、2018年にはMicrosoft EdgeとSafariもサポートしたことで^[21][19]、全ての主要なブラウザでサービスワーカーが利用できるようになった。

2019年までにPWAはMicrosoft Edge^[6]（Windows）とGoogle Chrome^[22]（Windows、macOS、ChromeOS、Linux）を含む殆どのブラウザのデスクトップ版でサポートされるようになった。

2020年12月、デスクトップ版FirefoxはPWAの実装を中止した^{[注釈 1]}。Firefoxの設計者は「私たちが送りたいシグナルはデスクトップ版FirefoxでPWAサポートが近いうちに提供されることはないということです。」とコメントしている^[5]。それでも、MozillaはFirefox for AndroidでPWAをサポートする予定である^[23]。

PWAはウェブアプリケーションとして知られているウェブページやウェブサイトの一種であるので、個別にバンドルしたり配布する必要はない。特に、開発者やユーザーがApp Store、Google Play、Microsoft Store、Galaxy Storeなどのアプリケーションストアからウェブアプリをインストールする必要はない。程度の差はあるが、主要なアプリケーションストアはPWAの公開をサポートしている^[2]。Google Play、Microsoft Store^[24]、Galaxy StoreはPWAをサポートしているが、App Storeはサポートしていない。Microsoft Storeは一部の資格のあるPWAをBingインデックス経由で発見した後、アプリ開発者の要求がなくても自動的に公開する^[25]。

PWAは全て適切なウェブ標準に準拠したあらゆるブラウザ上で動作するように設計されている。他のクロスプラットフォームの解決策と同様に、開発者がネイティブアプリよりも簡単にクロスプラットフォームアプリを構築できるようにすることが目標である^[19]。PWAはプログレッシブエンハンスメントウェブ開発戦略を採用している。

一部のPWAはApp Shellモデルと呼ばれるアーキテクチャアプローチを使用している^[26]。このモデルでは、サービスワーカーはブラウザのオフラインキャッシュの基本的なユーザインタフェースまたはレスポンシブウェブデザインのウェブアプリケーション「シェル」に保存される。このモデルによってPWAはウェブ接続の有無に関わらずネイティブアプリのような使用感を維持できる。コンテンツを動的だけでなく漸進的にロードできる初期静的フレーム、レイアウトまたはアーキテクチャが提供されるのでロード時間を改善することができる^[27]。

サイトがPWAとみなされ、それ故にブラウザによってインストールできるための技術的なベースライン基準はRussellによってフォローアップ投稿で説明され^[28]、その後更新された^[29][30]:

• 安全な起点から発信される。TLS経由で提供され、アクティブな混合コンテンツはない。ユーザーのプライバシー、セキュリティ、コンテンツの認証性を確保するために、PWAはHTTPS経由で提供される必要がある。
• サービスワーカーをfetchハンドラーに登録する。PWAではサービスワーカーを使用してプログラム可能なコンテンツキャッシュを作成する必要がある。最初の使用後にコンテンツをキャッシュし、様々なヒューリスティックに依存してコンテンツが不要になった時期を予測する通常のHTTPウェブキャッシュ（英語版）とは異なり、プログラム可能なキャッシュは最初に使用される前にコンテンツを事前に明示的にプリフェッチし、不要になった際に明示的に削除することができる^[31]。この要件はオフラインまたは低品質のネットワークでもページに接続するのに役立つ。
• ウェブアプリマニフェストを参照する。マニフェストには少なくとも5つの主要なプロパティ^{[注釈 2]}が含まれている必要がある。マニフェストに含まれている情報により、PWAはURL経由で簡単に共有することができ、検索エンジンによって発見できるようになり、複雑なインストール手順が緩和される^{[注釈 3][32]}。その上、PWAはホーム画面（英語版）への追加やスプラッシュスクリーンの表示などを含むネイティブアプリ様式の相互作用とナビゲーションをサポートしている。

2017年、Twitterは公式のAndroidとiOSアプリの代わるPWAであるTwitter Liteをリリースした。Twitterによると、Twitter Liteはネイティブアプリのサイズの1 - 3%しか消費しなかった^[33]。スターバックスは同等のiOSアプリよりも99.84%小さいPWAを提供している。PWAの展開後、スターバックスのオンライン注文数は2倍になり、デスクトップユーザーの注文率はモバイルアプリユーザーのそれとほぼ同じとなった^[34]。

2018年にフォーブスが公表したレビューによると、PinterestのPWAのユーザーは以前のモバイルウェブサイトと比較してサイトで40%多くの時間を過ごしていたことが分かった。広告収益率も44%増加し、コアエンゲージメントは60%増加した^[35]。フリップカートではネイティブアプリをアンインストールした顧客の60%がFlipkart PWAを使用するようになった。ランコムではiOSのPWAによりページがインタラクティブになるまでの時間が84%短縮され、コンバージョンの17%増加に繋がり、モバイルセッションが53%増加した^[36]。

PWAの作成に一般的に使用される技術は複数ある。ウェブアプリケーションはインストール基準を満たしている場合にPWAとみなされるので、オフラインで動作しデバイスのホーム画面に追加することができる。この定義を満たすために、全てのPWAは少なくともサービスワーカーとマニフェストが必要である^[37][38][39]。

ウェブアプリマニフェスト^[40]はJSONベース^{[注釈 4]}のマニフェストを定義するW3C仕様で^[32]、ウェブアプリケーションに関連付けられた次のようなメタデータを配置する一元的な場所を開発者に提供する:

• ウェブアプリケーションの名前
• ウェブアプリアイコンまたは画像オブジェクトへのリンク
• ウェブアプリを起動または開くための優先URL
• ウェブアプリの設定データ
• ウェブアプリのデフォルトの向き
• 全画面などの表示モードを設定するオプション

このメタデータはアプリをホーム画面に追加したりネイティブアプリと並べて一覧するために極めて重要である。

iOSのSafariは欧州経済領域の外でマニフェストを部分的に実装しているが^[41]、PWAメタデータの殆どはメタタグに対するApple固有の拡張を介して定義できる。これらのタグを使用すると、開発者は全画面表示を有効にし、アイコンとスプラッシュスクリーンを定義し、アプリケーションの名前を指定することができる^[42][43]。

WebAssemblyは事前コンパイルされたコードをウェブブラウザでネイティブに近い速度で実行することができる^[44]。それ故に、C言語などで書かれたライブラリをウェブアプリに追加することができる。

PWAの実行コンテキストは可能な限りアンロードされるので、PWAは長期的な内部状態^{[注釈 5]}の大部分を次のいずれかの方法で保存する必要がある:

ウェブストレージはモダンなブラウザでキーと値のペアの保存を可能にするW3C標準APIである。ウェブストレージはsessionStorage^{[注釈 6]}とlocalStorage^{[注釈 7]}の2つのオブジェクトで構成されている^[45]。

Indexed Database APIは全ての主要なブラウザで利用できるW3C標準データベースAPIである。このAPIはモダンなブラウザでサポートされており、JSONオブジェクト及び文字列として表現できるあらゆる構造を保存することができる^[46]。Indexed Database APIはその周りに追加の構造を提供するラッパーライブラリと共に使用できる。

サービスワーカーはメインドキュメントからのウェブ/HTTPリクエストに応答できるプログラム可能なネットワークプロキシを実装するWeb Workerである。これはリモートサーバーの可用性を確認し、サーバーが利用可能になったときにコンテンツをキャッシュし、後でそのコンテンツをドキュメントに提供することができる。サービスワーカーは他のWeb Workerのようにメインドキュメントコンテキストとは別に動作する。サービスワーカーはプッシュ通知を処理したり、バックグラウンドでデータを同期したり、リソースリクエストをキャッシュまたは取得したり、ネットワークリクエストを傍受したり、ドキュメントが読み込まれていない場合でもドキュメントを登録したそれとは無関係に一元的な更新を受信したりできる^[47]。

サービスワーカーは登録、インストール、有効化の3段階のライフサイクルを通過する。登録ではインストールの準備としてブラウザにサービスワーカーの場所を示す。ウェブアプリケーション向けのブラウザにサービスワーカーがインストールされていない場合か更新された場合はインストールが行われる。有効化はPWAの全てのページが閉じられると行われるので、以前のバージョンと更新されたバージョンの間に競合は発生しない。また、ドメインに対して有効にできるサービスワーカーは1つだけなので、ライフサイクルはサービスワーカーのバージョンを切り替えるときに一貫性を維持するのにも役立つ^[47]。

• Google Lighthouse - Googleが開発したPWA向けのオープンソースの監査ツール

• Web Applications Working Group - 標準の索引