PWA 実践：ツールサイトをインストール可能・オフライン対応に

PWA とは？

PWA（Progressive Web App）は Web アプリにネイティブアプリに近い体験を与えます：

機能	従来の Web	PWA
ホーム画面への追加	❌	✅ Add to Home Screen
オフラインアクセス	❌	✅ Service Worker キャッシュ
プッシュ通知	❌	✅ Push API
フルスクリーン	❌	✅ standalone モード
自動更新	✅	✅ バックグラウンドで SW 更新

ToolsKu のような高頻度で使うツールサイトでは、PDF 結合や JSON 整形などをネイティブアプリのようにワンタップで開けます。

---

Web App Manifest

manifest.json はインストール情報を定義します：

{
  "name": "ToolsKu - オンラインツール集",
  "short_name": "ToolsKu",
  "start_url": "/ja/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

フィールド	役割
display: standalone	ブラウザのアドレスバーを非表示
start_url	インストール後に開くページ
theme_color	ステータス／タイトルバーの色
icons	ホーム画面アイコン（192px と 512px 以上）

---

Service Worker のキャッシュ戦略

キャッシュ優先（ツールの静的リソース）

// 向く用途：あまり変わらない JS/CSS/WASM/フォント
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      return cached || fetch(event.request).then(response => {
        const clone = response.clone();
        caches.open('static-v1').then(cache => cache.put(event.request, clone));
        return response;
      });
    })
  );
});

ネットワーク優先（HTML ページ）

// 向く用途：更新されうる HTML
event.respondWith(
  fetch(event.request).catch(() => caches.match(event.request))
);

ToolsKu のキャッシュ階層

リソース	戦略	TTL
_next/static/**	Cache First	1 年（hash ファイル名）
*.wasm	Cache First	1 年
*.html	Network First	1 時間
i18n JSON	Stale While Revalidate	1 日

---

オフライン時のツール UX

PWA がオフラインのときの UX 設計：

ユーザーがオフラインで ToolsKu を開く
     ↓
Service Worker がキャッシュした HTML/JS/CSS を返す
     ↓
ツールページが読み込まれる（SSG で事前レンダーした HTML）
     ↓
Client Component が起動し、ツールロジックはローカルで実行
     ↓
File API / WASM でファイル処理 → 完全オフライン

ToolsKu のコアツール（PDF、画像、JSON、暗号）はすべてブラウザのローカル API ベースで、もともとオフライン対応です。PWA では静的リソースをキャッシュすれば十分です。

---

インストールプロンプトのベストプラクティス

let deferredPrompt: BeforeInstallPromptEvent;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallBanner(); // カスタムインストール UI
});

installButton.addEventListener('click', async () => {
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  if (outcome === 'accepted') hideInstallBanner();
});

注意：インストール促しは早すぎないでください。2〜3 個のツールを成功利用したあとに出すとコンバージョンが高くなります。

---

まとめ

PWA はツールサイトのリテンション向上に有効です。Web App Manifest がインストール入口、Service Worker がオフラインキャッシュを担い、ToolsKu のブラウザ内処理アーキテクチャにより、オフラインでもオンラインと同じ体験が得られます。