PWA（Progressive Web App）は、Webアプリにネイティブアプリのような体験を加える仕組みです。ホーム画面への追加・オフライン対応・プッシュ通知などを、Webサイトのコードを大きく変えずに実現できます。本記事では、PWAのメリットと実装手順をわかりやすく解説します。
PWAとは
PWAは、Webの利点（URLで共有・SEO対応）を保ちつつ、ネイティブアプリ的な体験を実現する考え方です。Service WorkerとWeb App Manifestという2つの技術がコアになります。AppStore審査を経ずに配布できる「インストール可能なWeb」とも言えます。
PWAの主なメリット
- ホーム画面に追加できる（アプリのように起動）
- オフラインでも閲覧可能
- Webプッシュ通知でリエンゲージメント
- iOS・Android・PC・タブレットで共通体験
- アプリストア審査を経ず即時配布
必須の要件
- HTTPSで配信されている
- Web App Manifest（manifest.webmanifest）を持つ
- Service Workerが登録されている
- アイコンやスタートURLが定義されている
実装手順
1. Manifestファイルを作る
{
"name": "noritamatech",
"short_name": "noritamatech",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}<link rel="manifest" href="/manifest.webmanifest">2. Service Workerを登録
// app.ts
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
// sw.js
self.addEventListener('install', e => {
e.waitUntil(caches.open('v1').then(c => c.addAll(['/', '/offline.html'])));
});
self.addEventListener('fetch', e => {
e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});3. 動作確認
Chrome DevToolsの「Application」タブで Manifest と Service Worker の登録状況を確認できます。Lighthouseの「PWA」監査を実行すると、必要要件のチェックリストを自動で出してくれます。
WorkboxやVite PWAで楽をする
Service Workerを手書きで運用するのは大変なので、Workbox（Google製）やvite-plugin-pwaを使うのが定番です。キャッシュ戦略・バージョン管理・更新通知などが宣言的に書けます。
注意点
- iOS Safariは一部機能（プッシュ通知等）の制約あり（年々緩和中）
- キャッシュ戦略を誤ると「更新が反映されない」問題が起きやすい
- HTTPSが必須（localhostは例外）
まとめ
PWAは、Webサイトをそのまま「インストール可能なアプリ」に進化させる強力な仕組みです。Manifest＋Service Workerの最小構成から始め、慣れたらWorkboxでキャッシュ戦略を整えるのが実装の王道。リテンション施策が必要なメディアやECに特に効果的です。
