H5 page App app Jump Quest

Many do web development must have encountered this requirement: Click a link or button, if installed application, use the application to open; When not installed, IOS jump App Store Download, Android download APK package directly.
It took a long time to do the reading of the daily newspaper, but after IOS 9 was released, the scheme failed again, and it took me a couple of hours.

First to do a popular science, browsers are not aware of the application has not installed.
The application can set one (or more) of itself to open a custom URL scheme, such as Twitter to declare that it can open "twitter://".
IOS applications can use the UIApplication Canopenurl method to detect whether the corresponding URL can be opened. If "twitter://" can be opened, it also means that the Twitter app is installed. Then use the UIApplication OpenURL method, you can jump to the corresponding application. Android is a similar approach.

Then look at how the browser should handle it.
For example, for IOS 8 and earlier, Safari automatically opens with a corresponding application when trying to open a custom URL scheme.
There are two ways to open it:
Direct jump: For example, click on the link, modify window.location and so on.
IFrame Jump: Add an iframe to the body and designate its SRC as the address to jump.
The latter method does not cause changes in the page to be visible (for example, the page content becomes a new page) and does not cause a change in the browser history, which is generally achieved as follows:

<a href= "Download Address" > download or open app</a>
<script>
$ (' a '). Click (function () {
    var IFR = Document.createelement (' iframe ');
    IFR.SRC = ' custom URL scheme ';
    Ifr.style.display = ' None ';
    Document.body.appendChild (IFR);
    settimeout (function () {
        document.body.removeChild (IFR);
    }, 3000);
});
</script>

This way, when you click on the A tab, you will first try to open the custom URL scheme. If it succeeds, it jumps into the application, and if it fails, jumps to the href attribute, the download page.

However, this solution is not available in many Android models and WebView, and in order to be usable, the first option is used:

$ (' a '). Click (function () {
    location.href = ' custom URL scheme ';
    t = Date.now ();
    settimeout (function () {
        if (Date.now ()-T < 1100) {
            location.href = ' Android download address ';
        }
    }, 1000);
    return false;
}

This is to have the browser attempt to open the custom URL scheme and ignore the browser default behavior (jump to the href attribute). Wait a second, then check the current time, if more than 1100 milliseconds, the Jump app is successful (jump app will make the browser timer slow), nothing to do, if not more than 1100 milliseconds, it is likely that the application is not installed, skip to the download address.

On IOS 9, the IFRAME solution is also unavailable, and the first method must be used.
But it's no use copying Android code, because when you open a custom URL scheme, a dialog box pops up asking if you want to open it with XX application. Before the user can open the button, the timer triggers, causing the jump to the app Store.

After some exploration found that after trying to open a custom URL scheme, after a page jump, will cover the dialog box, and then refresh the page, you can not confirm the application of the jump:

$ (' a '). Click (function () {
    location.href = ' custom URL scheme ';
    location.href = ' download page ';
    Location.reload ();
}

Among them, the download page is an HTML page, with JavaScript delay 2 seconds to jump to the app Store. If you jump to the App store directly in the HTTP header, you will immediately jump to the App Store and not get a chance to jump apps. Location

But this only solves when the application has been installed, can jump to the application of the scene, and no application, the jump App Store request will be canceled.
So I used two amazing timers:

$ (' a '). Click (function () {
    location.href = ' custom URL scheme ';
    settimeout (function () {
        location.href = ' download page ';
    }
    ; settimeout (function () {
        location.reload ();
    }, 1000);
}

If you want to try to modify these two values, you can try it yourself, failed to find me. The principle is probably that the jump application requires a preparation time, which can be interrupted by other jumps during this period. If the jump application fails, reload does not interrupt the app Store's jump.

It can finally be made available, but when you return from the application, Safari stays on the download page, not the original page. So you can add this code to the download page:

settimeout (function () {History.back ()}, 2000);

That is, let it return to the previous page in 2 seconds, so that when it returns from the application, it will not stay on the download page.

Finally, IOS 9 also supports the application of HTTP scheme to open the owning domain, but it's not helpful for this scenario where you can automatically choose to download and jump apps.

Reprinted in this: Keakon's graffiti Museum