为 iOS 和 Android 提供不同的 Progressive Web App UI答案

【问题标题】：Serve a different Progressive Web App UI for iOS and Android为 iOS 和 Android 提供不同的 Progressive Web App UI
【发布时间】：2019-09-08 18:33:00
【问题描述】：

由于 PWA 在 iOS 上得到了更好的支持，并且似乎成为其他移动开发方法的有趣替代方案，我想知道是否可以提供单独的 UI，例如App Shell，适用于 iOS 和 Android。

在 Russell first coined the term PWA 时，他表示 PWA 的行为和感觉应该就像是原生应用程序一样，但原生应用程序在 Android 和 iOS 的 UI 方面（例如导航方法）有很大不同。

因此，为了实现良好的 PWA，我们必须为 iOS 和 Android 提供单独的 UI。我无法找到有关如何实现这一点的资源，有没有人有关于如何实现这个想法的指示？

【问题讨论】：

如果您要在一个网站中为不同的设备构建不同的屏幕和导航，您可能会付出与构建两个原生应用程序相同的努力。恕我直言。
@Mathias 我不同意，很大一部分代码库将被共享，甚至是内容部分。重要的部分是带有原生导航的 App Shell。

标签： android ios web-applications progressive-web-apps

【解决方案1】：

你有两个选择：

构建应用程序的两个版本。检查服务器上的用户代理。根据用户代理，使 HTTP 服务器返回不同版本的应用程序。这是完全可行的，并且实际上发生在野外。例如，Google 主页会有所不同，具体取决于您是否在 Firefox/Chrome/Safari 上加载该页面。在这种情况下，您需要对 HTTP 服务器有足够的控制权。
构建一个包含两个 UI 的应用版本。然后，在应用运行时根据用户代理显示不同版本的应用。

第二种情况使用户下载未使用的代码。

编辑：实际上，如果您使用延迟加载/代码拆分，第二种情况不会让用户下载未使用的代码。

【讨论】：

1 似乎是一个很好的选择，遗憾的是我目前的主机不允许这样做，但我可能应该切换到 VPS。

【解决方案2】：

我想知道是否可以提供单独的用户界面

有几个框架/方法试图实现这一点，例如：Ionic 框架。

参考：

Ionic 3 PWA，Brew: The Craft Beer App，Android：

iOS：

【讨论】：