如何使用 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 设备中没有显示。有什么方法可以使用 register worker 在 IOS 设备上显示它吗？

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

编辑：1

我们可以打开共享选项卡吗

这个^^^^

Answer 1

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

iOS 在 PWA 支持方面严重落后，这很讽刺，因为他们是曾经提出这个想法的人；史蒂夫·乔布斯 (Steve Jobs) 最初对应用程序的设想实际上是 PWA 的。

要在 iOS 设备上安装 PWA，您需要在 Safari Mobile 中按 "share"，然后您可以在其中找到 "add to homescreen" 的选项。这是在 iOS.
上安装 PWA 的唯一方法您可以通过检查用户的浏览器是否为 Safari Mobile（Google 了解其工作原理）来处理此问题。如果是这样，只需在您的页面上显示一个 div，并说明如何安装 PWA（"hit share and add to homescreen to install" 或类似的东西）。没办法像Chrome的'beforeinstallprompt'

那样自动提示用户安装

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

Answer 2

能否参考以下linkhttps://www.monterail.com/blog/pwa-for-apple-ios？

在那link中，他已经提到

Once you enter a website, you won’t be greeted with the Web App Banner and you will need to use “Add to Home Screen” option in the share sheet. As you can in the screenshots below, there’s no sign that you’re adding a PWA rather than a website.

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

Answer 3

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

https://github.com/GoogleChromeLabs/pwacompat

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

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

How to show home screen prompt in IOS device using PWA

javascript

ios

service-worker

progressive-web-apps

manifest.json