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

プログレッシブウェブアプリケーション（PWA ）またはプログレッシブウェブアプリは、スタンドアロンアプリケーションとしてデバイスにインストールできるタイプのウェブアプリです。^[1] PWAは、デバイスのウェブブラウザのオフラインキャッシュを使用してインストールされます。^[2]

PWAはネイティブ（デバイス固有）アプリケーションの代替として2016年から導入されており、異なるプラットフォーム向けに個別のバンドルや配布を必要としないという利点があります。デスクトップやモバイルデバイスなど、さまざまなシステムで使用できます。Apple App StoreやGoogle Playなどのデジタル配信システムにアプリを公開するかどうかはオプションです。^[2]

PWAはHTML、CSS、JavaScript、WebAssemblyなどの一般的なウェブ技術を使用して構築されたウェブページまたはウェブサイトの形式で配信されるため、^[3] PWA対応ブラウザがあればどのプラットフォームでも動作します。2021年現在、PWA機能はGoogle Chrome、Apple Safari、Android版Firefox、Microsoft Edgeでさまざまな程度にサポートされていますが^{[4] [5] 、デスクトップ版}Firefoxではサポートされていません。^[6]

2007年のAppleのワールドワイド開発者会議で、スティーブ・ジョブズはiPhoneが「Web 2.0インターネット標準で作成されたアプリケーションを実行する」と発表した。 ^[7]ソフトウェア開発キット（SDK）は必要 なく、アプリはSafariブラウザエンジンを通じてデバイスに完全に統合される。^[8]このモデルは後に、不満を抱く開発者をなだめる手段としてApp Storeに切り替えられた。 ^[9] 2007年10月、ジョブズは翌年にSDKをリリースすると発表した。^[8]その結果、Appleは引き続きWebアプリをサポートしたものの、iOSアプリケーションの大多数はApp Storeに移行した。

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

2013年、MozillaはFirefox OSをリリースした。これは、モバイルデバイス上でウェブアプリをネイティブアプリとして実行するためのオープンソースの オペレーティングシステムとなることを目指していた。Firefox OSは、HTML5で書かれたGaiaと呼ばれるユーザーインターフェイスを備えたGeckoレンダリングエンジンをベースとしていた。Firefox OSの開発は2016年に終了し^[11]、プロジェクトは2017年に完全に中止されたが^[12]、 Firefox OSのフォークがフィーチャーフォンプラットフォームであるKaiOSのベースとして使用された。 ^[13]

2015年、デザイナーのフランシス・ベリマンとGoogle Chromeエンジニアのアレックス・ラッセルは、サービスワーカーやウェブアプリマニフェストなど、最新のブラウザでサポートされている新機能を活用したアプリを説明するために「プログレッシブウェブアプリ^{」という用語を作り出した。これにより、ユーザーはネイティブ}オペレーティングシステム（OS）でウェブアプリをプログレッシブウェブアプリケーションにアップグレードできる。その後、GoogleはAndroid向けのPWA開発の促進に多大な努力を払った。^{[15] [16]} Firefoxは2016年にサービスワーカーのサポートを導入し、Microsoft EdgeとApple Safariが2018年に続き、^{[17] [15]}すべての主要システムでサービスワーカーが利用できるようになりました。

2019年までに、PWAはMicrosoft Edge ^[18]（Windows）やGoogle Chrome ^[19]（Windows、macOS、ChromeOS、Linux ）など、ほとんどのブラウザのデスクトップ版でサポートされるようになりました。

2020年12月、デスクトップ版FirefoxはPWAの実装を断念した（具体的には、実験的な機能として利用可能だったプロトタイプの「サイト固有のブラウザ」設定を削除した）。Firefoxのアーキテクトは「デスクトップ版FirefoxにPWAサポートがすぐには導入されないというシグナルを送りたい」と述べた。^[6] Mozillaは引き続きAndroidでPWAをサポートする予定である。^[20]

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

プログレッシブウェブアプリの中には、App Shellモデルと呼ばれるアーキテクチャアプローチを採用しているものがあります。^{[24]このモデルでは、サービスワーカーが}レスポンシブウェブデザインウェブアプリケーションの基本ユーザーインターフェース、つまり「シェル」をブラウザのオフラインキャッシュに保存します。このモデルにより、PWAはウェブ接続の有無にかかわらずネイティブのような使用を維持できます。これにより、初期の静的フレーム、つまりコンテンツを段階的に、また動的に読み込むことができるレイアウトまたはアーキテクチャが提供され、読み込み時間が短縮されます。^[25]

プログレッシブウェブアプリとみなされ、ブラウザでインストールできるサイトの技術的な基準は、2016年にラッセルによって説明され^[26]、その後更新されました。^{[27] [28]}

