背景
PWA（Progressive Web App）作为一种新型的 Web 应用形式，它的出现给 Web 应用带来了更好的用户体验，同时也获得了广泛的应用。在 Android 系统中，PWA 表现的非常出色，相较于传统的 Web 应用体验优化非常明显，缩短了应用加载时间，提升了用户体验。然而，在 iOS 上，PWA 表现不尽如人意，甚至存在大规模功能缺失、稳定性问题等等，给开发者和用户带来了很多不便。
iOS 上的 PWA 兼容性问题
无法添加到主屏幕
在 Safari 中，iOS 用户无法将 PWA 添加到主屏幕。尽管可以通过分享菜单保存应用，但这需要额外的操作，大大降低了 PWA 的易用性和便捷性。此外，添加到主屏幕还可以支持离线运行和提供快捷方式等功能。
缺失底部导航栏
在 Android 系统上，PWA 提供了丰富的 API 展示底部导航栏，使得用户在应用中非常方便的进行页面切换操作，提高了用户的效率和体验。而在 iOS 系统上，该功能却偏偏被屏蔽了，这会影响到开发者对于 PWA 应用 UI 的设计和体验的优化。
存储空间限制
iOS 对于 PWA 的缓存管理存在存储空间限制。由于无法识别垃圾文件，因此它会将一些必要文件删除，导致应用重新加载时效率变差，出现“白屏”等问题，这也是 iOS 上 PWA 应用体验的一大瓶颈。
服务 Worker 不可用
服务 Worker 是 PWA 中一个至关重要的组成部分，它可以轻松实现缓存、数据同步和推送通知等功能，大大提高了 Web 应用的效率和交互性。但在 iOS 上，这个功能却被 Apple 禁用了，无法支持服务 Worker。
解决方案及实现代码
解决无法添加到主屏幕的问题
对于 iOS 上无法将 PWA 添加到主屏幕的问题可以通过改变 web app manifest 文件中 start_url 属性实现，将该属性设置为 PWA 主界面的 URL 地址。同时，在 PWA 页面中可以添加如下的 JavaScript 代码：
if("standalone"in window.navigator) {
if(!window.navigator.standalone) {
document.querySelector("meta[name='apple-mobile-web-app-capable']").content="yes";
}
}这个代码将会在 iOS 设备中进行验证，如果没有安装在主屏幕上，那么它会询问用户是否安装。如果用户选择“添加到主屏幕”，那么应用将会完成安装，反之则不进行安装。
解决缺失底部导航栏问题
对于 iOS 缺失底部导航栏的问题，解决方法也非常简单，可以在 viewport 中加入下面的代码：
<meta name="viewport" content="viewport-fit=cover">
这个代码可以让页面适应视口，并在其中包含一些 iOS 的指定机型所需要的信息。这样，PWA 在 iPhone X 系列上的底部导航栏就可以完美呈现。
解决存储空间限制问题
iOS 中限制 PWA 应用空间的主要原因是其磁盘空间管理机制无法识别垃圾文件，导致 PWA 中的文件被认为也是垃圾文件。这个问题可以通过缓存清理来解决，在 PWA 中加入下面的代码：
caches.keys().then(function (keys) {
for (let i = 0; i < keys.length; i++) {
if (keys[i] !== "v1") caches.delete(keys[i]);
}
});这个代码将会清楚版本不是 v1 之外的所有缓存。对于服务器文件更新频繁的 PWA 应用来说，这样可以在确保最新数据的同时，也不会因为缓存过多而被自动删除必要的文件。
解决服务 Worker 不可用问题
由于 iOS 中禁止服务 Worker 的使用，因此这个问题不便通过应用程序本身进行解决。不过，我们可以使用 Workbox 这样的第三方库来进行缓存管理和网络请求。Workbox 提供了丰富的插件和 API，用于快速开发出适配 iOS 及其他平台的 PWA 应用。
总结
PWA 在 iOS 上的兼容性问题主要集中在添加到主屏幕、缺失底部导航栏、存储空间限制和服务 Worker 不可用等方面。虽然这些问题存在，但我们也可以通过优秀的实现代码和第三方库来提高 PWA 在 iOS 上的用户体验，甚至达到更好的效果。PWA 技术的快速发展，也为我们未来开发更加高效、优秀的 Web 应用提供了更为广阔的发展空间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649156fa48841e9894f58634