基于 HTML5 技术跨平台混合式应用开发解决方案 UniSDP

背景：

笔者 2004～2008 年初，从事移动互联网开发，学习使用了 J2ME、Brew、Symbian 等开发技术。08 年加入东软商用，从事 JavaEE、RIA 企业应用和智能设备开发，主要使用 ActionScript、JavaScirpt、iOS、Android、linux 平台上开发技术。笔者感到，在学些各种开发语言和平台开发技术时，花费了太多的时间和精力。无法将更多的精力投入到更深层次技术学习、以及业务积累和以及创新、创意中去。2010 年笔者在 Adnroid、iOS、Linux 平台上测试了对 HTML5 的支持情况，发现可以尝试利用 HTML5 来改变这一情况。2010 年我们在开发某 DLNA 相关产品分别在 Linux、Meego、iOS、Android 平台进行开发。在平台移植、程序架构、程序逻辑和用户界面方面重复性开发浪费了很多资源，UniSDP 最初就是为了解决这一问题而起始的。

这篇文章不会讨论过多的技术细节，而是把我们在多平台应用开发经验，以及智能家电嵌入式领域研发方向的最新动态与大家分享。

一．Hybrid Application：

混合式应用程序采用 Web 开发技术与 Native 系统技术相结合的方式开发的应用程序。 由于 HTML5 标准尚未正式发布，基于 HTML5 技术的 WebAPP 尚不能完全实现 Native APP 的全部功能，因此 Hybrid APP 在相当长一段时间内是全面解决跨平台问题的最佳方案。

Native APP、Web APP、Hybrid APP特性对比表：

Native App

Web App

Hybrid App

开发成本

高

低

低

跨平台

否

是

是

需要安装

是

否

首次安装

实时增量更新

支持

支持

是

系统 API 调用

能

否

能

开发灵活度

中

中

高

对 AppStore 依赖

高

低

低

二．UniSDP 定义：

UniSDP (Unified Smart Device Development Practices) 项目启始于 2010 年 12 月，它是一个用于构建支持 PC 和智能设备混合式应用开发的整体解决方案，它是由开发框架，运营平台，公共构件和方法学组成的。

UniSDP 是 NeuSoft Smart TV TurnKey Solution 的核心技术之一，我们在 UniSDP 在 Neusoft DTV 解决方案基础上构建 Android、Linux 通用的 Smart TV 解决方案。通过 UniSDP 来集成各领域的中间件，支撑构建跨平台的资讯、影音、游戏的应用平台。目前我们与合作伙伴共同研发的很多产品和项目，都采纳了 UniSDP 的设计思路，整体或部分使用了 UniSDP 的相关技术。

三．UniSDP 的开发理念：

1. UniSDP 是 Hybrid APP 开发及运营的整体解决方案。
2. UniSDP 可以支持 PC、手机、平板、Smart TV、车载系统等硬件平台开发。
3. UniSDP 能实现跨平台统一的或接近系统原生的用体验。
4. 基于 UniSDP 开发，效率高、成本低、学习曲线低。
5. UniSDP 集成了众多专业领域原生组件，开发者无需掌握专业即可开发相应产品。
6. UniSDP 的 HybridAPP 只需首次安装，可以支持集中控制，统一发布。
7. UniSDP 能实现在运行期实时的、增量更新。
8. UniSDP 拥有敏捷软件工厂和开发者体系结构。
9. UniSDP Hybrid APP Store 是 NativeApp 模式新颖，商业前景广阔。

四．UniSDP 的开发 SDK：

UniSDP 的开发框架由 HTML5、JavaScirpt、CSS3 和 UniSDP 核心组件构成。UniSDP 的开发 SDK 在不同的系统和硬件平台上都有不同的版本，使用者可以根据具体项目需求进行剪裁或补充。UniSDP 保证对于最上层的应用开发者在各个平台上相同功能的编程接口的一致性。

五．UniSDP 的核心组件：

UniSDP 核心组件是由下图所示六大核心组件共同组成的。此外 UniSDP 最新在正在开发提供针对不同系统和硬件平台, 提供图形、影音硬件加速的浏览器核心，来进一步提升图形图像性能。

UniSDP**** 核心组件构成图

UniSDP 核心组件说明

Native MiddleWare：原生系统中间件层，该层实现各个系统平台如 Linux，Android、iOS 等平台上与本地系统 API 接入和资源的访问、设备调用以及各个平台扩展中间件的。

1. 各个平台的文件系统，数据库扩展、网络 io、文件上传、Socket 增强（用于不支持 webSocket）情况。
2. 设备调用、摄像头、麦克风、传感器等多媒体接等。
3. 原生 UI 组件调用接口、比如图层控制、WebView 行为控制、等等。
4. 中间件扩展如 DLNA(数字家庭网络联盟)、DTV(数字电视相关接口)、语音识别、人脸识别、SDM(智能设备管理)、DCM（设备连接管理）等。

Hybrid App Engine：混合式应用支撑层，通过该层衔接浏览器（WebAPP）与各平台系统的 Native 接口。

