PWAとは、プログレッシブウェブアプリのことです。標準のウェブ技術で作られたウェブサイトで、プラットフォーム固有のアプリのように振る舞います。インストールでき、アイコン付きの専用ウィンドウで開き、オフラインでも動作します。MDNはこれを「ウェブプラットフォームの技術で作られながら、プラットフォーム固有のアプリに近いユーザー体験を提供するアプリ」と定義しています（MDN、2025年12月）。この機能の大部分を担うのは2つのファイルです。アプリを記述するウェブアプリマニフェストと、オフライン利用のためのサービスワーカーです。
プログレッシブウェブアプリとは
PWAは、ウェブサイトの性質を保ちながら、ネイティブアプリの性質の一部を備えたウェブアプリです。MDNによると、ウェブサイトから引き継ぐのは、すべてのOSで共通の1つのコードベースと、ウェブからの直接アクセスです。プラットフォーム固有のアプリからは、インストール（アプリストアからでも、ウェブから直接でも可能）、アイコン付きのスタンドアロンアプリとしての起動、オフラインやバックグラウンドでの動作、ブラウザのUIのない全画面表示、共有先への登録などのOS連携を取り入れています。
PWAは、通常のサイトに2つの技術的な機能を加えたものです。
- ウェブアプリマニフェスト。アプリの名前、アイコン、起動方法をブラウザが読み取るためのJSONファイルです。
- サービスワーカー。アプリのページを制御するスクリプトで、MDNの言葉を借りると、サーバーからリソースを取得してローカルキャッシュに追加できます。
web.devも同じ考え方を説明しています。PWAはプログレッシブエンハンスメントを使って、より信頼性が高く統合されたエクスペリエンスを提供し、インストールもできる、というものです（web.dev、2024年9月）。
PWAがインストール可能になる条件
インストールできるかどうかはブラウザが判断し、その条件は異なります。Chromium系ブラウザ（Chrome、Samsung Internet、Edge）について、MDNは次の条件を挙げています（MDN、Making PWAs installable、2026年10月）。
| 条件 | 内容 |
|---|---|
| HTTPS | httpsで配信されていること。開発時はlocalhostまたは127.0.0.1でも可 |
マニフェストのnameまたはshort_name |
少なくとも一方が必要 |
マニフェストのicons |
192 px と 512 px のアイコンを含むこと |
マニフェストのstart_url |
必須 |
マニフェストのdisplayまたはdisplay_override |
必須。Chromeはfullscreen、standalone、minimal-ui、window-controls-overlayを受け付ける |
prefer_related_applications |
falseにするか、省略すること |
Chromeはさらに、beforeinstallpromptイベントを発火させる前にユーザーとの関わりを待ちます。ユーザーがページを一度以上クリックかタップし、少なくとも30秒間ページを見ている必要があります（web.dev、2024年9月）。
サービスワーカーは上の条件に含まれません。MDNによると、インストールの必須条件ではありませんが、オフライン利用のために多くのPWAが使っています。上の表を満たす最小限のマニフェストは次のとおりです。
{
"name": "My PWA",
"short_name": "MyPWA",
"start_url": "/",
"display": "standalone",
"icons": [
{ "src": "/icons/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icons/512.png", "type": "image/png", "sizes": "512x512" }
]
}各ページから <link rel="manifest" href="/manifest.webmanifest"> で読み込んでください。
PWAがオフラインで動く仕組み
サービスワーカーは、ネットワークリクエストを横取りし、キャッシュから応答することでオフライン利用を可能にします。ページ側で登録し、ワーカー側でfetchイベントを処理します。以下はMDNの「キャッシュ優先」パターンを簡略化したものです。
// ページ内
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}// service-worker.js
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cached) => cached || fetch(event.request))
);
});この例はキャッシュから応答し、なければネットワークに頼りますが、キャッシュへの書き込みは行いません。MDNの完全な例では、書き込みの処理とフォールバックページが加わります。MDNはまた、キャッシュ優先は古い応答を返しやすく、ネットワーク優先はデバイスがオフラインのときにキャッシュへ戻ると指摘しています。最適な戦略はアプリによって異なります。サービスワーカーはBaselineで広く利用可能です（2020年10月から。最初の対応バージョンはChrome 45、Firefox 44、Safari 11.1で、web-features 3.44.0による）。
iOSとAndroidの違い
AndroidとiOSはどちらもPWAをインストールできますが、方法と一部の機能が異なります。2026年10月時点のMDN、Apple、web-featuresの情報は次のとおりです。
| プラットフォームとブラウザ | インストールの動作 |
|---|---|
| Android版Chrome | Google Mobile Servicesのある端末ではWebAPKとしてインストール。ない場合はブラウザのバッジ付きショートカットを追加 |
| Samsung Internet | PWAをWebAPKとしてインストールし、アプリランチャーと切り替え画面に表示 |
| デスクトップ版Firefox | マニフェストからのPWAインストールに対応しない |
| iOS版Safari | 共有メニューから。iOS 16.4以降はChrome、Edge、Firefox、Orionからも可能 |
| macOS版Safari | Dockに追加（macOS Sonoma、Safari 17）。マニフェストの有無にかかわらず任意のサイトで可能 |
開発者にとって重要なiOSの点は3つあります。
- MDNによると、iOSでは
beforeinstallpromptに対応していないため、独自のインストールボタンは表示できません。代わりに、共有メニューの手順をUIで説明してください。web.devも、デザイナーがそうした画面を用意することがよくあると述べています。 - iOS 26以降、「ホーム画面に追加したウェブサイトは、すべてウェブアプリとして開く」が既定の動作になりました。サイトにマニフェストがあっても、ユーザーは「ウェブアプリとして開く」をオフにできます（WebKitブログ、2025年6月9日）。
- iOSとiPadOSのウェブプッシュ通知は、iOS 16.4以降でホーム画面のウェブアプリに提供されています。マニフェストの
displayがstandaloneまたはfullscreenに設定されていれば、そのサイトはホーム画面のウェブアプリとみなされ、通知の許可要求はユーザー操作から行う必要があります（WebKitブログ、2023年2月16日）。web-featuresでは、Pushは2023年3月から新たに利用可能になったBaselineで、2025年9月から広く利用可能になったとされています。最初の対応はSafari 16とiOS版Safari 16.4です。
ホーム画面への追加の詳細はiOSのリリースごとに変わるため、対象とするバージョンを確認してください。
PWAの事例
web.devのPWAガイドには、PWAを公開した後の成果を報告した企業が載っています。数値は各社の自己申告で、web.devがまとめたものです（2024年9月、web.dev）。
| 企業 | 報告された成果 |
|---|---|
| Hulu | 旧アプリのユーザーの96%が5か月以内にPWAへ移行 |
| JD.ID | モバイルのコンバージョン率が53%向上 |
| Clipchamp | デスクトップアプリのユーザーより、ユーザー維持率が9%高い |
| Gravit Designer | PWAのユーザーの活動量が24%多い |
これらは各社が自社製品について報告した結果です。
PWAとネイティブアプリの選び方
実用的な目安は次のとおりです。1つのウェブコードベースとウェブからの配布が最も重要ならPWAを選び、ウェブでは提供されないプラットフォーム機能が必要ならネイティブアプリを選びます。MDNは、PWAもアプリストアで配布できると述べているため、両者は排他的ではありません。サイトと並行してネイティブアプリを公開する場合、リンクからアプリを直接開けます。設定方法はユニバーサルリンクとAndroidのApp Linksで説明しています。
スマートフォンでPWAをテストする方法
PWAのテストは3段階で行います。ファイルはDevTools、インストールは実機、レイアウトはスマートフォンサイズの表示で確認します。
- DevTools：Chrome DevToolsのApplicationパネルにあるManifestでアプリのフィールドとアイコンを確認できます。Installabilityのセクションには、問題があればそのエラーが表示されます。Service WorkersパネルのOfflineチェックボックスを使うと、DevToolsをオフラインモードにできます（Chrome for Developers）。LighthouseのPWA検証は非推奨になっている（2024年4月のページ更新）ため、Applicationパネルを使ってください。
- 実機：ブラウザからアプリをインストールし、機内モードにしてからアイコンで開きます。インストールの流れと通知の動作はiOSとAndroidで異なるため、両方で確認してください。
- スマートフォンのサイズ：他のモバイルサイトと同様に、スマートフォンの幅でページを確認してください。モバイル対応サイトの作り方とモバイルサイトのテストチェックリストが参考になります。iOSの実機がない場合は、iPhoneがなくてもiPhone向けにテストする方法を参照してください。
Mobile View Extensionは、現在のタブを、スマートフォンのユーザーエージェント、画面サイズ、ピクセル比で読み込み直します。PWAのページをスマートフォンのサイズで素早く確認するのに便利です。ただし、PWAのインストールやサービスワーカーの実行、スタンドアロンモードの動作は再現できません。デスクトップ版Chromeのエンジンでマウス操作を前提に動くため、ホーム画面での振る舞いも見えません。インストールとオフライン利用の確認は実機で行ってください。速度についてはモバイルページ速度テストのガイドで扱っています。
よくある質問
PWAとは簡単に言うと何ですか？
PWAは、デバイスにインストールしてアプリのように使えるウェブサイトです。通常のウェブ技術で作られ、マニフェストとサービスワーカーがインストール後の動作やオフライン動作を担います。
PWAの条件は何ですか？
Chromium系ブラウザでインストールするには、HTTPS、名前を持つマニフェスト、192 pxと512 pxのアイコン、start_urlとdisplay、そしてprefer_related_applicationsをtrueにしないことが必要です。インストールにサービスワーカーは必須ではありませんが、オフライン利用には必要です。
PWAはiPhoneで動きますか？
はい。iOS 16.4以降では、SafariやChrome、Edge、Firefox、Orionの共有メニューからインストールできます。ホーム画面のウェブアプリはウェブプッシュ通知も受け取れます。iOSにはbeforeinstallpromptがないため、ユーザーは共有メニューからインストールします。
PWAはオフラインで動きますか？
はい。サービスワーカーが必要なページやファイルをキャッシュしていれば動きます。サービスワーカーがなくても、Chromium系ブラウザではインストールは可能ですが、オフラインの処理は備えていません。