Question

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

首先，在显示代码之前，我试图检查网络应用程序的外观如何。在Google中搜索最佳的渐进式Web应用程序后，我在Safari的iPhone上打开了所有这些应用程序，然后依次单击Share button和Add To Home Screen。（Uber，Flipboard，Twitter，Google Maps，Ali-express等）

从主屏幕打开图标时，它将再次打开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的基本知识？

Answer 1

iOS起步很晚，无法使用PWA，但仍需要额外的属性（如您所用）来提供完整的PWA功能。

在Chrome DevTools中，如果您转到“应用程序”标签（针对您的应用程序），是否可以看到正确显示了带有其属性的Web清单以及服务人员？

正如Mathias所说，您需要HTTPS连接才能正确注册服务工作者。但是，出于开发目的，Localhost被视为“安全”。

我写了一篇有关PWA的series of articles，您可以看一下，然后看一下是否错过了任何内容。

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

更新

我在这里回答您的评论：

如果某些提供PWA的网站（例如Uber，FB）在其他设备上充当PWA，但在您的手机上却不起作用，那么我将尝试调查您身边是否缺少设置。我进行了快速研究，看来对于iOS用户而言，使用/启用PWA需要一些额外的步骤：

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

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

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

我在一些链接下让其他人在PWA和iOS 12.2上存在类似问题：

Link with discussion
Test PWA
Tipps article（这里有一些有关如何使PWA在iOS上运行的建议）

渐进式Web应用程序真的可以在iOS上运行吗？

1 个答案: