文档章节

基于html5plus平台 实现app增量更新功能

s
 sharmine2
发布于 2015/03/05 00:28
字数 1001
阅读 5982
收藏 25
点赞 4
评论 5

对于移动app,尤其是webapp,如何更新一直是比较重要的话题。以前的大部分app都是从应用商店进行版本更新,但是对于webapp来说,使用增量更新可以节省流量;更重要的是,它免去了新版本在应用商店的审核流程,使上架时间可以更加提前了。

一、前提

  1. 环境:使用html5plus作为webview与手机平台交互的中间件;关于html5plus,请自行参考 http://www.html5plus.org/#home

  2. 需求:点击“检查更新”,app在线检查版本是否有更新,如果有,下载并更新;

  3. 更新包后缀名为.wgt,制作方式:使用zip打包所有项目根目录下的html/js/css/images/manifest.json;其中:manifest.json不能有注释,否则在ios下将会更新失败;


二、 实现:

    1.  检查更新按钮:

<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" onclick="CheckUpdate(false);">
检查更新
</a>
<button class="mui-btn mui-btn-link mui-btn-block" id="Progress_Button" style="display:none;"></button>
</li>
</ul>

    2. update.js:

function CheckUpdate(auto) {
	//API的GET请求地址
	var CheckUrl = "http://app.zimayun.com/REST/CheckUpdate?appkey=" + APPKey + "&clientversion=" 
			+ plus.runtime.version;

	var RequestResponse = new Object();

	RequestResponse.Success = function(Result) {
		UnLoading();

		var ResultObject = JSON.parse(Result);
		if (ResultObject.apicode == 0) { //当api返回code为0表示成功
			if (ResultObject.needupdate) {
				//					MessageBox("需要更新", function() {
				//						MessageBox("下载包地址:" + ResultObject.url, function() {
				ConfirmBox("有新版本,是否更新?", function() {
					document.getElementById("Progress_Button").style.cssText = "display: block;";
					console.log(document.getElementById("Progress_Button").style.cssText);
					UpdateKey = ResultObject.updatekey;
//					DownLoadFile(ResultObject.url);
					DownLoadFile(serverHost + "/app/update.wgt");
				}, function() {
					return;
				});
				//						});
				//					});
			} else {
				if (!auto) {
					MessageBox("不需要更新", function() {});
				}

			}
		} else {
			if (!auto) {
				ShowError();
			}
		}
	}

	RequestResponse.Error = function(Result) {
		UnLoading();
		ShowError();
	}

	console.log(CheckUrl);
	//发送请求
	SendData(CheckUrl, RequestResponse); //发送POST
}

//完成更新
function FinishUpdate() {

	//API的GET请求地址
	var UpdateUrl = "http://app.zimayun.com/REST/FinishUpdate?updatekey=" + UpdateKey;
	UpdateUrl = UpdateUrl + "&model=" + encodeURIComponent(GetDeviceInfo().Model);
	UpdateUrl = UpdateUrl + "&vendor=" + encodeURIComponent(GetDeviceInfo().Vendor);
	UpdateUrl = UpdateUrl + "&uuid=" + encodeURIComponent(GetDeviceInfo().UUID);
	UpdateUrl = UpdateUrl + "&screen=" + encodeURIComponent(GetDeviceInfo().Screen);
	UpdateUrl = UpdateUrl + "&dpi=" + encodeURIComponent(GetDeviceInfo().DPI);
	UpdateUrl = UpdateUrl + "&networkinfo=" + encodeURIComponent(GetDeviceInfo().NetworkInfo);
	UpdateUrl = UpdateUrl + "&oslanguage=" + encodeURIComponent(GetDeviceInfo().OS.Language);
	UpdateUrl = UpdateUrl + "&osversion=" + encodeURIComponent(GetDeviceInfo().OS.Version);
	UpdateUrl = UpdateUrl + "&osname=" + encodeURIComponent(GetDeviceInfo().OS.Name);
	UpdateUrl = UpdateUrl + "&osvendor=" + encodeURIComponent(GetDeviceInfo().OS.Vendor);

	var RequestResponse = new Object();

	RequestResponse.Success = function(Result) {
		var ResultObject = JSON.parse(Result);
		if (ResultObject.apicode == 0) { //当api返回code为0表示成功
		} else {
			//ShowError();
		}
	}

	RequestResponse.Error = function(Result) {}

	//发送请求
	SendData(UpdateUrl, RequestResponse); //发送POST
}

