Splashscreen Support

[jhull]

Am I correct in understanding that there is no current module/support for splash screens? Currently, I'm doing this:

    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { href='/splashscreens/iphone5_splash.png', media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)', rel='apple-touch-startup-image' },
      { href='/splashscreens/iphone6_splash.png', media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)', rel='apple-touch-startup-image' },
      { href='/splashscreens/iphoneplus_splash.png', media='(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)', rel='apple-touch-startup-image' },
...etc.
]

in my nuxt.config.js

Also, I have this:

pwa: {
    meta: {
      mobileAppIOS: 'true',
      appleStatusBarStyle: 'black-translucent',
      viewport: "initial-scale=1, viewport-fit=cover",
      theme_color: "#E9B949"
    },

But the splash screen that comes up is a giant version of my 'icon.png' not the nice splash screens referenced above.

[RubenVanEldik]

Hi Jhull,

There is support for automatic iOS splash screens since October (#308).

I just looked at the PR and it seems that the PR uses the standard icon to create a splash screen. This could work by creating a very large icon, but this doesn't work if you want to have a different splash screen or if your icon size is less than the size of the splash screen (since splash screens only work if they're exactly the same size as the pixels on the phone).

I'll look into it and see if I can fix it with an extra PR.

[RubenVanEldik]

I have looked into it, but I'm not sure if understand the module enough to make the changes. @dvarnai, could you see if you can add an iosSplashFileName so people can use a different file for the splash screen?

[jhull]

Thanks @RubenVanEldik for your help.

I ended up going with a manual solution as the module currently leaves out a bunch of device resolutions (as well as doubling them for portrait and landscape). I was using this pwa-asset-generator to generate them manually, but found the automatic solution lacking with the image/icon I was using.

What worked for me was creating the images manually one-by-one, then adding this to the head section of nuxt.config.js:

      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2048x2732.png", media: "(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2732x2048.png", media: "(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1668x2388.png", media: "(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2388x1668.png", media: "(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1536x2048.png", media: "(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2048x1536.png", media: "(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1668x2224.png", media: "(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2224x1668.png", media: "(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1620x2160.png", media: "(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2160x1620.png", media: "(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1284x2778.png", media: "(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2778x1284.png", media: "(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1170x2532.png", media: "(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2532x1170.png", media: "(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1125x2436.png", media: "(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2436x1125.png", media: "(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1242x2688.png", media: "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-2688x1242.png", media: "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-828x1792.png", media: "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1792x828.png", media: "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1080x1920.png", media: "(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1920x1080.png", media: "(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-750x1334.png", media: "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1334x750.png", media: "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-640x1136.png", media: "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" },
      { rel: "apple-touch-startup-image", href: "/splashscreens/apple-splash-1136x640.png", media: "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" }

This is the full collection of devices and sizes from the Apple HID. The asset generator module above scrapes this page for the info, but I learned that its not always kept up-to-date, thus just going to keep this manual for now.

Pulling out the nuxtPWA module, I also had to add this to my head as well:

  meta:[
      { name: 'apple-mobile-web-app-capable', content: 'yes'},
      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'},
      { name: 'apple-mobile-web-app-title', content: "app-name"},
      { name: 'theme-color', content: "#E9B949" }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // PWA config
      { rel: 'manifest', href: '/site.webmanifest' },
      { rel: "apple-touch-icon", sizes: "512x512", href: "/icon.png" },
      { rel: "shortcut-icon", sizes: "64x64", href: "/icon.png" }
   ]

And then create my own site.webmanifest as well.

Hope this helps. And helps any future development of this module. The fix you suggest for a custom name (and location) would be great, as long as there was some way to add more sizes as I'm sure Apple isn't finished coming up with new ones. 😊

[dvarnai]

I'll take a look, I wanted to add support for such anyway, just never got around to do it.

[jhull]

Wondering if you had any update to this...was working great until just yesterday - now I'm getting the blown-up icon again, instead of the nice slick splash screen.

EDIT: nvm...I remembered over the weekend that my solution was not using this module :). I had rebuilt my app and forgot to leave this part out...thanks!

[jetlej]

+1

[BlackCrowxyz]

Same problem here!

pwa-module version: v3.3.4

icon: {
  iconSrc: '/sample.png',
  iconFileName: 'sample.png'
}

I tired to override the default icon.png file but it didn't work. However a giant icon appeared on splash screen of iPhone 😢

[anthonysette]

+1