PWA 中如何与原生应用进行交互

在现代 Web 技术中，PWA（Progressive Web App） 是一个崭新的概念，旨在为 Web 应用程序赋予更多的功能和表现力。然而，Web 技术本质上是基于浏览器的，有时候需要与手机本地的一些功能进行交互，比如调用摄像头、GPS 或者推送消息等。这就需要我们在 PWA 中与原生应用进行交互，本文将会详细讲述 PWA 中如何与原生应用进行交互，并提供示例代码和指导意义。

PWA 与原生应用的交互方式

在 PWA 中与原生应用进行交互，主要有以下三种方式：

  1. 通过 Web API 进行交互：Web API 是一组提供 Web 应用访问系统功能的界面，PWA 可以通过 Web API 来调用原生应用的一些功能。例如，WebRTC 对于视频和语音调用，Geolocation API 对于地理位置，Notification API 对于消息推送等。还有其他 Web API，例如 WebVR、WebBluetooth、WebUSB。通过这些 Web API，PWA 可以实现对原生应用的支持。
  2. 通过 WebView 进行交互：PWA 可以在 WebView 中运行，与原生应用的 WebView 进行交互，可以借由 WebView 的 setWebViewClient() 或者 setWebChromeClient() 等方法，来实现 PWA 与原生应用间的数据传输和界面交互。
  3. 通过 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 接口来实现消息推送。下面是示例代码：

-- ------------------------ --- ---------- -
  --- ------------ - --- ---------------- ---------
- ---- -- ------------------------ --- --------- -
  ------------------------------------------------ -- -
    --- ------------ - --- ---------------- ---------
  ---
-

WebRTC API

通过 WebRTC API，我们可以在浏览器中进行实时音视频通话。这里我们以实现视频通话为例，下面是示例代码：

------------------------ ------ ---- -- ---------------- -
    --- ----- - --------------------------------
    --------------- - -------
-- --------------- -
    ---------------------- ---- --------
---

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 实现为例，具体实现流程如下：

  1. 创建一个 Native Bridge 类和一个 Native Bridge JSON 协议。
----- ------------- --------- ---------------------- -
    ---- --- -------- ----------
    
    ---- ----------------------- ---------------------- ------------------------ ---------- -------- ---------------- -
        -------------------
        
        --- ----------- - ------------ --- ------
        --- ---- - ----------------------- -------
        --- ---- - ---- ---------------------------------- ----- -------- --- --- ------------
        --- -- - ---------- --- --------
        --- ------ - -------------- --- --------
        --- ------ - -------------- --- ------------
        --- ---------- - ------------------ --- --------
        
        -- --- 
    -

    ---- ------ -------- ------------- --------- ------- ------- -- ------- -
        
        -- ---
        
        --- ---- - ---- -------------------------------------- -------- -------- ---
        --- ------- - ------------ ----- --------- -------
        -------------------------------------------------------------------- ------------------ - -------- ------ --
            -- -------- -- --- -
                ----------------- ------
            -
        --
    -

    -- ---
-

Native Bridge JSON 协议用来定义数据协议，并在 Native 和 Web 中统一起来，使二者的通信变得更加方便。

-
  ----- ----
  --------- --------------
  --------- ---
  ------------- --------------
-

其中，id 表示消息 ID，method 表示 Web 端调用的原生方法名，params 表示 Web 端传递的参数，callbackId 表示返回函数 ID。它遵循标准的 JSON 格式，并且消息格式在 Native 和 Web 端是一样的。

  1. 在本地应用中实现 NativeBridge 原生代码。
----- ----------- -------- -
    ----- ---- ------- ------- ----- --------- --------------------- -
        ------------ ------ ------- ---- ------- ------------
        --- ------ - -
            ------- --
            ---------- ------ -------------
        -
        ---------------- ----
    -

    ----- ---- ------------- ------- ----- --------- --------------------- -
        --- ----- -------- ---- - -
            ----------- ----- ------
            -------- ---------------
        -
        -------------- ----
    -

    -- ---
-
  1. 创建 Web Bridge 代码。
--- -------- - --

--- ------ - -
  ---------- ---

  ----------- ---------------- ------- --------- -
    --- ----------- - -
      --- -----------
      ------- -------
      ------- ------ - ------ - ---
      ----------- ---------
    --

    -- ---------- -
      --- ---------- - ------------------------- - ----------- - ------------------
      -------------------------- - ---------
    -

    ----------- - ----------------------------

    -- ------- ------------- -- ----------- -- ------ ----------------------------- -- ----------- -- ------ ------------------------------------------ -- ------------ -
      --------------------------------------------------------------------
    -
  --

  -------------------- ----------------- -
    --- ---- - --------------------

    --- ------ - ---------------
    --- ------ - ---------------
    --- ---------- - -------------------

    --- --- - --------------------------
    -- ---- -- ---------- -
      --- ---- - -----

      ----------- ---------------- ------ -
        --- ----------- - -
          --- ----------
          ------ ----------
          ------- ---------
        -

        ----------------- - -----------

        -- ------ -- ---------- -
          -------------------- - ------
        - ---- -- ------- -- ---------- -
          --------------------- - -------
        -

        ----------- - ----------------------------

        -- ------------ -
          --------------------------- ---- ----------- ------- --------------------------
        - ---- -
          --------------------------- ---- ----------- ------- --------------------------
        -
      ---
    -
  --
--
  1. 在 Web 程序中调用本地函数。
-------------------------------- ----- ---------------- ------ -
  -- ------- -
    -------------------
  - ---- -
    --------------------
  -
---

总之，Native Bridge 方案凭借其多样的interface，可以说是当前最优的解决方案之一。

总结

PWA 作为一种全新的 Web 应用程序开发模式，与传统的 Web 应用程序相比，具有更好的性能、更丰富的功能以及更流畅的体验。在 PWA 中，我们可以通过 Web API、WebView 或 Native Bridge 三种方式实现 PWA 和原生应用的交互。希望本文能够为大家提供一些帮助，并对关注 PWA 开发的读者提供一些参考和借鉴。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648d716f48841e9894bbda7d

阅读全文

