# Bu Pwa

> Progressive Web App の司令塔。「ホーム画面に追加された後の世界」を扱う —— Web App Manifest / Service Worker / インストール後の OS 統合の3軸を分離して判断し、 プラットフォーム差 (iOS・Android・デスクトップ) を実測値で埋め、機械検証を通してから 「PWA 対応した」と言う。PWA, pwa化, プログレッシブウェブアプリ, ホーム画面に追加, ホーム画面 アプリ, インストール可能, installable, manifest, manifest.json, web app manifest, Service Worker, サービスワーカー, オフライン対応, オフラインで動く, キャッシュ戦略, Cache Storage, workbox, standalone, display standalone, スプラッシュ, アプリアイコン, maskable, Web Push, プッシュ通知 web, beforeinstallprompt, add to home screen, A2HS, WebAPK, share_target, file_handlers, launch_handler, Badging, オフラインファースト, アプリっぽくしたい, ストアに出さずアプリ化 で発火。

- Skill: `ohyesiamy/bu-pwa` (Agent Skill, multi-file: 19 files)
- Install (CLI): `npx skillmds@latest add ohyesiamy/bu-pwa`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ohyesiamy/bu-pwa/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ohyesiamy (https://skillmd.com/u/ohyesiamy)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ohyesiamy/bu-pwa

---


<!-- auto-load: PWA, pwa化, プログレッシブウェブアプリ, ホーム画面に追加, ホーム画面 アプリ, インストール可能, installable, manifest.json, web app manifest, Service Worker, サービスワーカー, オフライン対応, オフラインで動く, キャッシュ戦略, Cache Storage, workbox, standalone, スプラッシュ, maskable, Web Push, beforeinstallprompt, WebAPK, share_target, file_handlers, launch_handler, Badging, アプリっぽくしたい, ストアに出さずアプリ化 -->

# bu-pwa — タブの外に出た後の世界

サイトを作るのは `/u-web-foundation` と `/nuxt`。**それをアプリにするのがここ**。

## 第一原則

1. **「PWA 対応」は真偽値ではなく3軸の状態ベクトル。** 依頼を受けたら最初に
   `[申告書 manifest] × [常駐 Service Worker] × [インストール後の統合]` の**どれを動かすのかを確定**する。
   これを飛ばすと、オフライン不要の案件に SW を書き、インストール不要の案件に manifest を足す。
2. **対応可否を記憶から答えない (C1/C2)。** この領域の前提は 2023・2024・2026 に3回ひっくり返っている
   (references/timeline.md)。事実を書くときは**出典URLと取得日**を添える。無ければ調べるか、実測する。
3. **段階的向上を破らない。** PWA 機能は「あると良くなる」層であって、無いと壊れる層にしてはいけない。
   機能検出で分岐し、未対応環境では素の Web として完動すること。満たせない実装は PWA ではなくブラウザ依存アプリ。
4. **静かに壊れる領域なので、目視で完了と言わない。** インストール不可・更新されない・オフラインで白画面は
   いずれも例外を投げない。`tools/verify-pwa.mjs` を通し、**最後に実機でホーム画面から起動する**まで完了ではない。

## 入口 — 4分岐

| 依頼の実体 | 行き先 |
|---|---|
| A. 入れられるようにしたい (アイコン・導線・検出) | `references/installability.md` |
| B. 網が無くても動かしたい (オフライン・キャッシュ・更新) | `references/service-worker.md` → `references/offline-data.md`（**Nuxt なら `nuxt-pwa.md`**） |
| C. OS と繋ぎたい (通知・共有・ファイル・ショートカット) | `references/os-integration.md` |
| D. 入らない・更新されない・通知が来ない | `references/pitfalls.md` ← **実務で最頻の入口。ここから引く** |

どの枝でも `references/platform-matrix.md` (プラットフォーム別の実体差・取得日つき) を横断参照する。

## どの枝でも必ず通る3つの門

| 門 | 内容 |
|---|---|
| 門1 **対象の確定** | iOS を含むか。**通知が要件なら iOS ではインストール導線が必須要件へ昇格**する (未インストールでは Push が出せない) |
| 門2 **鮮度の確認** | 対応状況は WebKit / Chrome のリリースノート・MDN・実機で確認。取得日つきで書く |
| 門3 **機械検証** | `node tools/verify-pwa.mjs <url|dir>` が緑 → その後に実機で追加して確認 (S5) |

## 3軸の要点 (詳細は references)

- **manifest** = OS に出す申告書。読まれるのは主にインストール時と更新検査時。
  Chromium の必須は `name|short_name` / `icons`(192・512) / `start_url` / `display|display_override` / HTTPS。
  **iOS 26 以降 Safari 側の必須要件はゼロ**（どのサイトもホーム画面追加で Web アプリとして開く）。
- **Service Worker** = ページとネットワークの間に立つ常駐。DOM に触れない別スレッド、HTTPS 必須。
  返し方は4つ (棚優先 / 棚→裏で更新 / 網優先 / 網のみ) を**URL ごとに割り当てる**のが設計本体。
- **インストール後** = 変わるのは6つ：画面・所属・寿命・容量・権限・リンクの行き先 (platform-matrix.md)。

## 境界 (重複を作らない)

| スキル | 分担 |
|---|---|
| `/u-web-foundation` `/nuxt` | サイト実装そのもの。bu-pwa はアプリ化層だけ |
| `/u-organic-ui` | 視覚品質。bu-pwa は standalone 時の制約 (safe-area・戻る不在) だけ持つ |
| `/chrome-extension` | MV3 拡張。**同じ「Service Worker」でも別物**。混同は pitfalls.md 参照 |
| `/bu-jp-sitemap-and-links` | URL 設計。`scope` / `start_url` はその従属 |

## 自己改善 (膜)

実案件で踏んだ事故・実測値・仕様変更は `references/creation-log.md` に **P連番**で記録する。
形式は {症状 / 当時の判定 / 真因 / 規則候補}。同種 n=2 で該当 reference の規則へ昇格、n=3 で本ファイルを改訂。
**仕様変更を検知したら timeline.md にも1行足す** — 古い前提で書かれたコードの診断材料になる。

## tools

- `tools/verify-pwa.mjs` — S1 静的 / S2 登録 / S3 遮断 / S4 更新 を判定。検出コード
  `MANIFEST` `ICON` `SW` `OFFLINE` `UPDATE` `MIXED` `QUOTA`。`--selftest` で**わざと壊した検体**に対する発火を自己確認する。
- `tools/probe-support.mjs` — 実ブラウザで対応 API を列挙して JSON 出力。記憶で断定しないための実測入口。

## references

- `installability.md` — manifest 全メンバー / インストール要件 / 導線 / 検出 / アイコン
- `service-worker.md` — ライフサイクル / 4戦略 / 更新問題 / Workbox 判断
- `nuxt-pwa.md` — @vite-pwa/nuxt の実装層（生成 sw.js の読み方 / SSR-SSG 分岐 / 更新事故 / 実案件の検死）
- `offline-data.md` — Cache API と IndexedDB / 容量と退去 / localStorage を選ばない理由
- `os-integration.md` — Push / Badging / share_target / file_handlers / launch_handler ほか
- `platform-matrix.md` — iOS・Android・デスクトップの実体差 (**取得日と出典URLが必須列**)
- `timeline.md` — 2007→2026 の時系列と、3回の前提反転
- `pitfalls.md` — 症状→原因の故障台帳
- `creation-log.md` — P連番の摂動台帳 ★膜