📱

iOSのPWAでスプラッシュ画面を実装する

2024/10/29に公開

PWA

React

初心者

tech

こんにちは、もっくんです。
PWAのスプラッシュ画面を実装するときにiOSで実装するときに少し手こずったのでやり方を共有しておきます
Androidの説明は省きます

実装するには

"manifest.json" "index.html" "スプラッシュ画像"
をちゃんと書かないと表示されない

manifest.jsonをちゃんと書く

name
display: standalone
theme_color
background_color
orientation: 'any'
の5つがスプラッシュ画面実装に必要らしいです

manifest設定例

manifest.json

{
  "name": "XXXX", ※
  "short_name": "XXXX",
  "description": "XXXX",
  "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": "#ffffff", ※
  "background_color": "#ffffff", ※
  "orientation": "any" ※
}

index.htmlをちゃんと書く

apple-touch-startup-image ってのをheadタグの中に書かないといけない

index.html

<!--設定例-->
<link rel="apple-touch-startup-image" media="(device-width: LogicalWidthpx) and (device-height: LogicalHeightpx) and (-webkit-device-pixel-ratio: 3or2)" href="splash.png">

(index.htmlに書かないとiOSの制約的にダメらしい)

各値は https://www.ios-resolution.com/ を参考にすると良いかも
Logical Width と Logical Height を見よう

用意する画像は Physical Width と Physical Height のサイズの通りに作る
→ デバイスごとに画像が必要

最終的に下のようになる

index.html

    headの中に

    <!-- iphone 5, 5S, SE1 -->
    <link href="public/splash/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

    <!-- iphone6, 6s ,7 ,8 ,SE2 -->
    <link href="public/splash/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    <!-- iphoneX, Xs, 11Pro, 12mini, 13mini, SE3 -->
    <link href="public/splash/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphone6+, 6s+, 7+, 8+  -->
    <link href="public/splash/splash-1080x1920.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphoneXR, 11,  -->
    <link href="public/splash/splash-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

    <!-- iphoneXsMax, 11ProMAX-->
    <link href="public/splash/splash-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!--iphone12, 12Pro, 13, 13Pro, 14  -->
    <link href="public/splash/splash-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphone12ProMAX, 13ProMAX, 14+ -->
    <link href="public/splash/splash-1284x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphone14Pro, 15, 15Pro, 16 -->
    <link href="public/splash/splash-1179x2556.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphone14ProMAX, 15+, 15ProMAX, 16+ -->
    <link href="public/splash/splash-1290x2796.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphone16Pro -->
    <link href="public/splash/splash-1206x2622.png" media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <!-- iphone16ProMAX -->
    <link href="public/splash/splash-1320x2868.png" media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

おまけ

スプラッシュ画像を作ったときに使ったfigmaファイルを共有しておきます。

実装するには

manifest.jsonをちゃんと書く

index.htmlをちゃんと書く

おまけ

参考

Discussion