How to Add Splash Screens to PWA for iOS with Nuxt.js

You have to satisfy two conditions below.
1) Set mobile web app capable
2) Add apple-touch-startup-image
https://appsco.pe/developer/splash-screens

Set mobile web app capable

In Nuxt.js, adding PWA module is easy way to implement this.
https://github.com/nuxt-community/pwa-module

nuxt.config.js

meta: {
  viewport: 'width=device-width, initial-scale=1, user-scalable=no',
  mobileAppIOS: true
}

Add apple-touch-startup-image

In Nuxt.js you can set apple-touch-startup-image in nuxt.config.js.

nuxt.config.js

module.exports = {
  mode: 'spa',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
      { rel: 'apple-touch-icon', href: 'icon-152x152.png' },
      { rel: "apple-touch-startup-image", href: "launch-1125x2436.png", media: "(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" },
      { rel: "apple-touch-startup-image", href: "launch-750x1334.png", media: "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" },
      { rel: "apple-touch-startup-image", href: "launch-1242x2208.png", media: "(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" },
      { rel: "apple-touch-startup-image", href: "launch-640x1136.png", media: "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" }
    ]
  }
}

Leave a Comment