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のオプションを下記のように設定します。

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

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

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でもスプラッシュスクリーンを表示することができました。

スプラッシュスクリーンの各画像の作成は、下記のサイトとライブラリが便利です。

参考

Androidのスプラッシュスクリーン

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