PWA（Progressive Web App）是一种新型的 Web 应用程序模型，可以提供近似原生应用的用户体验。它允许 web 应用程序被安装到用户设备的主屏幕上，可以离线访问、推送通知等，同时也支持在 iOS 和 Android 平台上运行。
在 PWA 的开发中，对于与原生应用程序交互的部分，我们通常会用到 JSBridge 技术。但在 iOS 平台上，由于 Safari 的限制，使用 JSBridge 技术会出现诸多兼容性问题，本文将会介绍 JSBridge 在 iOS 平台上的兼容性问题，并给出解决方案。
一、JSBridge 在 iOS 上的兼容性问题
1.1 协议限制
在 iOS 平台上，Safari 不支持本地文件协议（file://），因此我们不能通过在页面上引入本地 JSBridge 文件的方式来实现 JSBridge。
1.2 事件触发限制
在 iOS 平台上，Safari 在进行多点触控时会出现事件穿透的问题，即在进行多点触控时只有第一个触摸点能够触发事件，其他触点的事件都被忽略了。
1.3 XHR 请求限制
在 iOS 平台上，Safari 不支持在 WebView 中发起跨域的 XMLHttpRequest （XHR）请求，我们需要手动实现跨域请求。
二、解决方案
2.1 协议限制的解决方案
我们可以通过将本地 JSBridge 文件打包成一个 js 文件的方式，然后通过在 web 服务器上发布该 js 文件的链接，并在页面上引入链接的方式来实现 JSBridge。
2.2 事件触发限制的解决方案
我们可以通过在 iOS 平台上禁用页面的默认滚动事件，并自己实现滚动事件来解决事件穿透的问题。同时，我们可以在 onTouchStart 事件中判断触摸点的数量，只有一个触摸点时再触发我们自己实现的事件，从而避免事件穿透的问题。
-- -------------------- ---- -------
-------------------------------------- -------- --- -
-------------------
-- -
-------- -----
---
-------------------------------------------- -------- --- -
-- ----------------- --- -- -
-- ---------
-
---2.3 XHR 请求限制的解决方案
我们可以通过 JSONP 的方式来实现跨域请求数据，同时也可以使用 postMessage 来进行消息传递，从而跨越页面间的安全限制，实现数据的传输。
-- -------------------- ---- -------
-- ----- ----
-------- ------------- ----- --------- -
----- ------ - ---------------------------------
----------- - ------------------
---------- - --- - ------------ - ---------
----------------------------------
----------------------------------
-
-- ----------- ---------
-- ---
---------------------------------- -------- --- -
-- --------- --- ------------------------ -
--------------------
-
---
-- ---
---------------------------------- -------------------------三、总结
通过以上的解决方案，我们成功地解决了 JSBridge 在 iOS 平台上的兼容性问题，实现了 PWA 应用中 PWA 和原生应用程序交互的需求。实践证明，这些解决方案不仅适用于 JSBridge，在其他需要与原生应用程序交互的场景中也同样适用。希望本文能给大家带来一些启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530a92c7d4982a6eb23b2d4