iOSのPWAでスプラッシュスクリーンを設定する方法になります。
Androidではスプラッシュスクリーンが上手く表示されるけど、iOSのPWAでは真っ白で表示されない時の対処として使えるかなと思います。
※PWAのモジュールは@nuxtjs/pwaを利用しています。
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に設定するだけでスプラッシュスクリーンが表示されます。