✅ PWA化（AQUOS / Android）要点まとめ
- Chromeでサイトを開く
- 「ホーム画面に追加」→「インストール」でアプリ化
- ホーム画面アイコンで起動（URLバーなし / アプリ扱い）
1) 必要ファイル（サーバーに置く）
/manifest.webmanifest（アプリ設定）/sw.js（Service Worker）/pwa-icons/icon-192.png/pwa-icons/icon-512.png
※ /icons はサーバー側の予約パス（Apacheの標準 icons）に当たることがあるため、pwa-icons のように別名が安全。
2) index.html に追加するもの
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#111827">
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
</script>3) manifest.webmanifest（今回の最終形）
{
"id": "/",
"name": "Canape Dashboard",
"short_name": "Canape",
"start_url": "/index.html",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111827",
"icons": [
{ "src": "/pwa-icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/pwa-icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}ポイント：start_url を /index.html に固定すると、共有サーバーのトップ（/）事情でも判定が安定しやすい。
4) sw.js（キャッシュあり版・安定）
const CACHE = "canape-pwa-v2";
const ASSETS = [
"/",
"/index.html",
"/manifest.webmanifest",
"/pwa-icons/icon-192.png",
"/pwa-icons/icon-512.png"
];
self.addEventListener("install", (event) => {
event.waitUntil(caches.open(CACHE).then((c) => c.addAll(ASSETS)));
self.skipWaiting();
});
self.addEventListener("activate", (event) => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((r) => r || fetch(event.request))
);
});5) 反映されない時の対処（Android側）
- 履歴削除だけでは弱い（SW/manifestが残る）
- 設定 → アプリ → Chrome → ストレージとキャッシュ → ストレージを消去
- その後
https://.../index.html?v=数字のように ?v= を付けて開くと早い
6) 最終インストール手順（AQUOS）
- Chromeで
https://canape2020.stars.ne.jp/index.htmlを開く - 右上メニューから ホーム画面に追加
- 表示された流れの中で インストール
必要なら「アプリアイコンを丸角に最適化（maskable）」や「起動時スプラッシュ」も追記できます。