Nuxt pwa 未在 ios 台设备上显示启动画面

Question

我正在使用 nuxt 中的 pwa 模块，并且读到 ios 确实以与 android 相同的方式显示启动加载屏幕。 ios 上的行为是在加载应用程序时显示白屏，这对用户来说不是最好的体验。

nuxt pwa 模块确实会生成启动画面图像，但它们似乎不会显示在 ios 设备上启动的 pwa 上。在我的例子中，这是在 iphone6 上创建的文件大小错误，它应该是 750x1334 但 link 和文件尺寸是 50x1334，这一定是不正确的。

<link data-n-head="1"
  href="/_nuxt/icons/splash_iphone6_50x1334.71f070.png"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
  rel="apple-touch-startup-image"
  data-hid="apple-touch-startup-image-iphone6"
>

我遇到了一个开源 CLI 工具 pwa-asset-generator，它可以为 ios 和匹配的 link 标签创建所需大小的所有初始图像。这些可以包含在 nuxt.config.js 的 header 标签中，但我仍然无法在 ios 上看到启动画面，我发现我现在有默认的 link由 pwa 模块创建的启动画面的标签以及我添加到 nuxt.config.js head.

的标签

我的问题

这些不同的 link 标签现在是否相互冲突？
有没有办法阻止 pwa 模块创建的初始图像和 link 标签，而是使用我用 pwa-asset-generator 创建的？

<meta data-n-head="1" name="mobile-web-app-capable" content="yes">
<meta data-n-head="1" name="apple-touch-fullscreen" content="yes">
<meta data-n-head="1" name="apple-mobile-web-app-capable" content="yes">

编辑：pwa 模块的输出

<link data-n-head="1" href="/_nuxt/icons/splash_iphonese_640x1136.71f070.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-iphonese">
<link data-n-head="1" href="/_nuxt/icons/splash_iphone6_50x1334.71f070.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-iphone6">
<link data-n-head="1" href="/_nuxt/icons/splash_iphoneplus_1080x1920.71f070.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-iphoneplus">
<link data-n-head="1" href="/_nuxt/icons/splash_iphonex_1125x2436.71f070.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-iphonex">
<link data-n-head="1" href="/_nuxt/icons/splash_iphonexr_828x1792.71f070.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-iphonexr">
<link data-n-head="1" href="/_nuxt/icons/splash_iphonexsmax_1242x2688.71f070.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-iphonexsmax">
<link data-n-head="1" href="/_nuxt/icons/splash_ipad_1536x2048.71f070.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-ipad">
<link data-n-head="1" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-ipadpro1">
<link data-n-head="1" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-ipadpro2">
<link data-n-head="1" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" data-hid="apple-touch-startup-image-ipadpro3">

来自 pwa-asset-generator 的输出（文件夹 dist/ios/）

<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">
<link data-n-head="1" 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)">

Answer 1

我在 discord 上找到了这个问题的答案，并得到了原始发帖人的许可，我在下面包含了他们的原始 github link 和更多详细信息。

样本

在您的 nuxt-config.js 文件中的 pwa 对象中，将 mobileAppIOS 设置为 false（iosSizes 也是一个空数组）。现在 pwa 模块将不会生成启动画面。

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

然后使用 pwa-asset-generator 创建所有所需尺寸的 ios 加载屏幕资源。将这些图像复制到静态目录中的一个新文件夹中（我将我的文件夹命名为 ios 并且只选择生成纵向加载屏幕）和必须添加到 link 中的必需 link 标签s 数组在你的 nuxt.config.js 文件的头对象中。

样本

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)"}
    ],
  },

现在您的 pwa 应该会在 IOS 台设备上显示启动画面！

Nuxt pwa 未在 ios 台设备上显示启动画面

Nuxt pwa is not displaying splash screens on ios devices

nuxt.js

progressive-web-apps