How to invoke app in html5

It is common for h5 to evoke this need in apps. In an era where mobile is king, h5 plays an important role in app traffic diversion.

The evocation method we currently use is url scheme (supported by both iOS and Android platforms). You only need to register the scheme during native APP development, and then when the user clicks on such a link, they will automatically jump to the APP.

iframe

 var last = Date.now(), doc = window.document, ifr = doc.createElement('iframe');//Create a hidden iframe ifr.src = nativeUrl;ifr.style.cssText = 'display:none;border :0;width:0;height:0;';doc.body.appendChild(ifr);setTimeout(function() { doc.body.removeChild(ifr); //setTimeout less than 2000 is generally a call failure if (Date.now() - last < 2000) { if (typeof onFail == 'function') { onFail(); } else { //Pop-up prompts or download processing, etc.} } else { if (typeof onSuccess == 'function') { onSuccess(); } }}, 1000);

The evocation principle of the iframe solution is: when the program switches to the background, the timer will be delayed (another situation where the timer is inaccurate). If the app is awakened, the webpage will inevitably enter the background. If the user switches back from the app, the time will generally exceed 2s; if the app is not awakened, the webpage will not enter the background. setTimeout is basically triggered on time, and the time will not exceed 2s. .

window.location.href jumps directly

 window.location.href = nativeUrl;

a tag evokes

 <a href=nativeUrl>Revoke app</a>

Browser testing of three evocation scenarios

1. X means the arousal failed, √ means the arousal was successful.
2. The red mark indicates that it will be evoked directly after entering the page, and the green mark indicates that it will be evoked after manual event operation.
3. ios test machine: iphone 6p; android test machine: Xiaomi 1s

iframe evokes app test results

window.location.href evokes app test results

a tag evokes app test results

iframe and window.location.href evoke contrast

iframe, window.location.href and a tag evoke comparison between the three

First, the models and browsers tested are limited, and the above results are for reference only.

Comparing iframe evocation and location.href, we can find:

1. For ios, location.href jump is more appropriate, because this method can successfully evoke the app in Safari. Needless to say, the importance of Safari as the default browser for iPhone, but for WeChat and QQ clients, these two methods in ios are useless==
2. For Android, when the page is directly invoked, iframe and location.href are the same, but if it is event-driven, iframe evokes better than location.href.
3. Through testing, it can be found that for many browsers, the performance of direct evocation when entering the page and event-driven evocation are different. Simply put, direct evocation fails more.

Through the above comparative analysis, it is more appropriate to use iframe for Android and window.location.href for ios.

The difference between direct evocation and event-driven evocation when entering the page

There are obvious differences between these two arousal scenarios in Android, whether it is evoked by iframe or location.href, take the chrome of Xiaomi 1s as an example:

 <a id=goApp href=javascript:void(0);>Click me to open the APP</a>

Binding events manually drive evocation:

 //Successfully evoked window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl; });};

Enter the page to directly invoke:

 //Recall failed window.onload = function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl;};

Bind event, js evoke

 //Recall failed window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl; }); $('#goApp).trigger('click');};

Originally, I thought that the method of $('#goApp).trigger('click'); was the same as manual clicking, but the actual performance is that the performance of js triggered events is as invalid as direct page jump.

From the reference blog post, we can see that the Android platform and various app manufacturers are very different. For example, Chrome no longer supports triggering scheme jumps through js (non-user clicks), setting iframe src addresses, etc. from 25 and onwards. Therefore, there is still a big difference between js triggering and direct user clicks, which may be similar to the restrictions on audio playback.

After the above testing and analysis, it has been basically determined that it is more appropriate to use window.location.href for ios and iframe for Android. When we use iframe to evoke, we usually handle the failure of evocation by downloading directly. However, there is a problem here, that is, the browser cannot detect whether the evocation is successful. That is, if I return to the browser after the evocation is successful, the browser will still pop up. The experience of downloading information is very poor. Of course, we also need to handle some success or failure callback functions. Maybe our scenario only needs to be evoked and does not require downloading after failure.

Regarding using location.href to evoke the native app on the iPhone, the method of jumping to the intermediate page may be better than the direct processing of the current page.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.