Hybrid APP开发:JSSDK

拖稿了好久的「Hybrid APP开发系列」又更新了~
今天继续写JSSDK

为什么会有JSSDK

我之前文章介绍了通过 JSBridge 实现页面和NA的相互调用,并且介绍了模板本地包的开发和后台维护系统。今天介绍的是JSSDK,通过 JSSDK 可以实现:

  1. 抹平JSBridge的平台实现差异
  2. 对齐端能力,内部消化版本差异
  3. sdk封装后的代码更加符合前端习惯
  4. 权限控制、鉴权、对外开放,实现生态建设

关于sdk的代码级别的设计,可以参考文章:《JSSDK设计指南》

如果做过微信页面开发的,应该都知道wx.js,这就是微信的JSSDK,在微信内需要调用微信的端能力就需要引入这个js。

JSSDK的设计

JSSDK的设计包括两部分:

  1. 随着每个NA客户端版本内置的js,称为:inject.js,他的主要作用是封装JSBridge逻辑,通过随版更新实现减少端能力的版本分裂,降低整个sdk的代码复杂性。inject.js是一段js代码,当客户端加载一个页面的时候,由客户端在适当的时机注入到webview内执行,执行后的代码就会有给webview增加js方法,例如微信的_WeixinJSBridge,类比chrome开发插件当中的content_scripts,可以在document_startdocument_end等时机进行执行。
  2. 云端JS,即实际暴漏给开发者使用的js,称为:jssdk.js,这个是真正开发者使用的sdk文件,通过script外链引入,例如wx.js,这个js文件通过和inject.js进行交换,完成端能力的调用、鉴权和客户端事件监听等操作

Hybrid APP开发:模板本地化

上次文章介绍了Hybrid开发中常用到的Web和NA的通信方案:JSBridge,通过比较之后,最终推荐安卓和iOS通用的scheme协议,可以保证APP内和外都可以使用,今天开始正式介绍整个Hybrid架构内容。就像本系列「开篇语」提到的,这里的Hybrid是「狭义的Hybrid」,而不是所有的NA套个webapp就是Hybrid。

好的架构不是随波逐流,应该经得起考研

Hybrid技术体系是一套很多技术组成的完整知识架构。拿手百Hybrid方案,包括规范/约定、开发、联调、服务支撑等整个开发流程,而随着PWA之类「新」技术的产生又在考研技术架构面向未来的设计能力,所以手百Hybrid还在不断完善,注意是不断完善,不是推到重来!手百Hybrid技术整体架构如下:


接下来系列会围绕本架构图中重要的部分依次展开,全面的介绍Hybrid开发知识,本文介绍模板本地化开发方案。

所谓「模板本地化」,就是将Web页面内置到APP内,随版发布上线,然后通过云端接口实现更新,再直白一点:将H5网站的页面预先放到客户端发版,然后云端更新新版本。

这个方案好处在于:

  • 本地化模板提高页面打开速度,减少用户等待时间
  • 模板可更新,版本控制更方便可控,收敛快
  • Web页面和NA内置代码实现一套代码,减少开发成本
  • 上手成本小,开发就是实际开发Web(H5)页面,通过构建工具,生成Web页面和NA模板包不同的代码
  • 标准H5代码,迁移成本小,通过Node和构建工具,可以做到H5版本前后同构,将来还可以不改代码的前提下适配PWA

本文提到的JSBridge调起协议是统一使用hybrid://开头,只是提供思路和介绍整体Hybrid模板包架构和用到的技术,不涉及到具体代码,但是文章保证干货和诚意都满满😄。

模板本地化实现方案

本文会介绍两种模板本地化方案,分别是:依赖客户端拦截器(proxy)的方案一;完全无域名限制的方案二,两个方案的实现流程如下:

Hybrid 开发:JsBridge - Web和客户端双向通信

Hybrid开发中,web页面往往会跟native进行交互,而JSBridge就是web页面和native进行通信的桥梁,通过JSBridge可以实现web调用native的方法,native可以通过webview.loadUrl之类的方法,将javascript:xxx代码放在页面执行,这有点类似在浏览器地址栏直接输入:javascript:xxx

本文较长,先把目录列出来:

  • JSBridge多种形式
    • js Interface 直接注入到window对象
    • 改写浏览器原有对象:alert/console/prompt
    • URL scheme
  • 唤起APP技术
    • intent
    • localserver
    • scheme:deeplink/applink/Universal link
    • smart app banner
  • JSBridge安全
  • JSBridge的最佳实践
    • 协议规范
    • 回调函数
    • 预留升级/统计能力
    • 简单JSBridge调用封装

JSBridge多种形式

web和native进行通信,方法有很多,接下来一一列举一下JSBridge的多种形式,及其利弊。

JavaScriptInterface

JSInterface是安卓4.2-官方推荐的解决方案,原理是通过WebView提供的addJavascriptInterface方法给浏览器window注入一个命名空间,然后给Web增加一些可以操作Java的反射。

// Android java代码
mWebView.addJavascriptInterface(new Class(), 'android');  

public class Class(){
  @JavascriptInterface
  public void method(){

  }
} 
// js 代码
window.android.method();

JSInterface在4.2之前的版本都可以,但是存在严重的安全隐患,容易被利用提权,从而调用各种Java的类和权限,甚至页面可以挂马。在我们实际产品(手机百度)开始阶段,用过这个方法,不过现在已经不使用了。