Nuxt.js（@nuxtjs/pwa）iOSのPWAでスプラッシュスクリーンを設定する

iOSのPWAでスプラッシュスクリーンを設定する方法になります。

Androidではスプラッシュスクリーンが上手く表示されるけど、iOSのPWAでは真っ白で表示されない時の対処として使えるかなと思います。

※PWAのモジュールは[@nuxtjs/pwa]([https://github.com/nuxt-community/pwa-module)を利用しています。

## nuxt.config.jsでのPWAの設定

```nuxt.config.js

export default {
  head: {
    meta: [
      { name: 'mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)',
        href: '/iphone5.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)',
        href: '/iphone6.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)',
        href: '/iphoneplus.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)',
        href: '/iphonex.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)',
        href: '/iphonexr.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)',
        href: '/iphonexsmax.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)',
        href: '/ipad.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)',
        href: '/ipadpro1.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)',
        href: '/ipadpro3.png'
      },
      {
        rel: 'apple-touch-startup-image',
        media:
          '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)',
        href: '/ipadpro2.png'
      }
    ]
  },
  /*
   ** @nuxtjs/pwa Configuration
   */
  pwa: {
    icon: {
      /* icon options */
      iosSizes: []
    },
    meta: {
      /* meta options */
      mobileAppIOS: false
    },
    workbox: {...}
  }
}
```
`mobileAppIOS`を`true`にすることで自動的にスプラッシュスクリーンを作成してくれるようですが、今回はそれを使用せずこちらで作成した画像で設定します。
https://pwa.nuxtjs.org/meta

PWAのオプションを下記のように設定します。

```js
pwa: {
  icon: {
    iosSizes: []
  },
  meta: {
    mobileAppIOS: false
  }
}
```

続いて、iOS用のスプラッシュスクリーンの画像を全て`link`タグに設定します。

```js
link: [
  {
    rel: 'apple-touch-startup-image',
    media:
      '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)',
    href: '/iphone5.png'
  }
  /*　以下省略 */
]
```

画像は`static`ディレクトリに配置しています。
上記の設定でiOSのPWAでもスプラッシュスクリーンを表示することができました。

スプラッシュスクリーンの各画像の作成は、下記のサイトとライブラリが便利です。
- https://appsco.pe/developer/splash-screens
- https://www.npmjs.com/package/pwa-asset-generator

## 参考

https://stackoverflow.com/questions/70036043/nuxt-pwa-is-not-displaying-splash-screens-on-ios-devices

https://github.com/nuxt-community/pwa-module/issues/443#issuecomment-874339114

https://qiita.com/fluflufluffy/items/506422821c675b61c8fc

## Androidのスプラッシュスクリーン
Androidの場合は`manifest.json`の`icons`に設定するだけでスプラッシュスクリーンが表示されます。