猜你喜欢

  • SASS 中的循环与递归

    SASS 是一种 CSS 预处理器，它允许我们使用变量、嵌套、函数等更高级的语言特性编写我们的样式表。其中循环和递归是 SASS 的两个非常强大的特性，可以帮助我们更方便地编写复杂的样式。

    1 年前
  • Express.js 中的 Middleware 机制解析

    在 Express.js 中，Middleware 是一个非常重要且常用的概念，本文将详细解析 Middleware 的工作原理和使用方法，并给出示例代码和实际应用场景。

    1 年前
  • TypeScript 中如何实现多维数组类型

    在 TypeScript 中，我们可以使用数组类型来定义一个数组。通常情况下，我们使用一维数组来表示一个线性数据结构。但是，在实际开发中，我们可能需要使用多维数组来表示一个更为复杂的数据结构。

    1 年前
  • ES9 中新增的 Array.prototype.sort() 方法使用及其讲解

    ES9 中新增的 Array.prototype.sort() 方法使用及其讲解 在最新的 ECMAScript 版本中，也就是 ES9 中，新增了 Array.prototype.sort() 方法...

    1 年前
  • Kubernetes 的 Pod 本地存储（EmptyDir）详解

    前言 Kubernetes 是一个高度可扩展的容器编排平台，可以轻松地管理和部署容器化应用程序。在 Kubernetes 中，Pod 是最小的可部署的单元，而容器则是 Pod 中的基本单位。

    1 年前
  • 使用 Chai 断言 JavaScript 中日期的特定月份

    在前端开发中，我们经常需要验证 JavaScript 中日期的特定月份是否正确。这时候，Chai 可以成为我们的好帮手。Chai 是一个可扩展的断言库，可以让我们更方便地编写断言语句，以便进行测试。

    1 年前
  • 了解 Promise.race() 方法的概念和使用

    在前端开发中，异步请求是非常常见的操作。然而，在处理异步请求时，我们经常会遇到一些问题：如何在多个异步请求中获取最快的响应？如何避免一些请求持续时间过长的情况？这就是 Promise.race() 方...

    1 年前
  • Go 语言程序性能调优实战

    前言 本文将介绍如何在 Go 语言项目中进行性能调优实战操作。本文适合那些已经对 Go 语言有一定基础了解的开发者。接下来的内容包括了对 Go 程序的资源占用的优化，代码的优化以及如何利用 Go 的工...

    1 年前
  • ES7 中的对象修饰符 (:) - 更好的类型检查

    在编写 JavaScript 代码时，经常会遇到类型错误的问题。在传统的 JavaScript 中，使用 typeof 来确保变量的类型是非常麻烦的。ES7 引入了一个新的对象修饰符 : ，可以让我们...

    1 年前
  • 如何使用 Serverless 框架和 Lambda 函数搭建 API 网关

    随着云计算时代的到来，Serverless 架构成为了越来越热门的话题。Serverless 架构的核心思想是将服务的资源管理从开发者转移到云平台上，使得开发者可以更专注于业务逻辑的实现而非底层的资源...

    1 年前
  • 利用 Flutter 实现 Material Design 风格的应用

    Material Design 是 Google 推出的设计语言，旨在提供一套视觉和交互的设计指南，以提高应用程序的用户体验。Flutter 是 Google 推出的 UI 工具包，它使构建高性能、美...

    1 年前
  • 利用 ES12 中的 Proxy 对象实现一些高级特性和技术

    随着前端技术的不断发展，JavaScript 语言也在不断地更新和优化，其中 ES12 中提出的 Proxy 对象就是一项非常有用的新特性。它可以让我们在对象、函数等各种数据类型上添加一些高级特性和功...

    1 年前
  • ESLint 插件推荐：eslint-plugin-vue

    介绍 ESLint 是一个 JavaScript 代码linting 工具，可以帮助我们发现代码中的问题并提醒我们遵循最佳实践。eslint-plugin-vue 是一个 ESLint 插件，专门用于...

    1 年前
  • 如何使用 CSS Reset 实现响应式布局

    引言 随着移动设备的普及，越来越多的人开始使用手机和平板电脑上网。这让我们必须思考如何针对不同的设备进行网页设计。同时，Web开发人员也必须考虑如何使网页在每个设备上看起来一样。

    1 年前
  • PWA 中如何优化图片加载

    前言 PWA 作为一种为 web 应用带来原生应用体验的技术方案，其优势在于离线缓存、快速响应以及快速的加载速度，而其中优化图片加载就是其中一个比较重要的部分。图片在网站中往往占据了很大一部分的流量和...

    1 年前
  • CSS Flexbox 实现兼容性布局的最佳实践

    Flexbox 是一种强大的 CSS 布局方案，旨在提供一种更加灵活的方式来进行盒式模型的排列。通过使用 flexbox 布局，开发者可以更加轻松地实现响应式布局，自适应布局以及多列布局。

    1 年前
  • 使用 TailwindCSS 快速实现自适应图片

    在前端开发中，自适应图片是一个常见的需求，特别是在移动端设备上，以及不同尺寸的显示器之间切换时，图片显示的大小和比例需要自动适应不同的屏幕尺寸。TailwindCSS 提供了一种快速实现自适应图片的方...

    1 年前
  • ES6 转 ES5 经常遇到的问题和解决方案

    ES6（ECMAScript 2015）是 JavaScript 的一种标准，它引入了许多新的语法和特性，使得前端开发更加便捷和高效。然而，由于部分浏览器不支持 ES6 语法，我们需要将 ES6 代码...

    1 年前
  • 如何在 Cypress 中使用 fixtures

    如何在 Cypress 中使用 fixtures Cypress 是一个基于 JavaScript 的端到端测试框架，在前端开发中使用广泛。我们可以利用 Cypress 来编写各种类型的测试工具，但如...

    1 年前
  • 如何测试 Mongoose 模型和查询器

    Mongoose 是一个优秀的 Node.js 库，它提供了对 MongoDB 数据库的操作和管理。Mongoose API 简单易用，强大的表达能力以及丰富的功能，使得它在 Web 开发中被广泛采用...

    1 年前

相关推荐

    暂无文章