一篇文章读懂开源web引擎Crosswalk
http://dev.yesky.com/24/39285024.shtml
Web技术的优势早已被广大应用开发者熟知,比如可与云服务轻松集成,基于响应式UI设计的精美布局,高度的开放性,跨平台能力, 高效的分发与部署等等。伴随着移动互联网的快速发展与HTML5技术的逐步成熟,Web应用已经成为移动端跨平台应用开发的热门解决方案。然而要在移动端充分利用Web技术的优势,仍然有许多障碍。
Crosswalk作为一款开源的web引擎,正是为了跨越这些障碍而生。目前Crosswalk正式支持的移动操作系统包括Android和Tizen,在Android 4.0及以上的系统中使用Crosswalk的Web应用程序在HTML5方面可以有一致的体验,同时和系统的整合交互方面(比如启动画面、权限管理、应用切换、社交分享等等)可以做到类似原生应用。现在Crosswalk已经成为众多知名HTML5平台和应用的推荐引擎,包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等,未来的Cordova 4.0也计划集成Crosswalk。同时在今年的中国iWeb大会上,Cocos2d-html5游戏引擎也宣布与Crosswalk展开合作。
Crosswalk有何优势?
Crosswalk采用Chromium内核并不断地快速演进(六周一次更新),使基于Crosswalk的Web应用充分享有Chromium的功能与性能优势,以及较好的平台一致性。同时,Crosswalk支持最新的HTML5 API,包括WebGL,WebAudio,WebRTC,Gamepad,WebSocket等等。一个展示基于Crosswalk的web应用的很好的例子是这款名为HexGL的3D游戏,我们在原有游戏(http://hexgl.bkcore.com)基础上做了一些改进(https://github.com/hmin/HexGL),如图1所示。它是一款用纯web技术开发的游戏,使用了WebGL,WebAudio,Gamepad,Presentation等HTML5 API,支持4.0之后的所有Andorid平台,并且在低端的Android设备上也能流畅运行,诸如红米手机。
图示:HexGL游戏演示
如果Crosswalk提供的API不能满足需求,还支持通过编写原生的Java代码来创建新的Web API。通过这种扩展机制用户可以轻松地获得他们所需的平台和设备能力。如果开发者不想自己动手而是利用已有的一些扩展API的实现,Crosswalk也支持与Cordova的整合,后者已有大量的成熟的API实现供开发者使用。稍后我们更会详细的解释。
Crosswalk允许Web开发者将他们的应用打包成系统的应用安装包(如:Android上的APK),获得与本地应用一致的体验。Crosswalk也支持多个应用同时使用一个Crosswalk库的共享模式,仅当应用第一次启动并且发现系统还没有相应的Crosswalk库时才提示用户下载安装。目前是大多数情况下开发者将Crosswalk直接嵌入到应用本身。在这种嵌入模式下Web应用开发者可以完全控制Crosswalk的更新。
同时,Crosswalk在不断试验各种Web前沿的功能,并积极地反馈与影响标准(W3C)的制定。更重要的是,Crosswalk确保这些被标准化的功能解决了现实的问题并帮助开发者创造更具吸引力的应用与用户体验。HexGL游戏中使用的Presentation API就是这些实验性功能的一个典范。它由英特尔向标准化组织提出,并在Crosswalk中最早实现。使用Presentation API的Web应用可以将网页内容以无线连接的方式显示在其它的屏幕上。例如,在HexGL游戏中用户可以使用一块大屏幕显示游戏的场景,并用一块小触摸屏来控制游戏。
Crosswalk与WebView的不同
WebView组件,如iOS的UIWebview、Android的Webview等,作为系统自带Web引擎,在HTML5能力上相比Safarifor iOS、Chrome for Android都要差一截。另外在Android平台上,由于系统碎片化比较严重,不同Android版本的Webview的HTML5能力也有较大差异,导致相应的HTML5应用一致性难以保证。而Crosswalk,如前文所述,作为第三方的独立引擎有较好的HTML5功能和性能支持,较好的平台一致性,以及近似原生应用的系统整合体验。当然这样导致的缺点则是开发者需要将Crosswalk与应用程序一起打包,生成的应用大小会更大。因此Crosswalk提供了共享模式来减少应用的大小。同时Crosswalk一直在模块化与定制化方面不断努力,尽量缩减应用的大小。
有人可能会问,Android WebView自Android 4.4起已经采用了Chromium内核,这与 Crosswalk有和不同?基于Chromium内核的WebView(Chrome WebView)和Crosswalk比起来目前存在两大缺陷:一是不被4.4之前的Android支持;二是性能以及功能与Crosswalk还有较大差别。主要的原因是Chrome WebView要向前兼容基于Android 4.4之前的WebView的应用。这意味着Chrome WebView要支持许多旧的功能,所以架构设计更为复杂, 从而导致部分功能还没有完善,同时在某些情况下会降低性能。目前Chrome WebView的Canvas的性能所受影响最大,WebGL的性能与Crosswalk比也有所差距。由于Crosswalk不需要保持这种兼容性,它可以采用与Chrome浏览器非常相近的设计, 事实上Crosswalk正是构建于Chromium的content模块之上,这使得它速度飞快并易于扩展与维护。同时还有相应的增强 ,比如Web应用不需要采用多进程架构, 这样运行时内存可以更加节省,等等。
Crosswalk与Cordova
Cordova(PhoneGap),作为第三方的HTML5应用开发框架工具的代表,极大促进了HTML5应用的发展。它提供了方便的跨平台应用打包/发布服务、实用的API、灵活的扩展机制、以及积累下来的丰富的第三方API实现。然而Cordova使用的web引擎是系统的WebView。如果开发者正在使用Cordova并且渴望更好的性能和更新的功能,如WebGL,那么Crosswalk是一个很好的选择。Crosswalk支持开发者在Cordova中用Crosswalk替换原生的Android WebView,并将两者完美的融合。当然,它仍然支持Crodova的扩展机制,不过如果web应用对扩展的性能要求较高, 采用Crosswalk自带的扩展机制是更好的选择。
目前Crosswalk采用提供定制过的Cordova开发包来支持Cordova中Crosswalk引擎的使用。不过Crodova项目本身也在改进架构以便引入诸如Crosswalk一样的第三方的web引擎,到那时开发者就可以更加灵活自如地在Cordova使用Crosswalk了。
打包基于Crosswalk的web应用
目前Crosswalk支持ARM与X86两种架构,用户在打包时可以自由地选择支持其中一种或全部架构。同时Crosswalk支持多种方式打包基于Crosswalk的应用。一种方式是Crosswalk的自带打包工具链,在这种方式下用户只需为web应用额外写个配置文件并运行一条打包命令即可完成打包。另外一种方式是使用Intel XDK,Crosswalk已经是XDK支持的web引擎之一,在用XDK打包的时候只需选择用Crosswalk打包即可。还有一种方式是我们前文所说的Cordova,开发者无论使用Cordova的CLI(Command Line Interface),还是ADT(Android Development Tool),都可以打包基于Crosswalk的web应用。
Crosswalk也提供一种嵌入模式。在这种模式下Crosswalk支持一组类似于WebView的API,称之为XWalkView。通过嵌入XWalkView开发者可以在原生的Android应用中访问网页或运行web应用,如同使用WebView一样。当你的应用中有大量的java代码,但又想用web技术来写UI,这时我们推荐你使用Crosswalk的嵌入模式。在这种嵌入模式下,用户开发的是一种混合型的应用,打包方式上与系统原生的应用没有差别。
总结
Crosswalk发布至今只有不到一年的时间,但是Crosswalk作为一款基于Chromium内核的web引擎,以其在移动平台上的功能、性能、系统整合体验、API扩展以及支持Cordova等优势。截止至2014年8月份仅在Google Play上已发现的基于Crosswalk的web应用数量已有380多款,其中百万级下载量的应用有2款。因为统计范围有限,我们相信Crosswalk实际使用量不仅于此,更重要的是Crosswalk的使用量仍在持续增长。在Crosswalk的邮件列表以及各类技术网站论坛中,如StackOverFlow,Construct2等等,几乎每天都开发者提出各种问题或给予我们反馈。这些让我们更加相信我们我们走在正确的道路上,今后Crosswalk仍将不断地创新与演进,推动移动端的web应用的发展!
作者介绍:,WebKit项目Committer, Chromium项目Committer,2011加入英特尔亚太研发有限公司,任开源技术中心的软件工程师,参与过多个浏览器与Web引擎项目。目前主要致力于移动端开源Web引擎Crosswalk在Android平台上的研发。
http://blog.csdn.net/sslinp/article/details/51607237
最近的项目中,有用到phonegap,并需要展示一些需要高效渲染的网页,同情况下,IOS跑起来轻松无比,但是Webview。。。。(泪奔),在焦头烂额的机型及版本适配中,发现了Crosswalk项目。
一、 在使用 Crosswalk框架之前,我们必须得了解 Crosswalk
- Crosswalk是一款开源的Web引擎,其基于 Chromium/Blink 的应用运行环境,对于混合开发的轻量级应用尤为受欢迎。
- crosswalk官网 https://crosswalk-project.org/index_zh.html,很贴心的中文选项
同时在使用前的声明,如果你不能承受APK激增 20M~ OR 40M~ 体积的话,你懂得。当然如果大家有好的APK瘦身方法,希望能得到指点。
最近搞项目有尝试过许多框架,这里Tencent X5也非常棒,至于ChromiumView貌似不再维护了
二、开始应用到项目
题主先阶段给出为嵌入模式Xwalkview api使用介绍,crosswalk有支持phonegap的插件替换其中SystemWebview,以获取更强大功能,这个后续有时间会再次分享
首先在greadle 中声明 maven仓库,并添加库的依赖
repositories {maven {url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'} }compile 'org.xwalk:xwalk_core_library:18.48.477.13'
接下来使用的XwalkView我们有几点注意的地方
1. 要求最低版本 minSdkVersion 14 2. 硬件加速:android:hardwareAccelerated="true" 3. 权限要求:<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 4.<org.xwalk.core.XWalkView android:id="@+id/xw"xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"> </org.xwalk.core.XWalkView>
三、API使用
XWalkPreferences配置 api文档
//添加对javascript支持 XWalkPreferences.setValue("enable-javascript", true); //开启调式,支持谷歌浏览器调式 XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true); //置是否允许通过file url加载的Javascript可以访问其他的源,包括其他的文件和http,https等其他的源 XWalkPreferences.setValue(XWalkPreferences.ALLOW_UNIVERSAL_ACCESS_FROM_FILE, true); //JAVASCRIPT_CAN_OPEN_WINDOW XWalkPreferences.setValue(XWalkPreferences.JAVASCRIPT_CAN_OPEN_WINDOW, true); // enable multiple windows. XWalkPreferences.setValue(XWalkPreferences.SUPPORT_MULTIPLE_WINDOWS, true);
一些基本的api和webview类似
//设置滑动样式。。。 Xwalkview mXwview.setHorizontalScrollBarEnabled(false); mXwview.setVerticalScrollBarEnabled(false); mXwview.setScrollBarStyle(XWalkView.SCROLLBARS_OUTSIDE_INSET); mXwview.setScrollbarFadingEnabled(true); //获取setting mMSettings = mXwview.getSettings(); //支持空间导航 mMSettings.setSupportSpatialNavigation(true); mMSettings.setBuiltInZoomControls(true); mMSettings.setSupportZoom(true);
加载
mXwview.load(url, null); mXwview.setDrawingCacheEnabled(false);//不使用缓存 mXwview.getNavigationHistory().clear();//清除历史记录 mXwview.clearCache(true);//清楚包括磁盘缓存
XWalkView没了webview的setwebviewclient api 增加了setUIClient 和setResourceClient
顾名思义,UI变化及资源加载- 我们可以在XWalkUIClient中覆盖方法onPageLoadStarted及onPageLoadStopped处理页面开始加载及加载完毕
同时在页面缩放onScaleChanged或调用JsAlert中进行相应操作
mXwview.setUIClient(new XWalkUIClient(mXwview) {@Overridepublic void onPageLoadStarted(XWalkView view, String url) {super.onPageLoadStarted(view, url);}@Overridepublic boolean onJsAlert(XWalkView view, String url, String message, XWalkJavascriptResult result) {return super.onJsAlert(view, url, message, result);}@Overridepublic void onScaleChanged(XWalkView view, float oldScale, float newScale) {if (view != null) {view.invalidate();}super.onScaleChanged(view, oldScale, newScale);}@Overridepublic void onPageLoadStopped(XWalkView view, String url, LoadStatus status) {super.onPageLoadStopped(view, url, status);}});
在XWalkResourceClient中同样有我们熟悉的onReceivedLoadError()错误回调及shouldOverrideUrlLoading()方法,同时相比webview增加的有shouldInterceptLoadRequest,可以对url进行监听及拦截操作
mXwview.setResourceClient(new XWalkResourceClient(mXwview) {@Overridepublic void onReceivedLoadError(XWalkView view, int errorCode, String description, String failingUrl) {super.onReceivedLoadError(view, errorCode, description, failingUrl);}@Overridepublic WebResourceResponse shouldInterceptLoadRequest(XWalkView view, String url) {LogUtils.d("http", "shouldOverrideUrlLoading-url=" + url);return super.shouldInterceptLoadRequest(view, url);}@Overridepublic boolean shouldOverrideUrlLoading(XWalkView view, String url) {if(!url.contains("&platform=android-app")){url= url + "&platform=android-app";}obtainUploadUrl = url;return super.shouldOverrideUrlLoading(view, url);} });
监听back按钮点击事件
//改写物理按键——返回的逻辑 @Override public boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK) {if (mXwview.getNavigationHistory().canGoBack()) {mXwview.getNavigationHistory().navigate(XWalkNavigationHistory.Direction.BACKWARD, 1);//返回上一页面} else {/*finish();*/}return true;}return super.onKeyDown(keyCode, event); }
同时不忘XWalkView令人心动的一点,与Activity生命周期的绑定,对资源的更好回收和处理
@Overrideprotected void onDestroy() {// TODO Auto-generated method stubsuper.onDestroy();if (mXwview != null) {mXwview.onDestroy();}android.os.Process.killProcess(android.os.Process.myPid());}@Overrideprotected void onPause() {super.onPause();if (mXwview != null) {mXwview.pauseTimers();mXwview.onHide();}}@Overrideprotected void onResume() {super.onResume();if (mXwview != null) {mXwview.resumeTimers();mXwview.onShow();}}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {if (mXwalkView != null) {mXwalkView.onActivityResult(requestCode, resultCode, data);}}@Overrideprotected void onNewIntent(Intent intent) {if (mXwalkView != null) {mXwalkView.onNewIntent(intent);}}
js调Java
public class JsInterface {public JsInterface() {}@JavascriptInterfacepublic String sayHello() {return "Hello World!";} }
cookies使用
XWalkCookieManager xm = new XWalkCookieManager();xm.setAcceptCookie(true);xm.setCookie(url, cookie);
四、好的,做好这一步,让我们来混淆打包吧
混淆:
-keep class org.xwalk.core.** { *;}
-keep class org.chromium.** { *;}
-keepattributes **
以上是其官网提高,但打包时仍存在问题,添加下方后解决
-keep class junit.framework.**{*;}
哟哟哟,切克闹
- 接下来会发现,apk大了40M~有木有,让我们打开apk
- Arm和X86多出来的两天.so动态库,每个大概占了20m大小,这边官方推荐的是分别打包上传到谷歌市场,不同用户手机处理器下载不同版本,但是这边项目非上线版的,故而没有去选择
当然,还有官网共享模式可以选择
分别打包时,在gradle中声明即可
productFlavors {armv7 {ndk {abiFilters "armeabi-v7a"}}x86 {ndk {abiFilters "x86"}}}依赖中添加(可去官网下载不同版本库导入即可)X86Compile project ''Armv7Compile project ''
一篇文章读懂开源web引擎Crosswalk相关推荐
- android crosswalk闪退,一篇文章读懂开源内嵌浏览器Crosswalk【转载】
本帖最后由 ecoolper 于 2014-12-24 17:55 编辑 Web技术的优势早已被广大 Crosswalk作为一款开源的web引擎,正是为了跨越这些障碍而生.目前Crosswalk正式支 ...
- 一篇文章读懂MySQL的各种联合查询
一篇文章读懂MySQL的各种联合查询 联合查询是指将两个或两个以上的表的数据根据一定的条件合并在一起! 联合查询主要有以下几种方式: 全连接:将一张表的数据与另外一张表的数据彼此交叉联合查询出来 举例 ...
- 一篇文章读懂“天猫无货源店群”,这是一个怎么样的项目?
这是个什么样的项目?(有经验的人可以自动跳过) 天猫店群,一种通过盗取他人天猫店铺内的产品,来进行盈利的电商操作模式,因为不需要我们自己有货,所以被也被称为无货源模式.在天猫上操作就叫天猫无货源店群, ...
- java多线程 模型_一篇文章读懂Java多线程模型
要真正了解Java的多线程,我们还要从进程和线程的概念说起 进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期 ...
- 8问8答,一篇文章读懂空间音效
近日,第一届网易集团创新奖评选落下帷幕,网易智企"逼近人耳极限-音频通话"项目从众多参赛作品中脱颖而出,荣获"0-1创新奖"三等奖. 此次获奖的项目诞生于网易智 ...
- WebSocket - 一篇文章读懂websocket
一篇文章了解WebSocket WebSocket 产生背景 在我们开发过程中使用最多的就是 HTTP协议,当我们想要获取某些数据时由客户端发起请求,服务端接受请求并返回相对应的数据. 但是这种单项请 ...
- 一篇文章读懂JSON
什么是json? W3C JSON定义修改版: JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式,并不是 ...
- 一篇文章读懂Java类加载器
Java类加载器算是一个老生常谈的问题,大多Java工程师也都对其中的知识点倒背如流,最近在看源码的时候发现有一些细节的地方理解还是比较模糊,正好写一篇文章梳理一下. 关于Java类加载器的知识,网上 ...
- 阿里云周源:一篇文章读懂四代视频加密技术演进
在刚刚圆满落幕的LiveVideoStackCon峰会上,阿里云高级技术专家周源进行了<视频加密和DRM的实施实践>主题分享.周源,有十多年音视频研发经验,之前在淘宝视频负责开放平台,目前 ...
最新文章
- default activity not found怎么解决_我怎么也没想到“羽绒服”的英文是down jacket,哪里down了?...
- metrics_将指标标签与MicroProfile Metrics 2.0结合使用
- 计算机网络-基本概念(7)【网络层】-多协议标记交换MPLS
- 设计模式之_Strategy_05
- mongoose 通过账号密码连接 Error: Password contains an illegal unescaped character
- android8.0学习(1)---Android Treble 概述
- Android驱动开发第三章随想
- Mybatis Generator 自动生成数据库XML(Mybatis Generator 逆向工程)
- git 添加公钥的命令
- php centos mysql_Linux+Apache+PHP+MySQL服务器环境(CentOS篇)
- jackson用法,json转换
- HQL –Hibernate查询语言–示例教程
- 什么是接口?如何定义接口?如何实现接口?
- Windows Server2012 R2中安装SQL Server2008
- java分页计算当前页_java分页计算
- 邱关源电路课后题第二章(第五版)
- 沟通在日常管理工作中的重要性
- 解决ERROR: Cannot uninstall ‘llvmlite‘. It is a distutils installed project and thus we cannot accurat
- java excel文件损坏_SpringBoot下载Excel文件,解决文件损坏问题(示例代码)
- 本地通过配置代理访问远端服务器
热门文章
- python中如何创建一个空列表_Python创建空列表的字典2种方法详解
- JSP的基础语法和指令(源码刨析,建议收藏)
- android color列表,Android应用资源---状态颜色列表(Color State List)
- error40无法打开到sql_技术分享|初识SQL优化之执行计划查看分析
- createprocess 系统找不到指定的文件_告别文件混乱和找不到,文件管理的新思路...
- Android进阶:框架打造之IOC框架
- Git学习笔记:常用命令总结
- Object.preventExtensions()使用技巧
- 【Nodejs六】关于mongodb那些事
- 使用Chrome快速实现数据的抓取(三)——JQuery