Loading article…
プログレッシブウェブアプリケーション（PWA）またはプログレッシブウェブアプリは、デバイスにスタンドアロンアプリケーションとしてインストールできるウェブアプリの一種です。[ 1 ] PWAは、デバイスのウェブブラウザのオフラインキャッシュを使用してインストールされます。[ 2 ]
PWAは、ネイティブ（デバイス固有の）アプリケーションの代替として2016年から導入され、異なるプラットフォーム向けに個別にバンドルや配布する必要がないという利点があります。デスクトップやモバイルデバイスなど、さまざまなシステムで使用できます。Apple App Store、Google Play、 WindowsのMicrosoft Storeなどのデジタル配信システムにアプリを公開することは任意です。[ 2 ]
PWAはHTML、CSS、JavaScript、WebAssemblyなどの一般的なウェブ技術を使用して構築されたウェブページまたはウェブサイトの形式で提供されるため[ 3 ]、PWA互換ブラウザを備えたあらゆるプラットフォームで動作します。2025年現在、PWA機能はGoogle Chrome、Apple Safari、Brave、Android版Firefox、Microsoft Edge [ 4 ] [ 5 ]、Windows版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をリリースしました。これは、モバイルデバイス上でWebアプリをネイティブアプリとして実行するためのオープンソースのオペレーティングシステムとなることを意図していました。Firefox OSは、HTML5で記述されたGaiaと呼ばれるユーザーインターフェースを備えたGeckoレンダリングエンジンをベースにしていました。Firefox OSの開発は2016年に終了し[ 11 ]、2017年にはプロジェクトは完全に中止されました[ 12 ]。ただし、Firefox OSのフォークはフィーチャーフォンプラットフォームであるKaiOSのベースとして使用されました[ 13 ]。
2015年、デザイナーのフランシス・ベリマンとGoogle Chromeエンジニアのアレックス・ラッセルは、「プログレッシブウェブアプリ」 [ 14 ]という用語を作り出し、サービスワーカーやウェブアプリマニフェストなど、最新のブラウザでサポートされている新機能を利用するアプリを説明しました。これにより、ユーザーはネイティブオペレーティングシステム（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 のサポートがすぐには提供されないということです」と述べています。[ 20 ] Mozilla は Android で PWA をサポートしており、今後もサポートを続ける予定です。[ 21 ] 2025 年 9 月にリリースされた Firefox バージョン 143.0 では、Windows での PWA のサポートが追加されました。[ 6 ]
プログレッシブウェブアプリはすべて、適切なウェブ標準に準拠したあらゆるブラウザで動作するように設計されています。他のクロスプラットフォームソリューションと同様に、その目的は、開発者がネイティブアプリよりも簡単にクロスプラットフォームアプリを構築できるようにすることです。[ 15 ]プログレッシブウェブアプリは、プログレッシブエンハンスメントウェブ開発戦略を採用しています。
プログレッシブウェブアプリの中には、App Shellモデルと呼ばれるアーキテクチャアプローチを採用しているものがあります。[ 25 ]このモデルでは、サービスワーカーがレスポンシブウェブデザインのウェブアプリケーションの基本ユーザーインターフェース、つまり「シェル」をブラウザのオフラインキャッシュに保存します。このモデルにより、PWAはウェブ接続の有無にかかわらずネイティブアプリのような使用感を維持できます。これにより、コンテンツを段階的に、かつ動的に読み込むことができるレイアウトやアーキテクチャである初期静的フレームを提供することで、読み込み時間を改善できます。 [ 26 ]
サイトがプログレッシブウェブアプリとみなされ、ブラウザでインストールできるための技術的な基本基準は、2016年にラッセルによって説明され[ 27 ]、その後更新されました[ 28 ] [ 29 ]。
nameまたはshort_name、、start_urlおよびdisplay(値がstandalone、fullscreenまたはminimal-ui)、およびicons(192 px と 512 px バージョン) が含まれている必要があります。マニフェストに含まれる情報により、PWA は URL を介して簡単に共有でき、検索エンジンで発見されやすくなり、複雑なインストール手順が軽減されます (ただし、PWA はサードパーティのアプリ ストアに掲載される場合があります)。[ 31 ]さらに、PWA は、ホーム画面への追加、スプラッシュ スクリーンの表示など、ネイティブ アプリ スタイルのインタラクションとナビゲーションをサポートします。プログレッシブウェブアプリを作成するために一般的に使用される技術は数多くあります。ウェブアプリケーションは、インストール基準を満たし、オフラインで動作し、デバイスのホーム画面に追加できる場合、PWA とみなされます。この定義を満たすために、すべての PWA は、少なくともマニフェストとサービスワーカーを必要とします。[ 32 ] [ 33 ] [ 34 ]データの保存、サーバーとの通信、コードの実行には、他の技術が使用される場合があります。
ウェブアプリマニフェスト[ 35 ]は、開発者がウェブアプリケーションに関連付けられたメタデータを格納するための一元化された場所を提供するJSONベースのマニフェスト（通常はmanifest.jsonというラベル）[ 31 ]を定義するWorld Wide Web Consortium（W3C）の仕様です。
このメタデータは、アプリをホーム画面に追加したり、ネイティブアプリと並べて表示したりするために不可欠です。
iOS Safari は部分的にマニフェストを実装していますが、PWA メタデータのほとんどは、メタ タグへの Apple 固有の拡張機能によって定義できます。これらのタグを使用すると、開発者は全画面表示を有効にしたり、アイコンやスプラッシュ スクリーンを定義したり、アプリケーションの名前を指定したりできます。[ 36 ] [ 37 ]
サービスワーカーは、メインドキュメントからのウェブ/HTTPリクエストに応答できるプログラム可能なネットワークプロキシを実装するウェブワーカーです。リモートサーバーの可用性を確認し、サーバーが利用可能な場合はコンテンツをキャッシュし、後でそのコンテンツをドキュメントに提供することができます。サービスワーカーは、他のウェブワーカーと同様に、メインドキュメントのコンテキストとは独立して動作します。サービスワーカーは、プッシュ通知を処理し、バックグラウンドでデータを同期し、リソースリクエストをキャッシュまたは取得し、ネットワークリクエストを傍受し、登録したドキュメントとは独立して、そのドキュメントが読み込まれていない場合でも、集中更新を受信できます。[ 38 ]
サービスワーカーは、登録、インストール、アクティベーションの 3 つのステップのライフサイクルを経ます。登録では、インストールに備えてサービスワーカーの場所をブラウザに伝えます。インストールは、Web アプリのブラウザにサービスワーカーがインストールされていない場合、またはサービスワーカーが更新された場合に発生します。アクティベーションは、PWA のすべてのページが閉じられ、以前のバージョンと更新されたバージョンの間に競合がないときに発生します。ライフサイクルは、ドメインに対してアクティブにできるサービスワーカーは 1 つだけであるため、サービスワーカーのバージョンを切り替える際の一貫性を維持するのにも役立ちます。[ 38 ]
WebAssembly は、コンパイル済みのコードをほぼネイティブの速度で Web ブラウザーで実行できるようにします。[ 39 ]そのため、 Cなどの言語で書かれたライブラリをWeb アプリに追加できます。2015 年に発表され、2017 年 3 月に初めてリリースされた WebAssembly は、2019 年 12 月 5 日に W3C 勧告となり[ 40 ] [ 41 ]、2021 年にACM SIGPLANからプログラミング言語ソフトウェア賞を受賞しました。 [ 42 ]
プログレッシブウェブアプリの実行コンテキストは可能な限りアンロードされるため、プログレッシブウェブアプリは、長期的な内部状態（ユーザーデータ、動的にロードされるアプリケーションリソース）の大部分を以下のいずれかの方法で保存する必要があります。
sessionStorage(ブラウザセッション終了時に消去されるセッション専用ストレージを可能にする)とlocalStorage(セッション間で永続化するストレージを可能にする)という2つのオブジェクトで構成されています。[ 43 ]2017年、Twitterは公式のネイティブAndroidアプリとiOSアプリの代替となるPWAであるTwitter Liteをリリースしました。Twitterによると、Twitter Liteはネイティブアプリの1～3%のサイズしか消費しませんでした。[ 45 ]スターバックスは、同等のiOSアプリよりも99.84%小さいPWAを提供しています。PWAを展開した後、スターバックスはオンライン注文数を2倍に増やし、デスクトップユーザーの注文率はモバイルアプリユーザーとほぼ同じになりました。[ 46 ]
Forbesが2018年に発表したレビューによると、 PinterestのPWAのユーザーは、以前のモバイルWebサイトと比較して、サイトに40%長く滞在したことがわかりました。広告収益率も44%増加し、コアエンゲージメントは60%増加しました。[ 47 ] Flipkartでは、ネイティブアプリをアンインストールした顧客の60%がFlipkart PWAに戻って使用しました。Lancômeでは、ページがインタラクティブになるまでの時間が84%短縮され、PWAを使用したiOSでのコンバージョンが17%増加し、モバイルセッションが53%増加しました。[ 48 ]
PWAは異なるプラットフォーム向けに個別のバンドルや配布を必要とせず、Web経由でユーザーに提供されるため、開発者は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の一部を自動的に公開します（アプリ作成者のリクエストがなくても） 。 [ 50 ]