如何使用 PWA 在 IOS 设备中显示主屏幕提示

Question

我是 PWA 的新手，我被困在一项任务上。

这是我的manifest.json 文件，它有助于将添加到主屏幕的弹出窗口显示到 android 设备。

{
  "short_name": "The Cozy",
  "name": "The Cozy",
  "icons": [
    {
      "src": "/img/app-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/app-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/img/app-icon-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    }
  ],
  "start_url": "/login",
  "display": "standalone",
  "theme_color": "#ffc107",
  "background_color": "#ffffff"
}

但问题是它没有显示在 IOS 设备中。有没有办法使用注册工作者在IOS 设备上显示它？

任何将不胜感激。谢谢你。

编辑：1

我们可以打开分享标签吗

这个^^^^

Answer 1

Manifest 尚未由 iOS 管理（目前正在开发中）。有一个有趣的库可以自动为 iOS 添加基本元素。但目前无法显示主屏幕弹出窗口...

https://github.com/GoogleChromeLabs/pwacompat

您可以在此处查看有关 iOS 功能的状态： https://webkit.org/status/#specification-web-app-manifest

Answer 2

您可以参考以下链接https://www.monterail.com/blog/pwa-for-apple-ios吗？

在那个链接里，他已经提到了

进入网站后，您将不会看到 Web App Banner 您将需要在共享中使用“添加到主屏幕”选项 床单。正如您在下面的屏幕截图中所看到的那样，没有迹象表明 您添加的是 PWA 而不是网站。

现在你需要做的是，你需要检查当前的用户代理是apple 或safari 设备，你最好显示弹出对话框，上面写着单击共享按钮并单击添加到主屏幕 按钮在设备上安装您的应用。

Answer 3

Apple 在 manifest.json 链接方面存在困难。 困难在于，它们不起作用。

iOS 在 PWA 支持方面严重落后，这很讽刺，因为他们是发起这个想法的人；史蒂夫乔布斯最初的应用愿景实际上是 PWA 的。

要在 iOS 设备上安装 PWA，您需要在 Safari Mobile 中按“共享”，然后您可以在其中找到“添加到主屏幕”的选项。这是在 iOS 上安装 PWA 的唯一方法。
您可以通过检查用户的浏览器是否是 Safari Mobile（谷歌来了解它是如何工作的）来处理这个问题。如果是这样，只需在您的页面上显示一个 div，并说明如何安装 PWA（“点击共享并添加到主屏幕进行安装”或类似的内容）。没有办法像 Chrome 的'beforeinstallprompt'那样自动提示用户安装

您不必担心适用于 iOS 的 Chrome 或 Firefox，因为它们无论如何都不起作用。 iOS 仅允许从 Safari Mobile 安装 PWA