//下载
function DownLoadFile(url) {
	var d = plus.downloader.createDownload(url, {}, function(f, s) {
		document.getElementById("Progress_Button").style.cssText = "display: none;";
		ConfirmBox("下载完成,是否立即更新", function() {
//			console.log(f.filename)
			/*
			 * unzip the folder..
			 */
//			plus.zip.decompress( f.filename, "_doc/", function(){alert("decompress success!")}, function(err){
//				alert(JSON.stringify(err));
//			});
			plus.runtime.install(f.filename, {force:true}, function() {
				//完成更新向服务器进行通知
				alert("更新完毕,将重启应用!");
				FinishUpdate();
				plus.runtime.restart();
			},function(err){
				alert(JSON.stringify(err));
				mui.toast("安装升级失败");
			});
		}, function() {
			return;
		});
	}, function() {
		MessageBox("下载失败", function() {});
	});

	d.addEventListener('statechanged', function(download, status) {

//		console.log(JSON.stringify(download));
		if (download.state == 3 && status == 200) {
			var percent = Math.round((download.downloadedSize / download.totalSize) * 100);
			document.getElementById("Progress_Button").innerHTML = (percent + "%");
		} else if (download.state == 4) {}
	}, false);
	d.start();
}


//确认消息
function ConfirmBox(MSG, OKFN, CancelFN) {
	plus.nativeUI.confirm(MSG, function(e) {
		if (e.index == 0) {
			OKFN();
		} else {
			CancelFN();
		}
	}, "提示", ["确定", "取消"]);
}
//发送数据
function SendData(URL, ResponseObject) {
	var MyXMLHttpRequest = new plus.net.XMLHttpRequest();
	MyXMLHttpRequest.onreadystatechange = function() {
		switch (MyXMLHttpRequest.readyState) {
			case 0:
				break;
			case 1:
				break;
			case 2:
				break;
			case 3:
				break;
			case 4:
				if (MyXMLHttpRequest.status == 200) {
					ResponseObject.Success(MyXMLHttpRequest.responseText);
				} else {
					plus.nativeUI.toast("检查更新出错");
				}
				break;
		}
	}

	MyXMLHttpRequest.open("GET", URL);
	MyXMLHttpRequest.send();
}

//获得系统信息
function GetDeviceInfo() {
	var device = {
		IMEI: plus.device.imei,
		IMSI: "",
		Model: plus.device.model,
		Vendor: plus.device.vendor,
		UUID: plus.device.uuid,
		Screen: plus.screen.resolutionWidth * plus.screen.scale + " x " + plus.screen.resolutionHeight * plus.screen.scale + "",
		DPI: plus.screen.dpiX + " x " + plus.screen.dpiY,
		OS: new Object()
	};
	for (var i = 0; i < plus.device.imsi.length; i++) {
		device.IMSI += plus.device.imsi[i];
	}
	var types = {};
	types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
	types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
	types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
	types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
	types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
	types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
	types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
	device.NetworkInfo = types[plus.networkinfo.getCurrentType()];
	device.OS = {
		Language: plus.os.language,
		Version: plus.os.version,
		Name: plus.os.name,
		Vendor: plus.os.vendor
	};
	return device;
}

其中,

