How to wake up h5 app

This time I will show you how to wake up the app using h5, how to wake up the app using h5? What are the precautions for h5 wake-up app? The following is a practical case, let’s take a look.

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

Three evocation schemes

Currently the evocation method we use is url scheme (supported by both iOS and Android platforms). You only need to register the scheme during native APP development. Then When users click on such a link, they will automatically jump to the APP.

var last = Date.now(),
    doc = window.document,
    ifr = doc.createElement('iframe');
 
//创建一个隐藏的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回小于2000一般为唤起失败
    if (Date.now() - last < 2000) {
        if (typeof onFail == &#39;function&#39;) {
            onFail();
        } else {
            //弹窗提示或下载处理等
        }
    } else {
        if (typeof onSuccess == &#39;function&#39;) {
            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">唤起app</a>

Comparison When iframe evokes 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, when entering the page In the case of direct evocation, iframe and location.href are the same, but if the evocation is driven by event , the performance of iframe evocation is better than that of location.href.

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.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use H5’s web local storage

How to implement drag-and-drop function in H5

H5 advanced inline tag

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