我真的被PWA搞糊涂了在我的 iPhone 上。
首先，在展示我的代码之前，我试图检查一个好的网络应用程序的外观。
在谷歌中搜索最好的渐进式网络应用程序，我在我的 iPhone 上打开所有这些应用程序 Safari , 然后点击 Share button然后 Add To Home Screen . (优步、Flipboard、推特、谷歌地图、全局速卖通等)
从主屏幕打开图标时，它将打开 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 的基本原理？
最佳答案
iOS 很晚才开始向 PWA 开放，它仍然需要额外的属性(如您所用)来提供全套 PWA 功能。
在 Chrome DevTools 中，如果您转到“应用程序”选项卡(针对您的应用程序)，您是否可以看到带有其属性的 Web list 以及服务工作线程是否正确显示？
正如 Mathias 所说，您需要一个 HTTPS 连接才能正确注册服务 worker 。然而，对于开发目的，本地主机被认为是“安全的”。
我写了一个series of articles关于PWA，大家可以看看，跟着看，有没有漏掉什么。
Here支持服务 worker 的浏览器列表(与您使用的 Safari 版本进行比较)。
更新
我在这里回答你的评论:
- 如果某些提供 PWA 的网站(例如 Uber、FB)在其他设备上作为 PWA 运行，但在您的手机上却无法运行，那么我会尝试调查您这边是否缺少设置。我进行了快速研究，似乎对于 iOS 用户来说，使用/启用 PWA 需要一些额外的步骤:
The user has to access the PWA URL with Safari and then manually press the Share icon and then “Add to Home Screen.” There is no indication that the visited website is a PWA.
关于Chrome中的“添加到主屏幕”，当它被删除时我确实找不到任何官方信息。我只能说自从最新版本之一 (v74+) 以来我再也没有见过它。
- PWA 的每个页面都应该是可链接的，以便通过社交媒体应用分享它。因此，如果您有一个可用的 PWA 并且您将链接发送给其他人，那么这些也应该有效。没有特殊的浏览器限制，前提是该应用已正确实现。
我将一些链接留给您，其他人对 PWA 和 iOS 12.2 也有类似的问题:
- > Link with discussion
- > Test PWA
- > Article with some tips (这里有一些关于如何让 PWA 在 iOS 上工作的建议)
关于javascript - Progressive Web-Apps 真的适用于 iOS 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57077108/