【PWA】スプラッシュ画面の設定で気をつけること #PWA

PWAの特徴の１つであるスプラッシュ画面だが、簡単にできそうで意外と面倒なところがあったのでまとめてみた。
Androidに関しては簡単な設定なので今回は割愛。

スプラッシュ画面の設定で気をつけるポイント

AndroidとiOSで別々の設定が必要。
iOS向けは画面サイズに対応した指定と画像をひとつひとつ設定しないといけない。
その設定が結構シビア。画面サイズ間違えると出ない。
確認に手間がかかる。タブレットやスマホのキャッシュで反映されない場合など。

Safari on iOSは`display:fullscreen`に対応してない

manifestで指定できるdisplayだが、Safari on iOSはfullscreenには対応していない。（2021年12月現在）
スプラッシュ画面はdisplayにfullscreenかstandaloneの指定が必須。
しかしSafariがfullscreenに対応していないために選択肢はstandaloneのみ。

Safari on iOSは`orientation`に対応してない

manifestで指定できるorientationだが、Safari on iOSは対応していない。（2021年12月現在）
指定してもChromeにしか効力を発揮しない。
。。はずだが、なぜかorientationをanyにしないと表示されない。

`apple-touch-startup-image`で`orientation`を指定すると表示されない

iOSのSplash画像は以下のようにデバイスサイズごとに画像を読み込む指定が必要だが、orientationの指定を入れると表示されなくなる。
残念だがportraitとlandscapeで画像を分けるのは現時点では無理そう。
ただportraitサイズだけでも設定しておけば、landscape時もbackground-size:coverのような形でフィットして表示される。

<!-- OK -->
<link href="images/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- NG -->
<link href="images/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />

これに気をつければ表示される

manifestでの設定
- displayの指定はstandalone
- orientationの指定はany

htmlでの設定
- apple-touch-startup-imageでorientationの指定はしない。
- apple-mobile-web-app-capableを指定する。
- apple-touch-fullscreenを指定する。

Safari on iOSの罠多すぎ。

サンプル

manifest.json

{
  "name": "TEST",
  "short_name": "TEST",
  "description": "TEST",
  "icons": [
    {
      "src": "images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone",
  "theme_color": "#fff",
  "background_color": "#add3ee",
  "orientation": "any"
}

sample.html

    <link rel="manifest" href="./manifest.json" crossorigin="use-credentials" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="your_title">
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link rel="apple-touch-icon" href="images/icon-192.png" />
    <link rel="icon" type="image/png" href="images/icon-512.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex, nofollow" />

    <link href="images/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="images/splash/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="images/splash/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    <link href="images/splash/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    <link href="images/splash/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="images/splash/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    <link href="images/splash/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="images/splash/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="images/splash/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="images/splash/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

スプラッシュ画像を全種類用意できない場合

以下サイトにジェネレータがあるので
大きな画像を1枚用意すれば全サイズ書き出してくれる。（portraitのみ）
サンプルのソースも書き出されたものをパスだけ変えただけ。
https://appsco.pe/developer/splash-screens

portraitの場合は2048 x 2732px

参考

https://qiita.com/NaokiIshimura/items/2b18ce82c936399b695c
https://www.simicart.com/blog/pwa-splash-screen/

【PWA】スプラッシュ画面の設定で気をつけること