尽管遵循了说明，但PWA iOS Splash未显示

ykejflvf  于 2023-04-13  发布在  iOS
关注(0)|答案(5)|浏览(172)

我正在制作一个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上工作。飞溅版本没有（所有图标都在同一个目录下飞溅文件夹）。我做错了什么？
亲切的问候
格热戈日

ios

5条答案

按热度按时间
xwmevbvl

xwmevbvl1#

截至2020年3月的工作答案

无需手动指定单个标签来添加所需的启动画面和触摸图标，pwacompat包（由Google Chrome团队开发）将允许您轻松生成所需的资产（启动画面和触摸图标），以便在iOS设备上支持PWA。
安装：

npm i pwacompat

这将确保即使在不兼容的设备/浏览器中也能支持PWA，而不需要在文档的<head>上手动指定链接标签。更具体地说，对于Safari，pwacompat包将执行以下操作：

  • 设置apple-mobile-web-app-capable（在没有浏览器chrome的情况下打开）的显示模式独立、全屏或最小用户界面
  • 创建苹果触摸图标图像，将清单背景添加到透明图标：否则，iOS会将透明度渲染为黑色
  • 创建动态启动图像，与基于Chromium的浏览器生成的启动图像非常匹配

您可以在他们的documentation上阅读更多有关该软件包的信息。

赞(0）分享  回复(0）举报  2023-04-13
s2j5cfk0

s2j5cfk02#

最近在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" />

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

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

赞(0）分享  回复(0）举报  2023-04-13
xfb7svmp

xfb7svmp3#

现在启动画面在iOS版本上非常敏感
通过添加media属性，我只能在xcode模拟器中的iOS 11上使用它。
我没有新的iOS设备进行测试。
我在这里找到的参考文章
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
那篇文章中的工作示例
https://pwa-splash.now.sh
我的A2HS测试仪（正在进行中）
https://a2hs.glitch.me/

赞(0）分享  回复(0）举报  2023-04-13
zfciruhq

zfciruhq4#

这个问题已经在iOS 12.1.4中解决了！（Splash代码现在在我的PWA中工作）
The release notes don't say much，但是我做的几个PWA在更新后又有了闪屏。

赞(0）分享  回复(0）举报  2023-04-13
uklbhaso

uklbhaso5#

使用带有以下 meta标签的iOS Splash Screen Generator对我来说很有效：

<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" />
赞(0）分享  回复(0）举报  2023-04-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com