問題

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

バージョン

iOS 11.3

詳細

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

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

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でスプラッシュ画像を指定する。

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>

補足

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

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

Launch Screen - Icons and Images - iOS Human Interface Guidelines

Sketch

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

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

問題

バージョン

詳細

manifest.json

解決方法

補足

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

Sketch

サンプルコード

参考

Dave Hudson's Mediuim and GitHub

Google

Apple