Question

我正在制作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上使用。初始版本没有（所有图标都在初始文件夹下的同一目录中）。我在做什么错了？

亲切的问候，

Grzegorz

Answer 1

现在，启动画面在iOS版本上非常敏感
通过添加media属性，我能够使其仅在iOS 11上的xcode模拟器中运行。
我没有更新的iOS设备进行测试。

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

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

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

Answer 2

有效答案，截至2020年3月

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

安装：

npm i pwacompat

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

设置支持apple-mobile-web-app的功能（无需浏览器镶边即可打开）适用于独立，全屏或最小用户界面

创建苹果触摸图标图像，将清单背景添加到透明图标：否则，iOS会将透明度呈现为黑色

创建动态初始图像，非常匹配为生成的初始图像基于铬的浏览器

您可以在其documentation上阅读有关包装的更多信息。

Answer 3

此问题已在iOS 12.1.4中解决！（飞溅代码现在可以在我的PWA中使用）

The release notes don't say much，但是我制作的几个PWA在更新后再次显示其初始屏幕。

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

3 个答案: