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

清单尚未由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？

在该链接中，他已经提到了

进入网站后，您将不会再收到“网络应用横幅” 并且您需要在共享中使用“添加到主屏幕”选项片。正如您在下面的屏幕截图中所看到的，没有迹象表明您是在添加PWA而不是网站。

现在您需要执行的操作，需要检查当前的用户代理是apple还是safari设备，最好显示弹出对话框，说单击“共享”按钮并单击添加到主屏幕 按钮即可在设备上安装应用。

Answer 3

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

在PWA支持方面，iOS严重落后，这具有讽刺意味，因为它们是发起该想法的人。史蒂夫·乔布斯（Steve Jobs）最初的应用愿景是PWA。

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

您不必担心iOS的Chrome或Firefox，因为它们仍然无法工作。 iOS仅允许PWA从Safari Mobile安装

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

3 个答案: