在 iOS 上为启用 PWA 的应用安装到主屏幕

Question

在 iOS 上为启用 PWA 的应用安装到主屏幕

ust*_*tad 10 ios progressive-web-apps angular

我已经添加了 pwa 模块（或原理图）并且我已经正确设置了我的 manifest.json 文件。在 Android 设备上，我的 Service Worker 正在工作，我得到了安装到主屏幕的提示，地址栏消失了，我可以看到本机的外观和感觉。但是，在 Chrome/Safari iOS 上没有提示。有什么我需要以编程方式/额外方式做的吗？

Answer 1

Rob*_*nyo 11

IOS

我的 PWAindex.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">

Run Code Online (Sandbox Code Playgroud)

Safari 需要“apple-mobile-web-app-capable”和“apple-mobile-web-app-title”元标记来显示“添加到主页”屏幕：

参考：PWA 提示和技巧

Answer 2

wen*_*jun 9

2020 年 3 月更新

虽然添加到主屏幕提示支持在 iOS 上仍然不可用，但pwacompat包（由 Google Chrome 团队开发）将允许您轻松生成所需的资产（启动图像和触摸图标）以在 iOS 设备上支持 PWA .

安装：

npm i pwacompat

Run Code Online (Sandbox Code Playgroud)

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

设置 apple-mobile-web-app-capable（在没有浏览器 chrome 的情况下打开）的显示模式独立、全屏或最小用户界面

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

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

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

在 Android 设备（或更具体地说，Android 设备上的 Chrome 移动网络浏览器）上，启用 PWA 的网络应用程序将收到提示以鼓励用户将 PWA 添加到主屏幕。它可能看起来像这样：

图片来源：Andy Osmani（渐进式 Web 应用程序入门）

另一方面，iOS 不支持 PWA 安装提示。

用户只能通过点击“添加到主屏幕”按钮将其添加为 PWA。对于那些想知道的人，OP指的是：

图片来源：世博会

iOS 设备上的 PWA 需要以下类型的资产文件（触摸图标和启动画面）。

1) 触摸图标

在 index.html 的标题标记上，您必须添加<link rel="apple-touch-icon" sizes="192x192" href="/example.png">，如下所示：

<head>

    <link rel="apple-touch-icon" sizes="192x192" href="/example.png">

</head>

Run Code Online (Sandbox Code Playgroud)

请注意，图标大小应至少为 180x180 像素或 192x192 像素。您可以阅读文档中的良好实践。

2) 启动画面

您将使用 rel 属性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>

Run Code Online (Sandbox Code Playgroud)

这是Evan Bacon的一个工作示例，其中包含触摸图标所需的完整标签列表

您还可以查看此博客，了解 iOS 支持的 PWA 功能列表。

当然，有一种阴谋论认为，由于与原生 App Store 竞争的可能性，Apple 有意放慢了 PWA 的采用，这对公司来说是一个巨大的收入来源。我把它留给你来决定是否真的如此

归档时间：	6 年，6 月前
查看次数：	14363 次
最近记录：	4 年，4 月前