PWA（Progressive Web Apps）

Web 技術で作って「ネイティブアプリのように」振る舞わせる仕組み。ホーム画面に追加、オフライン動作、プッシュ通知、フルスクリーン表示。
Service Worker + Web App Manifest + HTTPS の3点セット。

PWA でできること

ホーム画面に追加 — アイコンで起動、URLバー無し
オフライン動作 — Service Worker のキャッシュで電波無しでも動く
プッシュ通知 — Web Push（iOS は 16.4+ で対応）
バックグラウンド同期 — オフラインで送信した内容を後で送る
定期実行 — Periodic Background Sync（Chrome のみ）
ファイル共有 / 受信 — Web Share API、共有ターゲット
カメラ・GPS・センサー — Web API で（ただしネイティブほど自由ではない）
クレジットカード決済 — Payment Request API

PWA で難しい / できないこと

iOS の機能制限 — Safari は機能を絞っている（後述）
App Store 配布 — できないことはないが、ネイティブの方が確実
バックグラウンド常時実行 — ネイティブほど自由じゃない
Bluetooth / 低レベルセンサー / IoT — Web Bluetooth はあるが対応バラバラ
iOS で Push を使う — ホーム画面に追加された時のみ

3 つの最低要件

HTTPS（または localhost） — Service Worker は HTTPS でしか動かない
Web App Manifest — アプリ名・アイコン・色・起動 URL の設定
Service Worker — オフライン・キャッシュ・通知の中核

30 秒のメンタルモデル

HTML から manifest.json をリンク
JS で navigator.serviceWorker.register("/sw.js")
SW が初回起動してinstall / activateのライフサイクルを通る
以降、fetch イベントで全リクエストを SW が intercept できる
キャッシュ・オフライン・通知は SW の中で実装

最小コード

index.html

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0b0d12" />
<script>
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js")
  }
</script>

manifest.json

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b0d12",
  "theme_color": "#0b0d12",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

sw.js

self.addEventListener("install", () => self.skipWaiting())
self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim()))

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((cached) => cached || fetch(e.request))
  )
})

これだけで「PWA」を名乗れる土台は揃う。後は要件に応じてキャッシュ戦略・通知・オフラインを足す。

2026 春の周辺事情

iOS Safari は 16.4+ でPush 対応、18+ でさらに改善（ただしホーム画面追加が必須）
Workbox（Google）が依然 Service Worker の事実上の標準。Vite には vite-plugin-pwa あり
Background Sync は Chromium のみ（Safari/Firefox 未対応）
WebAPK（Android で本物のアプリ化）は自動
App Store 配布は Capacitor / PWA Builder でネイティブラップ

このノートの読み方

Web App Manifest でメタ情報設定
Service Worker 基本でライフサイクル
キャッシュで戦略（CacheFirst / NetworkFirst 等）
オフラインで UX 設計
インストールで beforeinstallprompt
プッシュ通知で Web Push
バックグラウンドで Sync 系 API
注意点・iOS の制約で本番の罠