在启用PWA的应用程序的IO上安装到主屏幕

Question

我已经添加了pwa模块（或原理图），并且正确设置了manifest.json文件。在Android设备上，我的服务人员忙碌了起来，出现了安装到主屏幕的提示，并且地址栏消失了，我可以看到本机的外观。但是，在Chrome / Safari IO上没有提示。我需要通过编程/其他方式来做任何事情吗？

Answer 1

iOS

我的PWA的index.html包含以下iOS特定的元标记：

<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能力”元标记，才能显示“添加到首页”屏幕：

参考：PWA Tips and Tricks

Answer 2

与Android设备（或更具体地说，Android设备上的Chrome移动网络浏览器）不同，iOS不支持该PWA安装提示。用户只能通过点击“添加到主屏幕”按钮将其添加为PWA。对于那些想知道的人，OP就是指这个feature。

但是，您可以查看此blog以获得iOS支持的PWA功能列表。

当然，存在阴谋论，即苹果有意与本地App Store竞争，因此有意放慢PWA的采用，这对公司而言是巨大的收入来源。我让您决定这是否真的

Answer 3

我在iOS和Android上都使用JavaScript来检查应用程序是否处于独立模式，并在iOS和Android上的非Chrome浏览器上显示提示。我只是让chrome做到这一点，因为它足够高效。在iOS上，仅Safari暂时支持Service Worker安装。

Answer 4

下面是一个代码片段，用于检测应用程序是否在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 });
}