【解決方法】iOS端末でPWAのスプラッシュ画面が真っ白になる

# 問題
iOS端末でPWA（プログレッシブウェブアプリ）のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。

## バージョン

- iOS 11.3

## 詳細

`manifest.json`で**Name**、**background_color**、**icon**を設定した場合、

- Androidの場合は上記を組み合わせたスプラッシュ画面が表示される
- iOSの場合は真っ白な画面が表示される

<img width="801" alt="pwa-splash.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/c5a1ecce-2c83-efb9-3b14-4c955829842b.png">

##  manifest.json

```json:manifest.json
{
  "name": "Weather PWA",
  "short_name": "Weather",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}
```

# 解決方法

**html(head)**内のリンクタグ`rel=apple-touch-startup-image`でスプラッシュ画像を指定する。

```html:index.html
<!DOCTYPE html>
<html>
<head>
  <!-- 省略 -->

  <!-- Add to splash screen for Safari on iOS -->
  <link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/splash/launch-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/splash/launch-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

  <!-- 省略 -->
</head>
<body>
  <!-- 省略 -->
</body>
</html>
```

<img width="238" alt="pwa-ios-22.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/5d49c84d-cb57-508e-3b99-eefebb8a3d29.png">

# 補足

## スプラッシュ画像のサイズ

iOS端末の機種ごとに必要なスプラッシュ画像のサイズは**iOS Human Interface Guidelines**に掲載されている。

[Launch Screen \- Icons and Images \- iOS Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/)

## Sketch

**Sketch**でArtboardを作成する際に、`AppleDevices`から機種を指定すれば、ガイドラインで指定されているスクリーンサイズのArtboardが作成されるのでスプラッシュ画像の作成に便利。

![pwa-sketch.png](https://qiita-image-store.s3.amazonaws.com/0/141934/23a643f6-50b3-136d-c019-aaedd93ddf00.png)

## サンプルコード

[NaokiIshimura/Qiita\-PWA\-iosSplashScreen](https://github.com/NaokiIshimura/Qiita-PWA-iosSplashScreen)

# 参考

## Dave Hudson's Mediuim and GitHub

- [Progressive Web App Splash Screens – Dave Hudson – Medium](https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210)
- [applification/pwa\-splash\-screens: Repo to support splash screens on Android and iOS for Progressive Web Apps](https://github.com/applification/pwa-splash-screens)

## Google

- [ウェブアプリ マニフェスト  \|  Web  \|  Google Developers](https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja)
- [Configured For A Custom Splash Screen  \|  Tools for Web Developers  \|  Google Developers](https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen)
- [アイコンとブラウザの色  \|  Web  \|  Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/?hl=ja)

## Apple

- [Launch Screen \- Icons and Images \- iOS Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/)
- [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)