iOS uses schema protocol to tune up app

There are two ways to open the App in the browser in iOS: Smart App Banner and schema protocol.
Smart App Banner

That is, a META tag with app information on the tag, and an open behavior such as App-id, code like:

The code is as follows	Copy Code
<meta name= "Apple-itunes-app" content= "App-id=myappstoreid, Affiliate-data=myaffiliatedata, App-argument=myURL" >

You can look at the development document: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ Promotingappswithappbanners/promotingappswithappbanners.html

Today, Smart APP banner is not our hero, we're talking about schemas.
Use the schema URL to open the iOS APP

Schema is similar to custom URL protocol, we can open our own application by custom protocol, such as:

The code is as follows	Copy Code
myapplink:// # like Facebook's fb:// # itunes's itms-apps:// # and texting is like a class sms://

The easiest way to open an app is through a link, as we write in HTML:

The code is as follows	Copy Code
<a href= "myapplink://" > Open My App</a>

When users click on the link, you can open the corresponding app.
Bind Click event

But in fact, we are more in the case of binding events, such as what to do a bomb layer, can not blindly use a tag ah, so there are two ways to solve: Location.href and IFRAME.

Location.href, simple, but prone to problems, such as no installation may jump.
iframe, more complex, need to create an IFRAME, and then throw the schema to SRC

The method of IFRAME is commonly used in development, but he also has some questions:

We don't have a good way of deciding whether to open the app.
can cause history changes.
Because caused history changes, so some webview will have problems, such as: I check, open a page, if there is an IFRAME, choose to open in Safari, the actual open is an IFRAME page
If the page is leaking to the Android system, there will be problems with the page not open.
If not, the iOS safari will pop up a dialog box that doesn't open the Web site.

So the question now is: How do you know that an IFRAME has opened an app that solves the IFRAME open app callback
Open app in iOS system using IFRAME

Clever you may think of, IFrame of the onload incident ah, but sorry to say, invalid! So we found the timer (settimeout), through a timer, if over a period of time (such as 500ms), when clicked the button (record time1), the page did not cut away (after the app, the page process will be interrupted), the process is interrupted, then the timer will also be interrupted, This time should not trigger the timer, if the adjustment of failure, then the timer will trigger, we judge that in a certain period if the page has not been cut away, think that the adjustment failed.

In addition, the timer triggered by the timer2, do bad, judge whether it is too outrageous (cut away after the time should be longer than the actual timer 500ms):

The code is as follows

Copy Code

function Openios (URL, callback) { if (!url) { Return } var node = document.createelement (' iframe '); Node.style.display = ' None '; var body = document.body; var timer; var clear = function (evt, istimeout) { (typeof callback=== ' function ') && callback (istimeout); if (!node) { Return } Node.onload = null; Body.removechild (node); node = null; }; var hide = function (e) { Cleartimeout (timer); Clear (E, false); }; Node.onload = clear; node.src = URL; Body.appendchild (node); var now = +new Date (); If the event fails, 1 seconds is set to null Timer = settimeout (function () { var newtime = +new Date (); if (now-newtime>600) { It takes time to cut back because it's been cut off. So the timer even executes, but the time difference between the two should be greater than the 500ms But that's not true! Clear (null, false); }else{ Clear (null, true); } }, 500); }

It seems that the method is very reliable, but the reality is always so cruel!

Different browser app (including WebView), have their own in the background of the resident time, that is: If a browser he was cut away after the background resident 10s, then we set the timer 5s expired is futile, and 5s timer, users want to empty and so 5s! Interaction doesn't make you do that!

Finally, we think of the pageshow and Pagehide events, that is, if the browser is cut to open the app, it should trigger the browser Pagehide event, and from the app back to the browser, it will trigger the Pageshow method.

However, the code test found that in UC, Chrome, does not trigger the Pagehide and Pageshow method, but in Safari can.

Conclusion:

Calling a schema URL with an IFRAME
Use the timer to determine whether the success is adjusted over a period of time
Use Pageshow and pagehide to help the timer make more detailed judgments
It is surprising that alert may not be ejected in the timer. The DOM behind it was executed, but alert did not pop up, which might be related to the implementation of alert.
In the experiment I used two timers, because after cutting back to the browser, sometimes timeout trigger to pagehide and Pageshow before
It is also not reliable to calculate the timer actual execution time difference.

The code is as follows	Copy Code
<p><button id= "btn" > Dot i dot me! Alert, does not eject </button></p> <p><button id= "btn2" > Dot i dot me! Alert2, although there are alert and info,info execution, but alert does not eject </button></p> <p><button id= "Btninfo" > Dot i dot me! Info can be </button></p>

The code is as follows

Copy Code

$ (function () { var $info = $ (' #info '); function info (msg) { var p = $ (' <p> ' +msg+ ' </p> '); $info. Append (p); } $ (' #btn '). On (' click ', function () { Openios (' baiduboxapp://', function (t) { if (t) { Alert (' Timeout or no Baidu APP '); }else{ Alert (' Invoke success '); } }); }); $ (' #btn2 '). On (' click ', function () { Openios (' baiduboxapp://', function (t) { if (t) { Info (' timeout or no Baidu APP2 '); Alert (' Timeout or no Baidu APP2 '); }else{ Info (' Invoke Success2 '); Alert (' Invoke Success2 '); } }); }); $ (' #btninfo '). On (' click ', function () { Openios (' baiduboxapp://', function (t) { if (t) { Info (' timeout or no Baidu APP '); }else{ Info (' invoke success '); } }); }); }); Function Openios (URL, callback) {     if (!url) {         Return    }     var node = document.createelement (' iframe ');     node.style.display = ' none ';     var body = document.body;     var timer;     var clear = function (evt, istimeout) {        (typeof callback = = = ' function ') &&  callback (istimeout);         window.removeeventlistener (' pagehide ', hide, true);         window.removeeventlistener (' pageshow ', hide, true);         if (!node) {              return;        } Node.onload = null; Body.removechild (node); node = null; }; var hide = function (e) { Cleartimeout (timer); Clear (E, false); }; Window.addeventlistener (' pagehide ', hide, true); Window.addeventlistener (' pageshow ', hide, true); Node.onload = clear; node.src = URL; Body.appendchild (node); var now = +new Date (); If the event fails, 1 seconds is set to null Timer = settimeout (function () { Timer = settimeout (function () { var newtime = +new Date (); if (now-newtime>1300) { Clear (null, false); }else{ Clear (null, true); }        }, 1200);    }, 60); }