まとめ
- Android
-
manifest.jsonに以下のものが記載されていれば自動で認識される
-
- iOS
- 各iOSデバイスごとの画像が必要
-
link要素で画像を指定する際、画像サイズ、画像解像度、縦向き横向きも指定する - オンラインだがiOS Splash Screen Generatorがあったりする
- Sketch用のiOS Splash screens templateとかもあるみたい
補足
Splash Screensとは
PWAに限らずスマホでアプリを最初に起動したとき、最初のコンテンツがレンダリングを開始するまでに少し時間がかかることがある。そこで白い画面が表示される代わりにたちあがるのがSplash Screen（起動画面）。
Androidはいい感じになるけど
Chromeはmanifest.jsonに以下が記載されているといい感じにスプラッシュ画面を表示する。
-
nameプロパティ background_color- 512px x 512pxの
.pngアイコン
しかしiOSはAndroidと異なり、いつものようにHTMLで<link rel ="apple-touch-startup-image">を指定しかつ各iOSデバイス用に調整されたスプラッシュスクリーンを提供する
必要がある。
iOSでの対処法
実装方法としては以下：
- 画像用意
- HTMLで画像設定
1. 画像用意
面倒なことに、画像1つだけ<link rel="apple-touch-startup-image">に指定しても反映されない。各iOSデバイスの大きさの画像を作り、ターゲットとするデバイスの幅、高さ、orientation、device-pixel-ratioを定義したmedia属性を追加する必要がある
（ちょっと理由が見つけられなかった…誰かわかる方がいらっしゃいましたらご教示ください）
Scketchのテンプレートなどを用いて画像を用意するでもいいし、AppscopeがGeneratorを作ってくれていたりするのでそれを利用するでもいいかもしれない。
このGeneratorはorientationをサポートしてないので注意（指定しないと、横向きで起動した際に白い画面が表示される。適用されないだけで、縦向きのみ適用される）
2. HTMLで画像設定
前述したように<link rel="apple-touch-startup-image">にはターゲットとするデバイスの幅、高さ、orientation、device-pixel-ratioを定義したmedia属性を追加する必要がある。
たとえばiPhone SEをターゲットにすると以下のような感じになる：
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/img/icon_1136x640.png">
どのデバイスがどのサイズかは割愛（Human Interface Guidelinesまたはこの記事を書いている際に見つけたiPhone画面サイズ早見表（図付き） - Qiitaを参照)
これ対象デバイス分書くのつらいorzって思うときは、Generatorをベースに横向き画像分を追記して使ったりEnabling iOS Splash Screens for Progressive Web Appsという記事内で紹介されていたGistのサンプルHTMLを参考に作ってみると多少なり楽かもしれない。