PWA
PWA対応とmanifest.json Jul. 8, 2024
manifest.jsonがまだCosenseにアップデートされていないようです。 baku89.icon
code:manifest.json
{
"name": "Scrapbox",
"icons": [
{
"src": "/assets/img/favicon/chrome-icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/assets/img/favicon/chrome-icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone"
}
2024-07-09 updateされたようですtakker.icon
2024-07-10 早い....!!baku89.icon
また、個人的にはなりますが、ウィンドウのタイトルバーが省略されるようにmanifestを設定して頂けると、スマホやPC版での画面領域を有効に使え、かつスッキリしてうれしいです。"display": "standalone" にはなっているので、恐らく"background_color" などを適切に設定する必要があるのでしょうか。
ちなみに、CustomCSSなどの設定を受けてbackground_colorを動的に設定することもできます。
code:ts
document.querySelector('metaname=theme-color')!.setAttribute('content', '#ff0000') その際には、env(safe-area-inset) で適切にタイトルバーや下部UIとOS側のUI領域(iPhone X以降のホームバーや、PCでの「閉じる」ボタンなど)とのマージンを取ってあげる必要もありそうです。
https://gyazo.com/adbe6c1ae464220c419042d870503926
タイトルバーが無い例
https://gyazo.com/7346d271516bbbee7cce901f5ef40e32
2024-07-09現在だと、PC版Chromium系列のbrowserが対応しているようです