1. 统一的 UI 显示，比如 Android 和 iOS 系统的 UI 和操控有很大不同，如果基于系统原生组件开发将非常困难实现相同 UI 显示。UniSDP 采用 HTML5 技术开发跨平台的通用的 UI，构建与众不同的用户体验。
2. 统一的系统行为,HTML5 控件在不同系统下行为会有差异，比如 video 标签。在移动设备上往往是全屏播放，无法嵌入在页面显示。UniSDP 统一了此类行为。
3. 安全认证：所有 Web 与系统底层的接口的访问都必须经过授权认证，来自远程页面发起的访问认证在访问时申请，会话内有效。
4. 原生 API 开发：基于原生组件的开发增强。举例 DLNA 组件是基于标准 C 开发，在集成到 iOS、与 Android 时分别基于 ObjectC 和 Java 开发相关功能。
5. Web 与 Native 调用方式，UniSDP 在不同平台可以采用下列方式

• 拦截 Web 浏览器 URL 解析。
• 扩展 js 引擎、和 tag 解析。
• 通过本地 HTTP 或 Socket 服务。
  UniSDP 可以采用自己的定制跨平台的增强浏览器内核实现更强大的功能。

7. Web 增强，UniSDP 针对很多 HTML5 做了 web 增强。比如音频和视频标签与系统原生媒体播放时的是否可以同时播放。

WebApp Engine：由 HTML5、CSS3、JS 框架组成, 包括 UI 框架、公共组件和 WEB 桌面系统，用于支撑 Web APP 开发。

1. Cloud Service Engine：用于服务继承，版本控制、开放认证，更新控制支持云服务开发。
2. Hybrid App Store：提供 Hybrid App 的应用商店，及版本管理。
3. Cloud Device Management：完成设备的的云端管理功能。

七．UniSDP Hybird APP 运行模式：

首次安装 UniSDP 程序后，在 Online 模式下，程序可以在后台自动与服务器同步更新，可以按照用户设定或云端设置按照页面单元、模块、文件、程序组等维度，在 Hybrid App 运行期进行增量、实时更新。在 Offline 模式下，程序仍可使用非网络功能，访问本地资源正常使用。

八．Unisdp 的开发模式：

敏捷软件工厂和开发者体系结构

我们使用 UniSDP 开发 SmartTV 相关产品的项目时，是由 TV 领域专家、Linux、Adnroid 嵌入式专家，UniSDP 核心组件开发人员，云服务开发者和应用开发者共同协作开发的。开发者开发测试自的模块根据约定的接口进行装配和测试。开发者无需掌握其他模块全部知识，能专注自己喜欢的领域，工作效率更高，掌握程度更深。对于应用开发者可以完全不懂 iOS、Android、Linux 等开发技术，也不需要过多了解诸如 DTV、DLNA 等专业领域知识，只需掌握 HTML5、JavaScript、CSS 调用 UniSDP 相应开发 SDK 即可完成应用开发。

九．UniSDP 与 PhoneGap 的区别：

• 使用场景上的区别：
  • PhoneGap 主要是用来支持跨平台的应用程序开发的解决方案，PhoneGap 希望开发者只需要懂得 web 开发技术即可开发跨平台应用程序。
  • UniSDP 是用来满足在智能设备及 PC 上用来研发操作系统、应用平台、应用程序等企业级开发和第三方开发者开发需求的。它是包含大量专业领域的中间件 DTV、DLNA、CDM、MDM 等，以及混合式应用商店、云服务平台等。UniSDP 开发，往往是由领域专家、嵌入式开发者、UniSDP 开发者、云服务开发者、应用开发者协同工作的。希望能为第三方开发者提供更多专业领域的 API 来简化开发。
• 设计原理上的区别 ：
  • PhoneGap 是单页面应用程序（Single Page Application），整个应用程序是运行在 WebView 中，一个应用是在一个 Web 页面完成的，全面 Ajax 化，整个程序运行在一个 WebView 中。
  • UniSDP 在开发时可以根据实际情况选择基于 Web 开放技术和 Native 开发技术采用多个 HTML 页面和多个 WebView 来解决问题。有开发者反应 WebView 在 Android 系统下长时间运行后内存使用量消耗过多，导致系统出现各种问题。采用多页面或多 WebView 方式可以采取多种办法来缓解或解决这一问题。

UniSDP: 通过 UniSDP 在 Native 扩展控件实现不同控件之间数据交互。

1. WebView1 内通过 HTML5 实现 EPG 功能，与 MediaPlayer 完成交互。
2. js 调用 UniSDP 组件动态调用 MediaPlayerController。
3. WebView1 的 DIV 调用 UniSDP 控件实现与底层系统交互，完成视频播放控制，相机调用等。
4. 通过 WebView2 独立加载第三方 web 页面。
5. WebView 上通过 UniSDP 动态调用相机接口，创建 SufaceView ，完成相片拍摄。
6. MediaPlayerController 的控制条。
7. WebView1 中加载 JQuery 相册，非常简单的实现相册功能。

PhoneGap：单纯采用 Web 技术通过单页面方式开发。

十. 相关演示

如果你对 UniSDP 感兴趣，可以到 http://www.youku.com/playlist_show/id_17105254.html 查看相关演示视频，其中包括：

1. 语音控制 UniSDP HTML5 SmartTV Demo，HTML5 相关展示。
2. 语音控制平板电脑 UniSDP HTML5 Tablet Demo
3. UniSDP Hybrid APP Sotre 运行期安装新应用
4. UiniSDP HTML5 Auido 扩展
5. HTML5 EPG Demo
6. HTML5 Smart TV SNS 社交 & 多设备协作

关于作者

孙广宇，东软集团 (大连) 有限公司运营经理 商用软件事业部 产品经理、UniSDP 首席架构师。HTML5 研究小组大连负责人。

感谢侯伯薇对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。