【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`のみ。**

https://developer.mozilla.org/ja/docs/Web/Manifest/display

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

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

https://developer.mozilla.org/ja/docs/Web/Manifest/orientation

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

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

```html
<!-- 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/

https://www.simicart.com/