在支持PWA的应用程序的iOS上安装到主屏幕
我已经添加了pwa模块(或原理图)，并且我已经正确地设置了我的manifest.json文件。在Android设备上，我的服务人员正在忙碌，我得到了安装到主页屏幕的提示，地址栏消失了，我可以看到原生的外观和感觉。然而，在Chrome/Safari iOS上没有提示符。是否需要以编程方式/附加方式执行任何操作？
回答 4
Stack Overflow用户
发布于 2019-05-07 09:04:08
iOS
我的PWA的index.html包括以下iOS特定的meta标签：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">
<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">Safari需要"apple-mobile-web-app-capable“和"apple-mobile-web-app-title”元标签来显示“Add to Home”屏幕：
Stack Overflow用户
发布于 2019-05-06 23:02:14
更新2020年3月
虽然添加到主屏幕提示符的支持在iOS上仍然不可用，但pwacompat包(由Google Chrome团队开发)将允许您轻松地为iOS设备上的PWA支持生成所需的资源(闪屏图像和触摸图标)。
安装：
npm i pwacompat这将确保即使在不兼容的设备/浏览器中也支持您的PWA，而无需在文档的<head>上手动指定链接标记。更具体地说，对于Safari，pwacompat包将执行以下操作：
- 将支持苹果移动web应用的显示模式设置为独立、全屏或最小ui-
- 创建苹果触摸图标图像，将显示背景添加到透明图标:否则，iOS会在黑色
- 创建动态启动图像时渲染透明度，与为基于铬的浏览器生成的启动图像紧密匹配
你可以在他们的documentation上阅读更多关于这个包的信息。
在Android设备上(或者更具体地说，Android设备上的Chrome移动web浏览器)，支持PWA的web应用程序将收到一个提示，鼓励用户将PWA添加到主屏幕。它可能看起来像这样：
图片来源：Andy Osmani (Getting started with Progressive Web Apps)
另一方面，iOS不支持该PWA安装提示。
用户只能通过点击“添加到主屏幕”按钮将其添加为PWA。对于那些想知道的人来说，OP指的是：
图片来源：Expo
iOS设备上的PWA需要以下类型的资源文件(触摸图标和闪屏)。
1)触摸图标
在index.html的header标记上，您必须添加<link rel="apple-touch-icon" sizes="192x192" href="/example.png">，如下所示：
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head> 请注意，图标大小至少应为180x180像素或192x192像素。您可以阅读documentation上的良好实践。
2)闪屏
您将使用rel attribute apple-touch-startup-image在iOS设备上启用闪屏。
<head>
<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="example2.png"
/>
</head> 这是触摸图标所需标签的完整列表的working example by Evan Bacon
您还可以查看此blog，了解iOS支持的PWA功能列表。
当然，还有一种阴谋论，即苹果故意放慢采用PWAs的速度，因为这可能会与其原生App Store竞争，这对公司来说是一个巨大的收入来源。我让你来决定这是不是真的
Stack Overflow用户
发布于 2019-11-06 20:09:17
这是一个代码片段，用于检测应用程序是否在IOS上，并触发弹出窗口以添加到主屏幕：
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.setState({ showInstallMessage: true });
}https://stackoverflow.com/questions/56007571
复制相似问题
腾讯云开发者
