1

我真的PWA对我的 iPhone 感到困惑。

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

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

  1. 没有全屏
  2. 没有单独的窗口（只是像网站一样在 Safari 中打开）
  3. 没有闪屏
  4. 在 Chrome 上 - 没有“添加到主屏幕”按钮

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

然后我试图在我的网站上使用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 的基本原理？

4

1 回答 1

2

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

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

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

我写了一系列关于 PWA 的文章，你可以看一下并继续关注，看看你是否遗漏了什么。

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

更新

我在这里回答您的评论：

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

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

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

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

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

于 2019-07-17T15:10:13.923 回答