在当今时代，移动端已经成为了主流。我们每天都使用各种不同的应用程序来完成我们的工作和日常生活。但是，尽管移动应用程序在使用上很方便，但它们通常需要下载并占用设备的大量存储空间。因此，谷歌于2015年提出了渐进式 Web 应用（Progressive Web App，简称 PWA），为用户提供了一个更轻便、可在离线情况下进行访问的移动应用解决方案。
然而，由于不同平台的差异，PWA 应用程序在不同平台上的表现也会有所不同。那么我们如何实现不同平台间的兼容性呢？接下来我们将为大家介绍如何实现 PWA 应用在不同平台上的兼容性。
1. 确定需要兼容的平台
在开始兼容多平台之前，首先需要确定你的应用程序需要在哪些平台上运行。这通常由项目的业务方或开发团队决定。常见的移动端平台包括 iOS、Android 和 Windows 等，在不同的平台中，有不同的浏览器内核，因此在兼容性方面可能需要进行适配。
2. 允许 PWA 应用从浏览器中安装
在 PWA中，如果用户通过浏览器打开应用程序，并希望在桌面或主屏幕上添加应用图标，则需要在应用程序中实现“安装”功能。 该功能模拟了在移动平台上安装应用程序的体验，并且在用户使用应用程序时通常会得到更好的用户体验。应用程序的安装功能需要在 Web 应用的清单文件中进行配置，以便浏览器识别出应用程序。
-- -------------------- ---- -------
-- ------
-
------- --- --- -----
------------- ------
-------- -
-
------ -----------------------
-------- ----------
------- -----------
--
-
------ -----------------------
-------- ----------
------- -----------
-
--
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------------- -----
-注意：
start_url：定义用户在点击 PWA 安装按钮时，需要打开的 URL；display：定义 PWA 的显示方式，多数为“standalone”（独立应用程序），以为着应用程序以全屏方式显示；background_color：应用程序的背景色；
3. 处理不同平台的差异
如上所述，不同的平台有不同的浏览器内核。 我们需要了解每个平台的差异，以便可以优化代码。在移动应用程序上使用 PWA 时，最常见的问题是 Safari（iOS）与其他主要浏览器（例如 Chrome 或 Firefox）的差异。如果您在其中一个浏览器上构建和测试了应用程序，那么可能会出现在其他浏览器上出现意想不到的结果。以下是 Safari 和 Chrome 不同的地方：
- 兼容性。
Safari 与 Chrome 之间的不兼容问题来源于两种浏览器使用不同的 JS 引擎，且支持的 Web APIs 不同。
- 功能性。
Safari 也会因为不兼容 Web APIs 而无法在 PWA 上提供某些功能。
这是一种很严重的问题，我们已经看到它是如何阻碍移动 Web 应用程序的采用。 要解决此问题，我们必须检测到移动设备浏览器的不同，以便我们可以根据实际使用情况选择实施不同的构建策略。
if (window.navigator.userAgent.indexOf('Safari') !== -1 &&
window.navigator.userAgent.indexOf('Chrome') === -1) {
// 在 Safari 上进行适配。
} else {
// 在其他浏览器上进行适配。
}4. 总结
本文介绍了如何实现 PWA 应用在多个平台之间的兼容性，包括：
- 确定需要兼容的平台；
- 允许 PWA 应用从浏览器中安装；
- 处理不同平台的差异。
在未来的开发中，人们将持续开发和改进 PWA 技术，也许无论何时， PWA 都是我们优化移动 Web 应用程序的最佳选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648925f648841e9894773105