Progressive Web-Apps 真的可以在 iOS 上运行吗？

Posted 2023-03-14

【中文标题】Progressive Web-Apps 真的可以在 iOS 上运行吗？

【英文标题】：Does Progressive Web-Apps really works on iOS?

【发布时间】：2019-07-17 13:31:49

【问题描述】：

我对 iPhone 上的PWA 感到很困惑。

首先，在展示我的代码之前，我试图检查一个好的网络应用程序的外观。 在 Google 中搜索最佳渐进式网络应用程序时，我在我的 iPhone 上的Safari 中打开了所有这些应用程序，然后单击了Share button，然后单击了Add To Home Screen。 （优步、Flipboard、Twitter、谷歌地图、速卖通等）

当从主屏幕打开图标时，它会再次打开Safari，与我所在的页面相同，就像任何网站一样。

没有全屏 没有单独的窗口（只是像网站一样在 Safari 中打开） 没有启动画面 在 Chrome 上 - 没有“添加到主屏幕”按钮

基本上只是一个带有图标的网站。

然后我试图在我的网站上使用我页面上的 Google 的 pwacompat 库来这样做。

我已将这些添加到页面head：

<link rel="manifest" href="manifest.webmanifest" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="../images/logo.png">

然后是我的 html 底部的 JS 库：

<!-- webapp manifast library -->
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous">
</script>

同样，我将此页面添加到主屏幕，但什么也没有。 没有全屏，没有不同的窗口，只有Safari。

我是否误解了 PWA 的基本原理？

【问题讨论】：

您是否使用 Chrome Lighthouse 工具测试了您的 HTTPS 站点，并且没有出现任何错误？ （这是一个有效的 PWA）

我的网站是 https，以及我在问题中提到的所有其他应该是 PWA 的网站。 （优步、推特等）。似乎我的 iPhone 只是不想支持它。 （iPhone 8+ 和 ios 12+）

您可以在此处找到有关 Safari 对 PWA 的支持的一些信息：medium.com/@firt/…

【参考方案1】：

iOS 很晚才开始向 PWA 开放，它仍然需要额外的属性（如您使用的那样）来提供全套 PWA 功能。

在 Chrome DevTools 中，如果您转到“应用程序”选项卡（针对您的应用程序），您是否可以看到 Web 清单及其属性已正确显示，并且 Service Worker 也已正确显示？

正如 Mathias 所说，您需要一个 HTTPS 连接才能正确注册服务工作者。然而，本地主机被认为是“安全的”用于开发目的。

我写了一篇关于 PWA 的series of articles，你可以看看并继续关注你是否遗漏了什么。

Here 支持服务工作者的浏览器列表（与您使用的 safari 版本进行比较）。

---

更新

我在这里回答你的 cmets：

如果某些提供 PWA 的网站（例如 Uber、FB）在其他设备上作为 PWA 工作，但在您的手机上却不能，那么我会尝试调查您是否缺少设置。我做了一个快速研究，似乎对于 iOS 用户来说，使用/启用 PWA 需要一些额外的步骤：

用户必须使用 Safari 访问 PWA URL，然后手动按共享图标，然后按“添加到主屏幕”。没有迹象表明访问的网站是 PWA。

关于 Chrome 中的“添加到主屏幕”，当它被删除时，我确实找不到任何官方信息。我只能说自从最新版本之一（v74+）以来我再也没有见过它。

PWA 的每个页面都应该是可链接的，以便从通过社交媒体应用程序共享中受益。因此，如果您有一个有效的 PWA 并且您将链接发送给其他人，那么这些应该也可以工作。鉴于应用已正确实施，因此没有特殊的浏览器限制。

我在下面的一些链接中留下了一些其他人在 PWA 和 iOS 12.2 上遇到类似问题的链接：

Link with discussion Test PWA Article with some tips（这里有一些关于如何使 PWA 在 iOS 上工作的建议）

【讨论】：

非常感谢！几个问题，首先是 https（托管在 Firebase 中），其次，对于 iOS 12+ 中的 Chrome 是否现在有“添加到主屏幕”按钮有很多不同的看法。我没看见它。第三 - 所有已知为 PWA 的网站，在我的 iPhone 上都不能用作 PWA。

别的东西，如果 iOS 上的 PWA 只能在 Safari 上工作（不能在 Facebook 浏览器或 Chrome 上工作），那么只有当我分享将在 Safari 中打开的链接时，才能成为 PWA。现在考虑到大多数人在 FB/TW/etc 上共享链接，或者在 iPhone 上使用 Chrome，我的链接几乎不可能找到他们的 Safari 的方式，我不能强迫它，所以谁可以使用我的无论如何都要 PWA 吗？

谢谢，但您在 2) 中的文字存在矛盾。如果 Chrome/FB/IG 都是基于 Apple 的 webKit，我们已经知道它们没有 webapp 功能（怎么会有？如果你在 FB 应用程序中浏览，你显然无法将网站按顺序添加到你的主页中将其作为 webapp 获取）。最重要的是，整个主题被高估了，太阳底下没有新鲜事。 （至少是苹果的）

我的意思是，如果我们将链接发送到支持 PWA 的浏览器而不会出现问题。例如，通过在 android Chrome 上打开链接。事实上，如果我们将链接发送给另一个在 PWA 方面遇到困难的收件人，这将不起作用。我希望您能够解决您的应用程序的问题，希望 Apple 能够接受越来越多的 PWA 功能。