简介
PWA（Progressive Web App）是一种新型的应用程序开发方式，它可以在多个平台上运行，无需下载和安装，能够提供与原生应用相似的用户体验。然而，在 PWA 开发过程中，兼容性问题是必须考虑的。特别是对于 iOS6/7 这样的老旧版本，PWA 兼容性的问题更加突出。
本文将介绍 PWA 在 iOS6/7 上兼容性测试的问题，探究 PWA 在 iOS6/7 上的兼容性问题，以及一些解决方法和技巧。
PWA 在 iOS6/7 上的兼容性测试
在测试 PWA 兼容性的时候，我们使用了 iPhone 4 作为测试设备，它运行的是 iOS7。在测试过程中，我们发现以下问题：
无法安装 PWA 应用：在 iOS6/7 中，无法像普通应用一样下载和安装 PWA 应用，只能通过 Safari 添加到主屏幕的方式来使用 PWA 应用。
Service Worker 不可用：Service Worker 是 PWA 的核心之一，但是在 iOS6/7 中，不支持 Service Worker 的使用。
客户端缓存问题：在 iOS6/7 中，缓存 API 、Fetch API 和 Cache-API 的使用都不支持，这对于 PWA 应用的性能提升和离线访问等方面都有很大的影响。
没有 Web App Manifest：Web App Manifest 是 PWA 的重要部分，可以定义 PWA 应用的图标、名称、启动画面等等，但在 iOS6/7 中不支持。
解决方法和技巧
方案一：使用 Polyfill
针对上述问题，我们可以选择使用一些针对 iOS6/7 的 Polyfill 库，以解决一些 API 不支持的问题，比如：
- Service Worker
Service Worker 无法在 iOS6/7 中使用，但是可以使用一个名为 sw-toolbox 的第三方库来提供类似 Service Worker 的功能。
-- -------------------- ---- ------- ------------------------------- ------------------ ---- ------------- ----------------- --- --------------------------- -----------------
这样，我们就可以缓存页面和资源，并在离线状态下访问它们了。
- 缓存 API 和 Fetch API
可以试用 cache.js 这个库，它提供了一些类似缓存 API 和 Fetch API 的功能，来解决 iOS6/7 中缓存 API 和 Fetch API 不支持的问题。
-- -------------------- ---- -------
-------------------------- --------
--------------------- -
-------------------
---
--------------------------
--------------------- -
-------------------
---需要注意的是，这个库在执行一些复杂的操作时，可能会导致性能问题。因此，我们需要确保使用它时，尽量将操作简化。
- Web App Manifest
可以使用 manifiesta.js 这个库来处理 Web App Manifest。
-- -------------------- ---- -------
--- -------- - -
------- --- -----
-------- --
------ -----------
-------- ----------
------- -----------
---
------------ ---
--
--- ---- - -------------------------------
-------- - -----------
--------- - ------------------------------ ----------------------------------
--------------------------------这样，我们就可以在 iOS6/7 上实现类似 Web App Manifest 的功能。
方案二：设计页面布局
在 iOS6/7 上，由于浏览器的限制，不能很好地支持一些 CSS 和 JavaScript API，因此在设计页面布局时，需要做好相应的规划，比如：
避免使用固定大小的布局，而应该使用基于百分比或自适应的布局，以确保在不同屏幕尺寸上都能良好地呈现。
避免使用大量的动画效果，以减少页面的重绘和重排，提高页面的性能。
使用基于浏览器原生支持的 CSS 和 JavaScript API，而避免使用一些对 iOS6/7 不支持的 API。
方案三：降级方案
针对在 iOS6/7 上访问 PWA 应用的问题，我们还可以使用一些降级方案来处理，比如：
提供一个 iOS6/7 专用版本的 PWA 应用，包含了基本的功能，而不需要依赖于 Service Worker、Web App Manifest 和其他高级 API。
提供一个普通的 Web App 版本，在非 iOS6/7 的设备中提供 PWA 应用的功能，在 iOS6/7 的设备中提供普通的 Web App。
总结
PWA 相较于原生应用拥有更多的优势，在应用开发中具有非常大的潜力。虽然在 iOS6/7 中 PWA 的兼容性问题比较严重，但是通过采取一些解决方法和技巧，我们可以在保持 PWA 应用的核心功能的前提下，保证在 iOS6/7 的设备上也能够良好运行。希望这篇文章对于 PWA 的开发者们能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484575448841e989436e3a4