• 安全なオリジンから発信されます。TLS 経由で提供され、アクティブな混合コンテンツはありません。プログレッシブ ウェブ アプリは、ユーザーのプライバシー、セキュリティ、コンテンツの信頼性を確保するために、HTTPS経由で提供する必要があります。
• フェッチ ハンドラを使用してサービス ワーカーを登録します。プログレッシブ ウェブ アプリは、サービス ワーカーを使用してプログラム可能なコンテンツ キャッシュを作成する必要があります。通常の HTTPウェブ キャッシュは、最初に使用した後にコンテンツをキャッシュし、さまざまなヒューリスティックを使用してコンテンツが不要になった時期を推測しますが、プログラム可能なキャッシュは、コンテンツが最初に使用される前に事前に明示的にプリフェッチし、不要になったときに明示的に破棄することができます。^[29]この要件により、ページをオフラインまたは低品質のネットワークでアクセスできるようになります。
• ウェブアプリのマニフェストを参照します。マニフェストには、少なくともnameまたは、 、および(値は、または)、および(192 px と 512 px のバージョン) の 5 つの主要なプロパティが含まれている必要があります。マニフェストに含まれる情報により、PWA は URL 経由で簡単に共有でき、検索エンジンで検出でき、複雑なインストール手順が軽減されます (ただし、PWA がサードパーティのアプリストアにリストされる可能性はあります)。^{[30]さらに、PWA は、}ホーム画面への追加、スプラッシュ画面の表示など、ネイティブアプリスタイルのインタラクションとナビゲーションをサポートしています。short_namestart_urldisplaystandalonefullscreenminimal-uiicons

プログレッシブウェブアプリの作成には、一般的に多くの技術が使用されています。ウェブアプリケーションは、インストール基準を満たし、オフラインで動作し、デバイスのホーム画面に追加できる場合、PWAと見なされます。この定義を満たすには、すべてのPWAに少なくともマニフェストとサービスワーカーが必要です。^{[31] [32] [33]}データの保存、サーバーとの通信、コードの実行には、他の技術が使用される場合があります。

ウェブアプリケーションマニフェスト^[34]は、JSONベースのマニフェスト（通常はmanifest.jsonというラベルが付けられる）^[30]を定義したワールドワイドウェブコンソーシアム（W3C）仕様であり、開発者にウェブアプリケーションに関連する以下のメタデータを配置するための一元的な場所を提供します。

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

このメタデータは、アプリをホーム画面に追加したり、ネイティブ アプリと一緒にリストしたりするために不可欠です。

iOS Safariは部分的にマニフェストを実装していますが、PWAメタデータのほとんどは、メタタグのApple固有の拡張機能を介して定義できます。これらのタグにより、開発者はフルスクリーン表示を有効にしたり、アイコンやスプラッシュスクリーンを定義したり、アプリケーションの名前を指定したりすることができます。^{[35] [36]}

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

サービスワーカーは、登録、インストール、アクティブ化の 3 段階のライフサイクルを経ます。登録では、インストールの準備として、ブラウザにサービスワーカーの場所を伝えます。インストールは、Web アプリのブラウザにサービスワーカーがインストールされていない場合、またはサービスワーカーに更新がある場合に行われます。アクティブ化は、PWA のすべてのページが閉じられたときに行われるため、以前のバージョンと更新されたバージョンの間に競合はありません。このライフサイクルは、ドメインに対してアクティブにできるサービスワーカーは 1 つだけであるため、サービスワーカーのバージョンを切り替えるときに一貫性を維持するのにも役立ちます。^[37]

WebAssemblyは、プリコンパイルされたコードをWebブラウザでネイティブに近い速度で実行することを可能にします。^{[38]そのため、} C言語などの言語で書かれたライブラリをWebアプリに追加することができます。2015年に発表され、2017年3月に初めてリリースされたWebAssemblyは、2019年12月5日にW3C勧告となり^{[39] [40] [41]}、2021年にACM SIGPLANからプログラミング言語ソフトウェア賞を受賞しました。 ^[42]

プログレッシブ ウェブ アプリの実行コンテキストは可能な限りアンロードされるため、プログレッシブ ウェブ アプリでは長期的な内部状態 (ユーザー データ、動的に読み込まれるアプリケーション リソース) の大部分を次のいずれかの方法で保存する必要があります。

ウェブストレージ

Web Storageは、最新のブラウザでキーと値のストレージを可能にするW3C標準APIです。このAPIは、sessionStorage（ブラウザセッションの終了時に消去されるセッションのみのストレージを可能にする）とlocalStorage（セッションを超えて保持されるストレージを可能にする）の2つのオブジェクトで構成されています。^[43]

インデックスデータベース API

Indexed Database APIは、すべての主要ブラウザで利用可能なW3C標準データベースAPIです。このAPIは最新のブラウザでサポートされており、JSONオブジェクトや文字列として表現可能な構造を保存できます。^[44] Indexed Database APIは、その周囲に追加の構造を提供するラッパーライブラリと一緒に使用できます。

2017年、Twitterは公式のネイティブAndroidおよびiOSアプリに代わるPWAであるTwitter Liteをリリースしました。Twitterによると、Twitter Liteのサイズはネイティブアプリのわずか1～3%でした。^[45] スターバックスは、同等のiOSアプリよりも99.84%小さいPWAを提供しています。PWAを導入した後、スターバックスはオンライン注文数を2倍にし、デスクトップユーザーの注文率はモバイルアプリユーザーとほぼ同じになりました。^[46]

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

PWAは異なるプラットフォーム向けに別々にバンドルしたり配布したりする必要がなく、ウェブ経由でユーザーが利用できるため、開発者はApple App Store、Google Play、Microsoft Store、Samsung Galaxy Storeなどのデジタル配信システムでリリースする必要はありません。主要なアプリストアは、程度の差はあれPWAの公開をサポートしています。^[2] Google Play、Microsoft Store、^{[49] Samsung Galaxy StoreはPWAをサポートしていますが、Apple App Storeはサポートしていません。Microsoft Storeは、} Bingインデックス経由でPWAを発見した後、（アプリ作成者のリクエストがなくても）一部の適格なPWAを自動的に公開します。^[50]

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

• Web アプリケーション ワーキング グループ標準索引