はじめに
PWA について、Android 版 Chrome が「インストールしますか？」と尋ねてくる最小の内容って何なのか、試してみました。
（オフライン動作は目指していません。）
結論
| 項目 | 内容 |
|---|---|
| icon | １つでＯＫ |
| Service Worker | fetch イベントのリスナーのみでＯＫ |
| fetch リスナー | 空でＯＫ |
サンプル
manifest.json
{
"name": "minimum",
"display": "standalone",
"start_url": "https://foo.bar/index.html",
"icons": [
{
"type": "image/png",
"src": "assets/images/icon-512.png",
"sizes": "512x512"
}
]
}
manifest.json の項目は Chrome のバージョンによって増減があるかと思います。上記は 81.0.4044.117 で確認しました。
アイコンは大は小を兼ねる発想で 512x512 にしておきました。
index.html
<html>
<head>
<title>minimum</title>
<link rel='manifest' href='manifest.json' />
<link rel='icon' href='assets/images/icon-512.png' />
</head>
<body>
<center>
<img src='assets/images/icon-512.png' />
</center>
<script>
if ( 'serviceWorker' in navigator ) {
navigator.serviceWorker.register('service-worker.js')
.then(function() {
console.log('ServiceWorker was registered.');
});
}
</script>
</body>
</html>
favicon は必須じゃないですし body も真っ白でもいいと思いますが、せっかくモノがあるので書いておきました。
逆に register() に catch() 書いたほうがいいですね。
service-worker.js
self.addEventListener('fetch', function(event) {});
install イベントは予めキャッシュにファイルを入れておく機会として利用できますが、利用しなくても別に問題ないです。
activate イベントは古い世代のキャッシュを削除する機会として利用できますが、利用しなくても別に問題ないです。
いずれも fetch が正しく機能するために必要なら利用すればいい、という感じでしょうか。
おわりに
行儀が良いとは言えないですが、「ホームにアイコン設置」が目的ならば、最小の内容でも十分かと思います。