Experiment on how to activate APP functions on HTML5 pages

This article mainly introduces the attempt to activate the APP function in the HTML5 page. Friends who need it can refer to it.

This kind of function is often seen on the market and should be very common now. Taobao H5, Zhizhi Almost H5 and so on. . .

After clicking, it will launch the APP or open the download page or download directly.

But I found that Zhihu’s function is a little different.

Its logic is to first prompt me whether to open the Zhihu APP on my phone (the browser’s mechanism asks the user for permission to operate), Then the download prompt pops up again.

##Solution URL scheme

Prioritize the use of iframe

const iframe = document.createElement('iframe');
iframe.src = 'URL scheme'; // URL scheme的方式跳转
iframe.style.display = 'none';
document.body.appendChild(iframe);

const timer = 1000;
setTimeout(function() {
        // 执行成功后移除iframe
    document.body.removeChild(iframe);
    //setTimeout小于2000通常认为是唤起APP失败 
    if (Date.now() - last < 2000) {
            // 执行失败函数
            // 这里需要考虑一下之前知乎遇到的那个问题（浏览器询问导致时间小于2S）
    } else {
           //  执行成功函数
        }
}, timer);

Understanding:

• If the evocation is successful, the H5 page will be switched to the background and the timing will The server will be delayed. Even if the user switches from the app to the H5 page, the time difference must be greater than 2S.

• If the arousal fails, the timer will be executed on time (even if there is a delay of 100ms, it is enough), and it must be less than 2S at this time.

window.location.href = URL scheme for compatibility.

The above is the detailed content of Experiment on how to activate APP functions on HTML5 pages. For more information, please follow other related articles on the PHP Chinese website!