ohyesiamy bu-pwa — タブの外に出た後の世界
サイトを作るのは /u-web-foundation と /nuxt。それをアプリにするのがここ。
第一原則
- 「PWA 対応」は真偽値ではなく3軸の状態ベクトル。 依頼を受けたら最初に
[申告書 manifest] × [常駐 Service Worker] × [インストール後の統合]のどれを動かすのかを確定する。 これを飛ばすと、オフライン不要の案件に SW を書き、インストール不要の案件に manifest を足す。 - 対応可否を記憶から答えない (C1/C2)。 この領域の前提は 2023・2024・2026 に3回ひっくり返っている (references/timeline.md)。事実を書くときは出典URLと取得日を添える。無ければ調べるか、実測する。
- 段階的向上を破らない。 PWA 機能は「あると良くなる」層であって、無いと壊れる層にしてはいけない。 機能検出で分岐し、未対応環境では素の Web として完動すること。満たせない実装は PWA ではなくブラウザ依存アプリ。
- 静かに壊れる領域なので、目視で完了と言わない。 インストール不可・更新されない・オフラインで白画面は
いずれも例外を投げない。
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 |
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 更新 を判定。検出コードMANIFESTICONSWOFFLINEUPDATEMIXEDQUOTA。--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連番の摂動台帳 ★膜