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

Question

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

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

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

1. 没有全屏
2. 没有单独的窗口（只是像网站一样在 Safari 中打开）
3. 没有启动画面
4. 在 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 的基本原理？

Answer 1

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

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

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

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

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

---

更新

我在这里回答你的 cmets：

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

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

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

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

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

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