在现代 Web 技术中，PWA（Progressive Web App） 是一个崭新的概念，旨在为 Web 应用程序赋予更多的功能和表现力。然而，Web 技术本质上是基于浏览器的，有时候需要与手机本地的一些功能进行交互，比如调用摄像头、GPS 或者推送消息等。这就需要我们在 PWA 中与原生应用进行交互，本文将会详细讲述 PWA 中如何与原生应用进行交互，并提供示例代码和指导意义。
PWA 与原生应用的交互方式
在 PWA 中与原生应用进行交互，主要有以下三种方式：
- 通过 Web API 进行交互：Web API 是一组提供 Web 应用访问系统功能的界面，PWA 可以通过 Web API 来调用原生应用的一些功能。例如，WebRTC 对于视频和语音调用，Geolocation API 对于地理位置，Notification API 对于消息推送等。还有其他 Web API，例如 WebVR、WebBluetooth、WebUSB。通过这些 Web API，PWA 可以实现对原生应用的支持。
- 通过 WebView 进行交互：PWA 可以在 WebView 中运行，与原生应用的 WebView 进行交互，可以借由 WebView 的 setWebViewClient() 或者 setWebChromeClient() 等方法，来实现 PWA 与原生应用间的数据传输和界面交互。
- 通过 Native Bridge 进行交互： Native Bridge 是一套将 Web 界面和 Native 应用完美结合的方案，它可以将 PWA 应用放置在本地应用程序中，并且可以快速访问本地设备和文件。Native Bridge 可以在 JavaScript 和原生应用程序之间自由和灵活地通信，提供了最佳的现代 Web 体验和本地应用程序性能。
下面我们将分别详细讲解三种方式的实现方法，并附带相应的示例代码。
1. 通过 Web API 进行交互
由于 PWA 使用的是 Web 技术，所以这种方式相当直观和简单。Web API 的实现方式，一般使用 HTML5 里面新的 API 和特性。例如：
Geolocation API
通过 Geolocation API，我们可以获得当前设备的地理位置信息。这种方式的实现非常简单，我们只需要调用 Navigator.geolocation 对象中的 getCurrentPosition() 方法来获取当前设备的位置信息。下面是示例代码：
-- -------------------- ---- ------- -- ----------------------- - ------------------------------------------------------- - ---- - ------------------------ -- --- --------- -- ---- ----------- - -------- ---------------------- - ---------------------- - - ------------------------ - - ---------- - - --------------------------- -
Web Notifications API
通过 Web Notifications API，我们可以在浏览器中推送消息提醒。与 Web Notification 相关的 API 很多，我们这里使用 Notification 接口来实现消息推送。下面是示例代码：
if (Notification.permission === "granted") {
var notification = new Notification("Hi there!");
} else if (Notification.permission !== 'denied') {
Notification.requestPermission().then(permission => {
var notification = new Notification("Hi there!");
});
}WebRTC API
通过 WebRTC API，我们可以在浏览器中进行实时音视频通话。这里我们以实现视频通话为例，下面是示例代码：
navigator.getUserMedia({ video: true }, function(stream) {
var video = document.querySelector("video");
video.srcObject = stream;
}, function(error) {
console.log("Something went wrong");
});2. 通过 WebView 进行交互
如果 PWA 要在 WebView 中运行，并与原生应用进行交互，则需要使用 Android WebView 或 iOS WKWebView。这种方式需要我们在 WebView 的 setWebViewClient() 或者 setWebChromeClient() 方法中设置一个 WebChromeClient 类或 WebViewClient 类，通过这个类来实现 PWA 和原生应用的交互。
Android WebView
对于 Android WebView，我们需要继承 WebChromeClient 或者 WebViewClient 类，并重写里面的方法来实现 PWA 和原生应用间的数据传输和界面交互。下面是示例代码：
-- -------------------- ---- -------
------ ----- --------------- ------- ------------- -
---------
------ ------- -------------------------------- ----- ------ ---- -
-- -------- --- -----------
------ ------
-
---------
------ ---- ---------------------- ----- ------ ---- -
-- --------
-
-
------ ----- ----------------- ------- --------------- -
---------
------ ---- ----------------------- ----- ------ ------ -
-- --------
-
-iOS WKWebView
对于 iOS WKWebView，我们同样需要设置一个 WKNavigationDelegate 类或者 WKUIDelegate 类，并重写里面的方法来实现 PWA 和原生应用间的数据传输和界面交互。下面是示例代码：
-- -------------------- ---- -------
----- --------------------- --------- -------------------- -
---- --------- -------- ---------- --------- ----------- -------------- -
-- --------
-
---- --------- -------- ---------- --------------- ----------------- ------------------- ---------------- --------- -------------------------- -- ----- -
-- -----
-----------------------
-
-
----- ------------- --------- ------------ - -3. 通过 Native Bridge 进行交互
Native Bridge 是一种在 PWA 和原生应用之间建立桥梁的方案。它可以将 PWA 应用放置在本地应用程序中，并且可以快速访问本地设备和文件。Native Bridge 可以在 JavaScript 和原生应用程序之间自由和灵活地通信，提供了最佳的现代 Web 体验和本地应用程序性能。
Native Bridge 一般分为三个部分：Native Bridge 原生代码、桥梁通信协议、Web 端 Bridge 代码。其中 Native Bridge 原生代码由原生开发者编写，实现对本地功能的访问和对 Web 页面接口的暴露。桥梁通信协议是为了安全的通信使用，由双方增加校验码来防止黑客攻击。Web 端 Bridge 代码负责发送消息到 Native 端，以及接受来自 Native 端的消息。在工程中通过加入双方的代码，实现本地功能和 Web 功能的互通。
我们下面以 iOS 平台上的 Native Bridge 实现为例，具体实现流程如下：
- 创建一个 Native Bridge 类和一个 Native Bridge JSON 协议。
-- -------------------- ---- -------
----- ------------- --------- ---------------------- -
---- --- -------- ----------
---- ----------------------- ---------------------- ------------------------ ---------- -------- ---------------- -
-------------------
--- ----------- - ------------ --- ------
--- ---- - ----------------------- -------
--- ---- - ---- ---------------------------------- ----- -------- --- --- ------------
--- -- - ---------- --- --------
--- ------ - -------------- --- --------
--- ------ - -------------- --- ------------
--- ---------- - ------------------ --- --------
-- ---
-
---- ------ -------- ------------- --------- ------- ------- -- ------- -
-- ---
--- ---- - ---- -------------------------------------- -------- -------- ---
--- ------- - ------------ ----- --------- -------
-------------------------------------------------------------------- ------------------ - -------- ------ --
-- -------- -- --- -
----------------- ------
-
--
-
-- ---
-Native Bridge JSON 协议用来定义数据协议，并在 Native 和 Web 中统一起来，使二者的通信变得更加方便。
{
"id": "1",
"method": "getUserInfo",
"params": {},
"callbackId": "callbackId_1"
}其中，id 表示消息 ID，method 表示 Web 端调用的原生方法名，params 表示 Web 端传递的参数，callbackId 表示返回函数 ID。它遵循标准的 JSON 格式，并且消息格式在 Native 和 Web 端是一样的。
- 在本地应用中实现 NativeBridge 原生代码。
-- -------------------- ---- -------
----- ----------- -------- -
----- ---- ------- ------- ----- --------- --------------------- -
------------ ------ ------- ---- ------- ------------
--- ------ - -
------- --
---------- ------ -------------
-
---------------- ----
-
----- ---- ------------- ------- ----- --------- --------------------- -
--- ----- -------- ---- - -
----------- ----- ------
-------- ---------------
-
-------------- ----
-
-- ---
-- 创建 Web Bridge 代码。
-- -------------------- ---- -------
--- -------- - --
--- ------ - -
---------- ---
----------- ---------------- ------- --------- -
--- ----------- - -
--- -----------
------- -------
------- ------ - ------ - ---
----------- ---------
--
-- ---------- -
--- ---------- - ------------------------- - ----------- - ------------------
-------------------------- - ---------
-
----------- - ----------------------------
-- ------- ------------- -- ----------- -- ------ ----------------------------- -- ----------- -- ------ ------------------------------------------ -- ------------ -
--------------------------------------------------------------------
-
--
-------------------- ----------------- -
--- ---- - --------------------
--- ------ - ---------------
--- ------ - ---------------
--- ---------- - -------------------
--- --- - --------------------------
-- ---- -- ---------- -
--- ---- - -----
----------- ---------------- ------ -
--- ----------- - -
--- ----------
------ ----------
------- ---------
-
----------------- - -----------
-- ------ -- ---------- -
-------------------- - ------
- ---- -- ------- -- ---------- -
--------------------- - -------
-
----------- - ----------------------------
-- ------------ -
--------------------------- ---- ----------- ------- --------------------------
- ---- -
--------------------------- ---- ----------- ------- --------------------------
-
---
-
--
--- 在 Web 程序中调用本地函数。
bridge.callNative('getUserInfo', null, function(result, error) {
if (error) {
console.log(error);
} else {
console.log(result);
}
});总之，Native Bridge 方案凭借其多样的interface，可以说是当前最优的解决方案之一。
总结
PWA 作为一种全新的 Web 应用程序开发模式，与传统的 Web 应用程序相比，具有更好的性能、更丰富的功能以及更流畅的体验。在 PWA 中，我们可以通过 Web API、WebView 或 Native Bridge 三种方式实现 PWA 和原生应用的交互。希望本文能够为大家提供一些帮助，并对关注 PWA 开发的读者提供一些参考和借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d716f48841e9894bbda7d
