Some thoughts on opening app on HTML5 page

Time:2020-9-19

1. Demand

Some time ago, we encountered a demand for the development project. In short, there is a “open in app” button on our H5 page. After the user clicks, if the user has installed the app, he will directly open the app. If the user does not install the app, he will jump to the app download page

First of all, in my opinion, H5 should not be able to detect whether an app is installed (if there are partners who know how to detect it, please tell me in the comment area, thank you!) , so we need some skills to complete the process of judging whether the app is installed or not.

The following steps take Android mobile phone as an example. At present, the system after IOS 9 does not need us to do these processes to determine whether the app is installed (after ios9, we can provide a universal link to open the Apple App store without installing the app, and jump to open the app store after installing the app)

2. About scheme protocol

Scheme protocol is a kind of intra page Jump protocol. We can customize the scheme protocol to jump to each page in the app that we want to jump to. Scheme protocol jumps through URL, so H5 can jump to the specified page in app through this URL, which is the principle of H5 opening app.

The URL format of scheme is similar:[scheme]://[host]/[path]?[query]

3. H5 implements two methods of opening app

3.1 using timer only

The idea of this method is: first, set the address we want to jump to the URL of the scheme defined with the native app students, and then set a timer. The logic executed in the timer is to jump to the download app page. In this way, if the user’s mobile phone does not have an app installed, it will jump to the download page after a period of time.

The core code is as follows: (you can use iframe to complete the jump, but you need to consider whether iframe is allowed in IOS and other devices.)


const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 500
try {
    location = schemeUrl
    setTimeout(() => {
        location = downloadUrl
    }, wait)
} catch (e) {
    console.error(e)
}

Existing problems

The problem with the above implementation scheme is that even if you successfully jump to the app, the original H5 page will jump to the download page after a certain time, which is not a good experience

3.2 use the hidden attribute judgment of window

The idea of this method is that if the app is successfully aroused, our H5 page will be put in the background, window.hidden The property will change to true. You can judge whether the app is opened or not by changing this property. If the app is not opened, it will jump to the download page. Of course, the timer is also used here

The core code is as follows:

function checkOutApp() {
    const schemeUrl = 'xxx'
    const downloadUrl = 'XXX'
    const wait = 1000
    //Do you want to enter the backstage
    const hidden = false
    location = schemeUrl
    //If the page is not hidden within a certain period of time, it will jump to the download page
    setTimeout(() => {
        if (!hidden) {
            location = downloadUrl
        }
    }, wait)
    //Page visibility change events
    document.addEventListener("visibilitychange", function(){
        if (document.hidden) {
            hidden = true
        }
    });
}

Existing problems

At present, some Android browsers, when the app exists, will first pop up a confirmation box to ask the user whether to open the app. Only when the user agrees, will they jump to the app. If the user does not click confirm all the time, they will still jump to the download page, which is not a good experience

4. Some thoughts

In view of the problems mentioned above, I feel that an interaction of “go to download page” can be added to the interaction. If the user does not install the app, after a certain period of time, the user will be prompted to “whether the app has not been installed, click to download” button, and the user will click to jump to the download page. Will this be better.

This article on the HTML5 page to open some of the thinking of the article introduced here, more relevant HTML5 open app content, please search the previous articles of developeppaer or continue to browse the relevant articles below, I hope you will support developeppaer more in the future!