Edited at

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

More than 1 year has passed since last update.


問題

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


バージョン


  • iOS 11.3


詳細

manifest.jsonNamebackground_coloriconを設定した場合、


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

  • iOSの場合は真っ白な画面が表示される

pwa-splash.png


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


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>


pwa-ios-22.png


補足


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

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

Launch Screen - Icons and Images - iOS Human Interface Guidelines


Sketch

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

pwa-sketch.png


サンプルコード

NaokiIshimura/Qiita-PWA-iosSplashScreen


参考


Dave Hudson's Mediuim and GitHub


Google


Apple