logo标签列表

PWA iOS启动画面未显示，尽管按照指示操作。

iossplash-screenprogressive-web-apps
10

我正在制作一个PWA应用，并尝试显示启动画面。我参考了这个教程：

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

并经过这个网址的验证：

https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

我的index.html代码如下：

    <meta name="apple-mobile-web-app-capable" content="yes">   
 <link rel="apple-touch-startup-image" sizes="2048x2732" href="splash/apple_splash_2048.png"/>
    <link rel="apple-touch-startup-image" sizes="1668x2224" href="splash/apple_splash_1668.png"/>
    <link rel="apple-touch-startup-image" sizes="1536x2048" href="splash/apple_splash_1536.png"/>
    <link rel="apple-touch-startup-image" sizes="1125x2436" href="splash/apple_splash_1125.png"/>
    <link rel="apple-touch-startup-image" sizes="1242x2208" href="splash/apple_splash_1242.png"/>
    <link rel="apple-touch-startup-image" sizes="750x1334" href="splash/apple_splash_750.png"/>
    <link rel="apple-touch-startup-image" sizes="640x1136" href="splash/apple_splash_640.png"/>
    <link rel="apple-touch-startup-image" sizes="2048x1536" href="splash/apple_splash_2048.png"/>
    <link rel="apple-touch-startup-image" sizes="640x960" href="splash/apple_splash_640x960.png"/>
    <link rel="apple-touch-startup-image" sizes="320x480" href="splash/apple_splash_320.png"/>
    <link rel="apple-touch-startup-image" sizes="1024x768" href="splash/apple_splash_1024x768.png"/>
    <link rel="apple-touch-startup-image" sizes="2208x1242" href="splash/apple_splash_2208x1242.png"/>
    <link rel="apple-touch-startup-image" sizes="768x1024" href="splash/apple_splash_768x1024.png"/>
    <link rel="apple-touch-startup-image" sizes="2048x1536" href="splash/apple_splash_2048x1536.png"/>

这是在主.html索引文件的头部，它作为整个应用程序的模板。就像我处理图标的方式一样，在iOS上可以正常工作。但闪屏版本不行（所有图标都在splash文件夹下的同一目录中）。我做错了什么吗？
敬礼，
Grzegorz
你成功让它工作了吗？ - Gary Vernon Grubb
5个回答
7

最近在iOS设备上遇到了这个问题，发现应用程序需要满足以下要求：

最好在页面头部包含以下meta链接：

<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="Your App Name" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

接下来考虑为苹果设备（iPad、iPhone、iPod touch）启用 PWA 应用程序的启动画面，需要为每个现有的分辨率和方向组合设置一组 <link ...>，除了需要存在的一组图标以使您的应用程序启用 PWA 之外。
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/12.9__iPad_Pro_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/10.5__iPad_Air_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/10.2__iPad_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/iPhone_11__iPhone_XR_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png">

<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/12.9__iPad_Pro_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/10.5__iPad_Air_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/10.2__iPad_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/iPhone_11__iPhone_XR_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png">

关键点在于，我必须确保链接所应用的媒体查询中包含screen and（如上所示）。我不确定之前是否需要这样做，但在撰写本答案时，苹果设备（iOS 15.5、iPadOS 15.5）无法在媒体中解析屏幕一侧而不包括screen。

3
我记得IE曾经是每个开发者的噩梦，现在则是iOS。 - Vincent
7

2020年3月的最新答案

与其手动指定要添加所需启动画面和触摸图标的各个标签， pwacompat 包（由Google Chrome团队开发）将使您可以轻松生成所需的资产（启动画面和触摸图标），以支持iOS设备上的PWA。

安装：

npm i pwacompat

这将确保您的PWA即使在不兼容的设备/浏览器上也会受到支持，无需在文档的<head>上手动指定链接标签。具体来说，对于Safari，pwacompat包将执行以下操作：
  • 为独立、全屏或最小化显示模式设置apple-mobile-web-app-capable（无需浏览器chrome）
  • 创建apple-touch-icon图像，将清单背景添加到透明图标中：否则，iOS将透明度呈现为黑色
  • 创建动态闪屏图像，与基于Chromium的浏览器生成的闪屏图像非常相似
您可以在他们的文档中了解更多有关该软件包的信息。
4
1
仍然无法在我的iOS 11.4.1的iPhone 6上运行 :( 但还是谢谢！ - Grzegorz Brzęczyszczykiewicz
你试过添加上面示例中的这些内容到你的图像链接吗？我在我的上添加了它们。不确定它们是否会有所不同。<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"> <meta name="apple-mobile-web-app-title" content="PWA Splash"> - Mathias
你是在使用Safari还是Chrome？ - Mathias
很遗憾，在iPhone XR上使用Safari + iOS 13.2无法正常工作 :( - Christian Saiki
0

这个问题在 iOS 12.1.4 中已经解决！（我的 PWA 中的启动画面现在可以正常工作）

发布说明没有太多细节, 但我制作的一些 PWAs 在更新后再次拥有了他们的启动画面功能。

奇怪，我的iPhone7（iOS 12.1.4）上仍然无法工作。 - fransyozef
1
请尝试访问 https://licitaciones.chilediseno.org 并告诉我它是否可用。启动屏幕文件非常轻巧且证书有效。启动屏幕是黑色徽标在白色背景上的形式。 - ganar
@ganar，那个链接对我不起作用，我的iPhone6s（iOS 12.2）。 - djolf
@djolf 非常感谢您的评论：在那组特定的图像中生成了403。现在已经恢复正常了（我在iPhone 6s上进行了测试）。 - ganar
嗨@PeterB，在iOS 13.x.x上它对我有效。为了查看启动画面，您必须在主屏幕上创建PWA的链接，并从那里打开应用程序。您的应用程序必须托管在具有有效证书的服务器上。 使用https://licitaciones.chilediseno.org进行测试，闪屏是白色背景上的黑色标志。 - ganar
显示剩余3条评论
0

使用以下 meta 标签和 iOS 启动屏生成器 对我有用：

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-title" content="YOUR-APP-NAME" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接