Hybrid的认识

• 引入
• 方案
• Javascript 向 Native通讯
  • 注入api方式
  • 拦截alert/prompt/console
  • Webview url schema跳转拦截
• Native 向 Javascript通讯
• 接入JSBridge
• 关于Hybrid的优化
• 引用

Hybrid的原理学习

引入

Hybrid app, 即在web技术上拓展了native的能力, 比如在滴滴app里的webview里面, 可以调用native的人脸识别模块

方案

• Webview 通过JSBridge来增强js的api, 迅速将Native的功能用上来
• React Native, 在JSBridge的基础上, 将虚拟dom传到native, 使用原生的渲染
• 小程序, 使用双Webview双线程的模式, 隔离的JS逻辑和UI渲染, 来提升页面体验和开发体验

Javascript 向 Native通讯

注入api方式

Native获取Javascript的上下文, 并注入一个对象供JS调用

在webview里使用时, 有类似代码来得到native暴露的bridge对象

function initBridge (bridgeName, bridgeEvent, system, callback) {
  const bridge: any = window[bridgeName]
  if (bridge) {
    if (system === 'ios' && bridge.init) {
      try {
        bridge.init()
      } catch (e) {}
    }

    callback(bridge)

  } else {
    document.addEventListener(bridgeEvent, () => {
      // @ts-ignore
      initBridge.apply(this, arguments)
    }, false)
  }
}

拦截alert/prompt/console

通常拦截prompt, 商定通讯机制, 来进行通讯

Webview url schema跳转拦截

形如 xxapp://openCamera?h=2

如何回调: 通过 window.addEventListener 和 window.dispatchEvent这两个基础API。

Native 向 Javascript通讯

因为Native是H5的直接宿主, 可以直接在h5里面执行js

接入JSBridge

分两个部分

• js部分: 如果url在app的白名单, 会在html的头部注入bridge.js, 里面封装了通讯机制(具体看是以哪种通讯机制)
• native部分: 响应webview里发来的消息, 这部分代码就不是js写的了

关于Hybrid的优化

目前大部分使用Hybrid的app还是使用在线H5的形式, 即我们只需要将H5代码部署到服务器上, 只要把对应的 URL地址 给到客户端, 用 WebView 打开该URL, 然后下载静态文件, 这种体验就会比native的应用慢

其实这里还有一种方式, 可以将静态文件预先加载到app里, 会大大减小首屏的加载时间. 部分大厂有了实践.

总的来说, Hybrid app继续发扬了web开发快速迭代的优势, 同时可以灵活定制使用native的功能, 但缺点也很明显, 体验效果也只能是无效接近native

引用

• Hybrid App技术解析