plus.runtime.install(f.filename, {force:true}, function() {

这一行,{force:true} 这个参数必不可少。这是由于在安卓下目前还有一些bug,必须要加上。

实现效果:当用户点击检查更新,先检查是否更新;如果需要更新,则下载zip格式的.wgt文件,调用plus.runtime.install进行安装,安装成功后弹出成功,然后自动重启应用。


© 著作权归作者所有

共有 人打赏支持
s
粉丝 0
博文 2
码字总数 1028
作品 0
闸北
加载中

评论(5)

大师兄前端的大师兄
大师兄前端的大师兄
这个jquery的怎么写呢?原生的ajax看的费劲呢
s
sharmine2

引用来自“屈超”的评论

同求案例,现在一抹黑...完全不知道怎么下手...前几天尝试了下mui结果各种问题- -还找不到解决方案...就放弃了1
为何要放弃?我最近一年一直在关注webapp的中间件,目前看来最好用的就是html5plus了。所以选择这个了
s
sharmine2

引用来自“心有灵犀”的评论

哈哈,LZ也在用html5plus啊,有没有具体的app小例子,分享一下,让小弟也学习一下?
目前可发布的版本还没有,正在开发中;其实学习的话,官方的demo完全够用了。
屈超
屈超
同求案例,现在一抹黑...完全不知道怎么下手...前几天尝试了下mui结果各种问题- -还找不到解决方案...就放弃了1
心有灵犀
心有灵犀
哈哈,LZ也在用html5plus啊,有没有具体的app小例子,分享一下,让小弟也学习一下?
移动开发1 HTML5移动开发介绍

Native APP:是一种基于智能手机本地操作系统如 ios 、Android 、WB Web APP :使用面向web的开发技术(html5+css3+javascript)完成手机APP的制作 web APP核心思想 :打包(第三方平台,将HTM...

奋斗的小芋头 ⋅ 2016/11/22 ⋅ 0

【直播】DCloud CTO崔红保:如何玩转H5网站快速转换成App?

将H5网站转换成App,不是简单套个WebView壳完事,关键是达到原生版的功能和体验。wap2app是一款将H5网站转换成App的前端开发框架,底层基于HTML5PLUS引擎,可以调用几十万原生API,实现更强大...

51CTO编辑部 ⋅ 2017/11/03 ⋅ 0

WeX5 快速开发平台 V3.6 正式版发布

WeX5 V3.6 正式版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu ⋅ 2016/10/14 ⋅ 4

WeX5 快速开发平台V3.6预览版发布(2016-9-1)

WeX5 V3.6 预览版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu ⋅ 2016/09/04 ⋅ 10

Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用

Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用 storeinc 是一个用来实现js代码本地存储化,并可以在js版本更新的时候,对js内容做增量更新的seajs插件。对于一个js文件来说,当j...

卢勇福 ⋅ 2013/10/14 ⋅ 0

企业通讯解决方案--Dolores

Dolores Dolores试图成为一套完整的企业通信解决方案,一个完整的企业沟通工具(以下简称企业IM)至少需要支持以下几个功能:IM消息服务、组织架构管理、工作流集成 IM消息服务 实时消息这一...

环信 ⋅ 2017/06/26 ⋅ 0

动态调整的基础 —— 配置中心

不要写死,一个永恒的话题。动态化,也是一个涵盖了界面,功能,数据,配置诸多方面的一个宽泛话题。在之前的一篇《解耦神器 —— 统跳协议和Rewrite引擎》中提到了我们的配置中心。这篇文章...

李景枫 ⋅ 2016/05/09 ⋅ 0

朋友圈设计

朋友圈设计 在社交软件中,朋友圈(社交圈)的功能逐渐出现在各个项目经理的案板上,本文将从技术的角度介绍,如何实现一个类似微信的朋友圈功能。 朋友圈的功能点 首先看看,朋友圈要实现的...

精通吹水 ⋅ 2016/02/21 ⋅ 1

FaceBook APP构建工具--xcbuild

Facebook 出品的开源 App 构建工具,一款能够为 App 构建过程与多平台运行提供更快构建、更好文档并兼容 Xcode 的构建工具,超快的增量构建和构建频率;支持构建 Xcode 项目和 workspace;支...

匿名 ⋅ 2016/03/08 ⋅ 0

如何通过热修复,搞定开发中的那些 Bug?

作为程序员,Bug 修复终究是绕不开的话题,本期移动开发精英俱乐部讨论的主题便是 Bug 修复中的 Hotfix,即热修复。接下来让我们跟随大牛的脚步来了解 Hotfix,就算你不能一下豁然开朗,相信...

OneAPM蓝海讯通 ⋅ 2016/03/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 18分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部