Nuxt pwa is not displaying splash screens on ios devices

Question

I am using the pwa module in nuxt and have read that ios does display the splash loading screen in the same way as android. The behavior on ios is that it displays a white screen while the app is loading which isn't the nicest experience for the user.

The nuxt pwa module does generate splash screen images but they don't seem to display on a pwa that is launched on an ios device. In my case this is on a iphone6and the file that is created is the wrong size it should be 750x1334 but the link and the file dimensions are 50x1334 which must be incorrect.

I came across am opensource CLI tool pwa-asset-generator which to create all the splash images at the required sizes for ios and the matching link tags. These can be included in the header tag in the nuxt.config.js but I am still not able to see the splash screens on ios and I see that i now have the default link tags for the splash screens created by the pwa module and the once I added to the nuxt.config.js head.

My questions

Are these different link tags now conflicting with each other?
Is there a way to stop the splash images and link tags being created by the pwa module and rather use the ones I created with pwa-asset-generator?

Edit: output from pwa module

output from pwa-asset-generator (folder dist/ios/)

nontechguy · Accepted Answer

I have found the answer to this question on discord and with permission from the original poster I am including their original github link and more detail below.

Sample

In the pwa object in your nuxt-config.js file endure that mobileAppIOS is set to false (iosSizes is also an empty array). Now the pwa module will not generate the splash screens.

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

Then use the pwa-asset-generator to create your ios loading screen assets at all the required sizes. Copy those images into a new folder in your static directory (I called my folder ios and ONLY selected to generate portrait loading screens) and the required link tags that must be added to the links array in the head object of your nuxt.config.js file.

Sample

meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'initial-scale=1.0, user-scalable=no, width=device-width',
      },
      { name: 'mobile-web-app-capable', content: 'yes' },
      { name: 'apple-touch-fullscreen', content: 'yes' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&display=swap'},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-2048-2732.png", media:"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1668-2388.png", media:"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1536-2048.png", media:"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1668-2224.png", media:"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1620-2160.png", media:"(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1284-2778.png", media:"(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1170-2532.png", media:"(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1125-2436.png", media:"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1242-2688.png", media:"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-828-1792.png", media:"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-1242-2208.png", media:"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-750-1334.png", media:"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"},
      { rel:"apple-touch-startup-image", href:"/ios/apple-splash-640-1136.png", media:"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"}
    ],
  },

Now your pwa should display splash screens on IOS devices!

Nuxt pwa is not displaying splash screens on ios devices

Answers (1)

Related Questions