PWAのアプリを作るにあたってのノウハウが溜まってきたので記録する。
iOSでPWAとして認識させるには、以下のメタタグが必要。
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="your app name">
そして、マニフェストファイルが必要。
{
"name": "your app name",
"short_name": "your app name",
"description": "your app description",
"start_url": "./",
"display": "standalone"
}
マニフェストで"display": "standalone"を指定するのと、以下を指定することで、全画面アプリとなる。
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent">
pwacompatを使ってると、black-translucent上手くいかなかった。
アイコン対応するにはapple-touch-iconにpngを指定するだけでOK。
<link
rel="apple-touch-icon"
type="image/png"
sizes="180x180"
href="./icons/apple-touch-icon.png"
/>
スプラッシュを指定するのが一番面倒。
それぞれの機種に対応した画像サイズを用意する必要がある。
そして、apple-touch-startup-imageに指定するのだが、
対象の機種のときだけ有効になるようにメディアクエリが必要となる。
<link
rel="apple-touch-startup-image"
href="./iphone5_splash.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
このサイト使うと、必要な画像と、タグの書き方を教えてくれる。
しかし、iPhoneXRは指定が間違っている。
正しくは、(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)。
さらに、ダークモードの場合にスプラッシュの色を変えたい場合には、以下のようにメディアクエリ指定する。
<!-- ダークモード用 -->
<link
rel="apple-touch-startup-image"
href="./iphone5_splash.png"
media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
<!-- ライトモード用 -->
<link
rel="apple-touch-startup-image"
href="./iphone5_splash.png"
media="(not (prefers-color-scheme: dark)) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
スプラッシュの画像はインストール時に固定されてしまうので、
インストール時点でダークモードで、後からライトモードにしても、ダークモードの画像が出る。
追加のメタタグは不要で、マニフェストファイルがあればよい。
{
"name": "your app name",
"short_name": "your app name",
"description": "your app description",
"start_url": "./",
"display": "standalone"
}
マニフェストで"display": "fullscreen"を指定すると全画面アプリとなる。
（iOSでは"display": "fullscreen"指定しても"display": "standalone"扱いとなる）
が、Material UIのダイアログとテキスト入力でおかしな動作となる。
仕方がないので、"display": "standalone"とし、
ステータスバーの色を、背景色と合わせて疑似フルスクリーンとした。
"display": "standalone"では、ステータスバーに色がつく。
タイトルバーと合わせることでネイティブっぽく見せる仕組み。
色を指定するには、メタタグでtheme-colorを指定する。
これも、ダークモード対応のため、メディアクエリで切り替える。
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000">
マニフェストにも、theme_colorがあるが、効かなかった。
アイコン対応するにはマニフェストのiconsにpngを指定するだけでOK。
{
"icons": [
{
"src": "./icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
マニフェストに指定の、iconsとbackground_colorでスプラッシュ画像が自動生成される？
こちらも、インストール時に画像固定される？
Androidで"display": "fullscreen"が使えるように、MaterialUIを修正できたら、fullscreenを使いたい。