How to upgrade an H5 hybrid app

How to upgrade an H5 hybrid app

After our app development is complete, we will inevitably upgrade the product later. Therefore, we hope to allow the app to be automatically upgraded on the customer's mobile phone, which can be divided into automatic upgrade and manual upgrade.

Automatic Upgrade: Generally, when the customer's app opens the homepage for the first time.

Manual upgrade: an upgrade entry is provided on the app interface.

The interface effect is shown as follows:

The code is actually very simple, but it should be processed separately for ios and android. The basic idea is to obtain the app version number of the Local Machine and compare it with the app version number on the server. If the app version number is smaller than the app version number on the server, the update operation is performed.

Var btn = ["Confirm upgrade", "cancel"]; // obtain app system updates [Do You Want To manually click to obtain updates] function appUpdate (ismanual) {console. log ('appupdate'); mui. plusReady (function () {plus. runtime. getProperty (plus. runtime. appid, function (inf) {ver = inf. version; console. log ('ver: '+ ver); var url = config. getAppVersion; var client; var ua = navigator. userAgent. toLowerCase (); if (/iphone | ipad | ipod /. test (ua) {// iPhone mui. ajax ({type: "get", dataType: 'json', url :" https://itunes.apple.com/lookup?id=1318127518 ", // Obtain the currently available APPStore version information data: {id: 131812 xxxx // unique app id}, contentType: 'application/x-www-form-urlencoded; charset = UTF-8 ', success: function (data) {console. log ('data: '+ JSON. stringify (data); var resultCount = data. resultCount; for (var I = 0; I <resultCount; I ++) {var normItem = data. results [I]. version; console. log ('normitem: '+ normItem) if (normItem> ver) {var _ msg = "new version found: V" + normItem; // plus. nativeUI. alert ("new version found: V" + normItem); mui. confirm (_ msg, 'upgrade confirmed', btn, function (e) {if (e. index = 0) {// execute the document update operation. location. href =' https://itunes.apple.com/cn/app/san-gu-hui/id131812xxxx?mt=8 '; // New APPStore}); return;} if (ismanual) {mui. toast ('current version is latest ');} return ;}});} else if (/android /. test (ua) {mui. ajax (url, {data: {apkVersion: ver,}, dataType: 'json', type: 'get', timeout: 10000, success: function (data) {// console. log ('data: '+ JSON. stringify (data) if (data. statusCode = 200 & data. data> ver) {// mui. toast ("new version found: V" + data. data); // obtain the new andriod version var _ msg =" New Version: V "+ data. data; mui. confirm (_ msg, 'upgrade confirmed', btn, function (e) {if (e. index = 0) {// execute the upgrade operation plus. nativeUI. toast ("Preparing the environment. Please wait! "); Var dtask = plus.downloader.createDownload(config.apk Url, {}, function (d, status) {if (status = 200) {var path = d. filename; // download apk plus. runtime. install (path); // automatically install the apk file} else {plus. nativeUI. alert ('version update failed: '+ status) ;}}); dtask. start () ;}}) ;}else {console. log ('current version number is up-to-date '); if (ismanual) {mui. toast ('current version is latest ');} return ;}}, error: function (xhr, type, errerThrown) {if (ismanual) {mui. toast ('network exception, please try again later ');}}});}});});}

Our ios apps are published in the Apple App Store, while android apps are directly deployed on our own servers (such as IIS servers), because there are too many android app markets, in this case, every upgrade is a very troublesome task. When you release a version, you have to submit the update in all the android app markets.

Note that different parameters need to be input when this method is called by means of manual update and automatic update. If the system detects that the current version is the latest, it will not be displayed on the client, but if the manual update is the latest version, you need to prompt the customer.

Automatic update call: appUpdate (); // detect app updates

Manual Update call: appUpdate (true); // detect app updates

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.