基于H5容器的智能家电App研究与实践.pdf

4352023中国家电科技年会论文集0 引言随着智能家电行业的发展，用户对使用手机App控制家电的需求越来越高。传统的App原生开发方式，需要开发适配苹果端和安卓端两个平台，开发门槛高、效率低，且必须通过频繁发布新版本来更新功能，不能及时解决用户问题和响应用户诉求。而传统的H5开发方式，可以一套代码跨平台通用、动态加载和更新功能，但是又存在页面加载速度慢、网络依赖性强、难以使用系统硬件能力等问题，满足不了智能家电的使用场景。为了融合原生开发和H5开发的优点，互联网行业也诞生了很多混合开发的解决方案，例如cordova1、apicloud2等，支持开发原生插件，使H5页面可以使用系统能力。但是这些框架都限定了浏览器内核、规定了插件开发框架和开发方式，不能灵活选择浏览器内核，不能调整开发框架以适应智能家电App，且安全性3、交互实时性也满足不了智能家电控制的场景。本文将结合智能家电App的行业特殊性，研究一种H5和原生混合开发框架和方式，使用H5进行智能家电App的家电控制功能开发，在保留H5跨平台、动态更新优势的前提下，同时满足以下要求：（1）可以方便地扩展原生能力插件供家电控制页面使用；（2）家电控制页面和插件的交互可以实时响应；（3）家电控制页面打开基于H5容器的智能家电App研究与实践王栋1 刘刚1,2 朱凯奇1 李龙1 闫振1 马俊岭11.青岛海尔科技有限公司 山东青岛 266101；2.数字化家电国家重点实验室 山东青岛 266101摘 要：基于移动端H5容器的混合应用开发，是当前互联网的主要App开发方式之一。为了设计一套适合智能家电App的混合开发方案，对网页和原生交互的核心技术和交互效率进行深入调研和实验，研究落实了一套对插件进行单元测试的方法以及监控H5业务运行异常并上报的机制，并设计了离线包的方式用于提升页面加载速度。最终形成了一套适合智能家电App的混合开发系统，使用H5开发的设备控制页面，拥有良好的稳定性和用户体验。关键词：H5容器；混合应用；智能家电；家电控制；离线包Research and practice of intelligent home appliance app based on H5 containerWANG Dong1 LIU Gang1,2 ZHU Kaiqi1 LI Long1 YAN Zhen1 MA Junling11.Qingdao Haier Technology Co.,Ltd.Qingdao 266101;2.State Key Laboratory of Digital Household Applications Qingdao 266101Abstract:Hybrid application development based on mobile H5 containers is one of the primary approaches for app development in the current internet landscape.In order to design a hybrid development solution suitable for smart home appliance apps,an in-depth investigation and experimentation of the core technologies and interaction efficiency between Web and native interaction were conducted.This study establishes a methodology for unit testing plugins and devises a mechanism to monitor abnormal operations in H5 business logic and report them.Additionally,an offline packaging strategy was devised to enhance page loading speeds.Ultimately,a hybrid development system tailored for smart home appliance apps was formulated.This system utilizes H5 development for device control pages,resulting in enhanced stability and user experience.Keywords:H5 Container;Hybrid App;Smart home appliances;Appliance control;Offline package中图分类号：TP319 DOI:10.19784/ki.issn1672-0172.2023.99.099作者简介：王栋，学士学位。研究方向：计算机软件。E-mail：。436 2023中国家电科技年会论文集速度跟原生应用持平；（4）插件的稳定性可以有效保障；（5）可以提前发现用户使用中的问题并及时修复。本文首先研究原生和网页交互的方式，建立家电控制页面调用原生能力，并对交互实时性进行测试；其次介绍了原生能力插件扩展的方式和使用单元测试保障质量的设计，然后介绍如何通过离线包的方式保障页面打开速度跟原生应用持平，最后介绍了提前发现用户问题的时机和方式。1 建立原生和网页交互通道 JSBridge是iOS、Android等原生端和网页端通信的桥梁。它以JavaScript引擎或WebView容器作为媒介，向网页中注入的一段JavaScript代码以生成一个JavaScript对象挂载在window里，以实现原生端和网页端的双向通信。通过JSBridge，网页端可以调用原生端的声明注入的接口，同样原生端也可以通过JSBridge调用网页端的JavaScript接口，实现彼此的双向调用，如图1所示。图1 网页和原生交互示意为了方便理解，本文将原生-网页的通信称为“上行通信”，将网页-原生的通信称为“下行通信”。1.1 JSBridge 的能力JSBridge需要实现一个JS调用原生的方法，供设备H5页面调用；同时实现一个原生调用JS的方法，以回传数据给JS。设备页面通过JSBridge调用原生插件能力时，会同时传入一个的数据接收器。JSBridge对本次调用生成一个唯一的标识id，建立起这个id和这个数据接收器的关联，并伴随插件请求把这个id传送给原生端。原生插件获取到设备需要的数据后，需要回传给JS，这时候要把标识id同步传递给JSBridge。JSBridge收到id后，找到与之关联的设备页面的数据接收器，把数据交给它，完成本次通信。除此之外，设备状态变化后，例如使用遥控器控制了设备，原生端需要主动把当前设备状态告知设备页面以刷新状态。因此，JSBridge还需要实现一个让原生端可以主动通知设备页面的方法。1.2 上行通信实现方案JavaScript作为解释性语言，最大的一个特性就是可以随时随地通过解释器执行一段JS代码通过将拼接的JavaScript代码字符串，传入JS解析器执行。JS解析器在这里就是WebView。原生端调用网页端其主要有两种实现方式：loadUrl()、evaluateJavascript()；但由于loadUrl()的方式执行效率低，因此选取了evaluateJavascript的方式来调用JsBridge中的JavaScript接口，通过JsBridge的消息转发进而实现和网页进行通信的目的。1.3 下行通信实现方案基于iOS、Android双端技术方案一致性的考虑，网页端调用原生端也主要有两种实现方式：（1）拦截WebView请求的URL SchemeURL Scheme是类URL的一种请求格式，格式如：:/?#fragment，可以自定义JSBridge通信的URL Scheme，比如：jsbridge:/showToast?text=hello。原生加载WebView之后，网页发送的所有请求都会经过WebView组件，所以原生可以重写WebView里的方法，拦截网页发起的页面跳转请求，对请求的格式进行判断：如果符合自定义的URL Scheme，对URL进行解析，拿到相关操作信息（如操作意图、参数等），进而调用原生的方法；如果不符合自定义的URL Scheme规则，则忽略该URL，交由WebView继续加载。这种方式从早期就存在，兼容性很好，但是由于是基于URL的方式，长度和数据格式受到限制，可读性差，而且建立请求的时间消耗较长。（2）向WebView中注入JavaScript API通过WebView提供的接口，App将原生端的相关接口注入到JavaScript的window的对象中，一般来说这个对象内的方法名与原生端相关方法名是相同的，网页端就可以直接在全局window下使用这个暴露的全局JavaScript对象，进而调用原生端的方法。这个过程会更加简单直观，大多数情况下都会使用这种方式，Android（4.2+）提供了addJavascriptInterface注入JavaScript API。iOS的WKWebView提供了WKScriptMessageHandler响应JS调用原生。综合考虑两种方案的优缺点，采用方式（2）来实现下行通信的功能实现是更好的方式。1.4 数据通信协议约束JS调用原生方法，参数须是原生端的内置类型：int、String等，若是JavaScript对象，需字符串化，否则原生端无法正确接收。原生调用JS方法，参数须是JavaScript内置类型：int、String等，JS能够正确接收。若是原生自定义类型，则JS无法正确接收。4372023中国家电科技年会论文集鉴于以上限制，所以约定JSBridge和原生方法互调时，传递的参数须是Json格式的String字符串，双方在收到参数后再以各自语言的Json工具类进行相互转化。1.5 JSBridge 数据到达率测试智能家电App对交互的可靠性要求很高。因此交互通道创建完后，需要针对可靠性进行测试，如果大量消息交互的情况下出现消息丢失或者响应时间过长的情况，则需要增加缓存机制解决消息堆积的问题。测试结果如表1所示，连续10000次交互情况下到达率都是100%，不会有丢包情况；单次交互耗时1 ms以内，在接受范围内。所以可以确定不需要增加缓存机制，就能满足业务使用的需要。表1 交互到达率和耗时测试测试维度测试维度说明iOSAndroid到达率耗时（ms）到达率耗时（ms）网页-原生网页调同一个原生接口10000次，原生接收到所有调用的总耗时100%2495.67100%7845.78原生-网页（Event）原生向网页发送同一事件10000次，网页收到所有事件的总耗时100%1543.56100%2114.002 支持原生能力插件扩展JS和原生已经可以通信，这时就可以进行插件框架的设计了。为了保障每个插件的独立性，插件层分为了调度层和实现层两部分。实现层实现了各种系统原生插件，例如蓝牙、定位、设备控制等。调度层接收设备页面的插件调用请求，确定业务要使用什么能力，然后分发给实现层中特定的插件去处理，最后返回结果给业务使用。实现层的每个插件都是独立的，各个插件之间没有互相依赖和影响，并且App可以根据业务需求，选择使用哪些插件。在这个基础上，通过在插件层进行单元测试，保障插件的质量，提升插件稳定性。智能家电App因为涉及到跟设备的交互，因此对可靠性的要求非常高。对于家电H5页面，出现问题后可以通过热更新解决；但是对于底层插件能力，不能动态修复问题，必须依赖发版。因此，保障插件的稳定性非常重要。而单元测试，是保障插件稳定性的非常有效的手段。一个单元测试是一段自动化的代码，这段代码调用被测试的工作单元，之后对这个单元的单个最终结果的某些假设进行校验。只要产品代码不发生变化，单元测试的结果是稳定的4。移动双端采用相同框架，基于Cucumber和Mock5框架实现Feature文件中用例场景的自动化测试。Cucumber的文件又称为剧本文件，所有的剧本文件都有“.feature”文件扩展名。它们包含被测系统的单个功能定义，并且是一个可执行的测试脚本。文件中的指令是任何非空和非注释行，每个Cucumber剧本文件中描述一个功能（Feature），它细分为场景（Scenario），场景中包含多个顺序执行的步骤（Step），即步骤序列。根据步骤定义，编写相应的测试代码来执行测试。测试代码模拟用户的操作和预期结果，通过断言来验证实际结果与预期结果是否一致。使用Mock框架来实现对于解除外部真实依赖或者数据隔离，比如在单元测试中，并不会依赖真实的家电设备，所以通过Mock5家电设备，来达到预期结果。如图2所示。图2 单元测试用例举例使用Cucumber的运行器来执行测试，运行器会读取特性文件和步骤定义，并执行相应的测试代码。测试结果将会显示在控制台或报告中，以便开发者查看测试的通过情况和失败详情。根据测试结果进行分析和调试，如果有测试失败，可以通过查看失败的场景和错误信息来定位问题，并进行修复。同时，还可以根据测试结果来评估代码的质量和覆盖率，以便进行进一步的优化和改进。每次功能迭代，都需确保迭代功能被覆盖，每次提交代码，CI会对比上次的覆盖率和本次覆盖率，当本次覆盖率低于上次覆盖率时，CI编译不通过，需要分析覆盖率降低的原因，必要时刻需补充Feature。单元测试的覆盖率来衡量单元测试对功能代码的测试情况。覆盖率越高，发现缺陷的可能性越大4。通过统计单元测试中对功能代码中行、分支、类等模拟场景数量，来量化说明测试的充分度。覆盖率的前提是存在单元测试，并且从其本意上推导，可被统计覆盖率的单元测试应当证明了程序是正确的，这是一个不能动摇的基础，否则一切就失去意义。3 使用H5离线包H5页面加载慢，最重要的原因就是每次打开都需要向服务器发送HTTP请求，请求到服务器上的H5页面文件后，才能进行解析438 2023中国家电科技年会论文集和渲染。这个过程消耗的时间较长，尤其是在H5页面文件较大或者网络较差的情况下。对于智能家电App，每个设备控制页面都是一个H5页面。如果每次使用都要用户从远端下载，加载时长和流量消耗都会极大降低用户体验。因此，必须使用H5离线包的方式。H5离线包是指将H5页面和相关资源打包成一个压缩文件，用户下载安装后可以离线使用，而不依赖于网络连接。具体流程如图3所示。图3 离线包加载流程图用户打开设备页时，根据设备类型查找本地是否存在对应的离线包。如果有，直接打离线包，并检查更新最新离线包。如果没有，则先下载最新离线包，下载完成后再打开。通过这种方式，设备页面的打开速度基本跟原生页面持平，极大提高了用户体验。4 自动异常检测和上报基于移动端H5容器的混合应用，因为系统比较复杂，业务路径较长，所以出现问题的几率比原生App也要高一些。为了监控线上运行情况、提前发现用户问题，设计一套异常上报系统，对应用运行中的一些异常情况进行捕获、记录和上报，是非常有必要的。4.1 异常上报的场景（时机）根据WebView能力和智能家电App的特点，主要采集以下异常：（1）WebView加载失败（LoadingFailure）：当WebView初始请求失败或者网页加载失败时触发。（2）加载超时（LoadingTimeout）：加载时长超过设定时间（60秒）未加载成功时触发。（3）页面白屏检测（BlankScreen）：WebView请求加载完成后，计算当前屏幕白色像素点的占比是否大于阈值（如99%），若大于则认定为白屏。（4）JS与原生交互异常（MessagingException）：在JSBridge和原生交互的双向路径上，逻辑落入了一些异常分支时触发，例如插件方法未实现、JSON序列化失败、没有找到数据接收器等。（5）长时加载未完成用户退出容器（WaitedTooLong）：在退出容器时，如果距进入容器超过30秒，但初始加载还未完成时触发。（6）在处理JS接口调用过程中，原生插件产生了运行时异常（原生Exception）。采集到异常后，把异常数据上报到服务器，通过分析异常数据，可以提前发现用户使用家电过程中的问题。在异常上报的同时，获取一些运行信息一起上报，可以更加快速地分析问题原因。4.2 异常上报的运行信息每条异常上报的运行信息，都包含一些基础信息，以及针对不同的异常类型的特有信息。这些信息结构化为一条Json字串并上报到服务器。基础采集信息包括：网络类型、页面URL、User Agent、JSBridge版本等。5 结束语本文通过基于H5容器的智能家电App的研究和实践，在智能家电App里使用了H5技术开发设备控制页面，在交付效率、用户体验、可靠性等方面取得了很大的提升。首先获得了跨端、动态更新等优势，极大提升了交付效率和响应速度；同时通过插件系统和离线包的方式，达到了原生应用的用户体验；又使用了单元测试、异常上报技术，保障了家电控制的安全可靠。未来，随着移动技术的不断进步和用户对智能家电的需求提升，智能家电App开发方式将继续发展和演进。参考文献1 路瀚程,霍小卫.基于CORDOVA的跨端混合式移动应用的研究与应用J.电子元器件与信息技术,2022(08):90-93.2 叶帆帆,徐城璋,王利兴,等.基于APICloud的家居设计APP的研究与实现J.计算机时代,2016(05):64-66.3 李红伟,焦利敏,郑杰昌,等.智能家电远程操控及语音交互安全性研究J.家电科技,2020(zk):35-39.4 Roy Osherove.单元测试的艺术M.北京:人民邮电出版社,2014.5 胡小伟,曹宗生.基于mock模拟方法的核安全级软件单元测试技术研究及应用J.自动化博览,2018(12):82-85.