尽管遵循以下说明，PWA iOS Splash 仍不显示

Question

尽管遵循以下说明，PWA iOS Splash 仍不显示

Grz*_*icz 10 splash-screen ios progressive-web-apps

我正在制作 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"/>

Run Code Online (Sandbox Code Playgroud)

这些都在主 .html 索引文件的标头中，该文件充当整个应用程序的模板。我用同样的方式完成了我的图标，并且它可以在 iOS 上运行。启动版本没有（所有图标都位于启动文件夹下的同一目录中）。我究竟做错了什么？

亲切的问候，

格热戈日

Answer 1

wen*_*jun 7

截至 2020 年 3 月的工作答案

pwacompat包（由 Google Chrome 团队开发）将允许您轻松生成 iOS 上的 PWA 支持所需的资源（启动图像和触摸图标），而不是手动指定单个标签来添加所需的启动屏幕和触摸图标设备。

安装：

npm i pwacompat

Run Code Online (Sandbox Code Playgroud)

这将确保您的 PWA 即使在不兼容的设备/浏览器中也能得到支持，而无需在文档的<head>. 更具体地说，对于 Safari，pwacompat 包将执行以下操作：

设置 apple-mobile-web-app-capable（无需浏览器 chrome 打开）的显示模式为独立、全屏或最小用户界面

创建 apple-touch-icon 图像，将明显背景添加到透明图标：否则，iOS 将透明度呈现为黑色

创建动态启动图像，与基于 Chromium 的浏览器生成的启动图像紧密匹配

您可以在他们的文档中阅读有关该包的更多信息。

Answer 2

STa*_*efi 7

最近在 iOS 设备上遇到了这个问题，并发现您的应用程序需要满足一些要求，因此：

最好在页面标题中包含以下元链接：

<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" />

Run Code Online (Sandbox Code Playgroud)

接下来要考虑的是，在 Apple 设备（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">

Run Code Online (Sandbox Code Playgroud)

我必须确保的关键点是链接的screen and 媒体查询部分（如上所述）。我不确定以前是否需要这样做，但在撰写此答案时，Apple 设备（iOS 15.5、iPadOS 15.5）无法在不包含screen媒体的情况下解析屏幕侧。

我记得 IE 曾经是每个开发者生存的祸根。现在是iOS。 (4认同)

Answer 3

Mat*_*ias 4

现在，闪屏在 iOS 版本上非常敏感，
通过添加媒体属性，我只能在 xcode 模拟器中的 iOS 11 上运行。
我没有用于测试的较新 iOS 设备。

我在这里找到的参考文章
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

该文章中的工作示例
https://pwa-splash.now.sh

我的 A2HS 测试仪（正在进行中）
https://a2hs.glitch.me/

归档时间：	7 年，5 月前
查看次数：	9542 次
最近记录：	2 年，8 月前