How to invoke app in html5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to invoke app in html5

小云云

May 25, 2018 pm 03:58 PM

h5 html5

h5 It is common to evoke the need of 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.

Three arousal schemes

iframe

var last = Date.now(),
    doc = window.document,
    ifr = doc.createElement(&#39;iframe&#39;);

//创建一个隐藏的iframe
ifr.src = nativeUrl;
ifr.style.cssText = &#39;display:none;border:0;width:0;height:0;&#39;;
doc.body.appendChild(ifr);

setTimeout(function() {
    doc.body.removeChild(ifr);
    //setTimeout回小于2000一般为唤起失败 
    if (Date.now() - last < 2000) {
        if (typeof onFail == &#39;function&#39;) {
            onFail();
        } else {
            //弹窗提示或下载处理等
        }
    } else {
        if (typeof onSuccess == &#39;function&#39;) {
            onSuccess();
        }
    }
}, 1000);

Copy after login

The arousal principle of the iframe scheme is: when the program switches to the background, the timer will be delayed (timing Another case of instrument inaccuracy). 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;

Copy after login

a tag recall

<a href="nativeUrl">唤起app</a>

Copy after login

Browser test of three recall schemes

X means the evocation failed, √ means the evocation was successful
The red mark indicates the evocation directly after entering the page, and the green mark indicates the evocation after manual event operation
ios Test machine: iphone 6p; android test machine: Xiaomi 1s

iframe evoke app test results

window.location.href evoke app test results

a tag evokes app test results

##iframe and window.location.href evoke comparison

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

Test result analysis

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

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

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 are useless in ios==
For Android For example, when the page is directly invoked, iframe and location.href are the same, but if it is event-driven, the performance of iframe is better than location.href.
Through testing, it can be found that for many browsers, the performance of direct evocation and event-driven evocation are different when entering the page. Simply put, direct evocation fails more often. .

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 when entering the page and event-driven evocation

There are obvious differences between these two evocation scenarios in Android, whether it is evocation through iframe or location.href, based on Xiaomi 1s Chrome is an example:

<a id="goApp" href="javascript:void(0);">点我打开APP</a>

Copy after login

Binding events to manually drive the arousal:

//成功唤起
window.onload = function () {
    $(&#39;#goApp&#39;).on("click", function () {
        window.lib.callapp("nativeUrl");//iframe
        //window.location.href = nativeUrl;
    });
};

Copy after login

Enter the page to directly arouse:

//唤起失败
window.onload = function () {
    window.lib.callapp("nativeUrl");//iframe
    //window.location.href = nativeUrl;
};

Copy after login

Bind events, js arouse

//唤起失败
window.onload = function () {
    $(&#39;#goApp&#39;).on("click", function () {
        window.lib.callapp("nativeUrl");//iframe
        //window.location.href = nativeUrl;
    });

    $(&#39;#goApp).trigger(&#39;click&#39;);
};

Copy after login

Originally, I thought that the method of $('#goApp).trigger('click'); was the same as manual click, but the actual performance is that the performance of js triggered event is as invalid as the 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 through js (non-user clicks), setting iframe src addresses, etc. to trigger the scheme from 25 and onwards. jump. Therefore, there is still a big difference between js triggering and direct user clicks, which may be similar to the restrictions on audio playback.

Finally

After the above testing and analysis, it is basically determined that it is more appropriate to use window.location.href to call up ios, and it is more suitable to use iframe to call up 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 content is how to invoke the app in HTML5. I hope it will be helpful to everyone.

Related recommendations:

What new tag elements are added to HTML5

##Several useful HTML5 mobile development frameworks

A brief discussion on the future development of HTML5

The above is the detailed content of How to invoke app in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn