Html5 Method for arousing apps and html5 Method for arousing apps

Html5 Method for arousing apps and html5 Method for arousing apps

H5 is common in arousing app requirements. In the era where mobile is king, h5 plays an important role in app diversion.

Currently, url scheme (supported by iOS and Android platforms) is used to invoke scheme. You only need to register scheme during native APP development. When you click this link, the system automatically jumps to the APP.

Three call schemes

Iframe

Var last = Date. now (), doc = registrant doc ument, ifr = doc. createElement ('iframe'); // create a hidden iframeifr. src = nativeurl1_ifr.style.css Text = 'display: none; border: 0; width: 0; height: 0; '; doc. body. appendChild (ifr); setTimeout (function () {doc. body. removeChild (ifr); // setTimeout: if (Date. now ()-last <2000) {if (typeof onFail = 'function') {onFail ();} else {// pop-up prompt or download processing} else {if (typeof onSuccess = 'function') {onSuccess () ;}}, 1000 );

The principle of the iframe scheme is that when the program switches to the background, the timer will be postponed (another case where the timer is incorrect ). If the app is awakened, the webpage will inevitably enter the background. If the user switches back from the app, the time generally exceeds 2 s. If the app is not awakened, the webpage will not enter the background, setTimeout is triggered on time, so the time will not exceed 2 s.

Window. location. href jump directly

window.location.href = nativeUrl;

A tag Wakeup

<A href = "nativeUrl"> call the app </a>

Browser testing for three kinds of wakeup Solutions

1. X indicates that the call failed, and √ indicates that the call succeeded.
2. Red indicates that the webpage is directly aroused, and Green indicates that manual event operations are triggered.
3. Ios testing machine: iphone 6 p; android testing machine: Xiaomi 1 s

Iframe calls app test results

Window. location. href evoke app test results

Tag a calls app test results

Comparison between iframe and window. location. href

Comparison between iframe, window. location. href, and a tag Wakeup

Test Result Analysis

The model and browser used for testing are limited. The above results are for reference only.

Comparing iframe call and location. href, we can find that:

1. For ios, location. href redirection is more appropriate, because this method can successfully evoke the app in Safari. Safari is the default browser for iphone, so you don't need to talk about its importance. For qq clients, there are no examples of the two methods in ios =
2. For Android, iframe and location. href is the same, but if it is event-driven, iframe is more appealing than location. href should be better.
3. Through tests, we can find that the webpage is directly invoked and event-driven. For many browsers, the two are different in performance. In simple words, the failure of direct calls is more.

Through the comparison and analysis above, Android uses iframe for calling, and ios uses window. location. href for calling.

Differences between direct and event-driven calls on the page

There is a significant difference between the two call-up scenarios in Android, whether in the iframe method or location. href, take Xiaomi's chrome 1 s as an example:

<A id = "goApp" href = "javascript: void (0);"> click I open the APP </a>

Manually triggered event binding:

// The window is invoked successfully. onload = function () {$ ('# goapp '). on ("click", function () {window. lib. callapp ("nativeUrl"); // iframe // window. location. href = nativeUrl ;});};

Directly call upon entering the page:

// Call the failed window. onload = function () {window. lib. callapp ("nativeUrl"); // iframe // window. location. href = nativeUrl ;};

Bind events, js calls

// Call the failure window. onload = function () {$ ('# goapp '). on ("click", function () {window. lib. callapp ("nativeUrl"); // iframe // window. location. href = nativeUrl;}); $ ('# goApp ). trigger ('click ');};

Originally I thought $ ('# goApp ). the trigger ('click'); method is the same as that of manual clicking, but the actual performance is that js triggering events are ineffective as page Jump directly.

From the reference blog, we can see that the Android platform is very different from various app vendors. For example, Chrome does not support js triggering since 25 or later (non-user clicks ), set iframe src address to trigger scheme redirection. Therefore, js triggers differ greatly from direct user clicks, which is the same as audio playback restrictions.

Last

After the above tests and analysis, it is more appropriate to finalize ios to use the window. location. href method, and Android to call iframe. When we use iframe to call, we usually directly download the failed call. However, the problem is that the browser cannot detect whether the call is successful, that is, if I return to the browser after the call succeeds, the browser will still pop up the download information, which has a poor experience. Of course, we also need to deal with some successful or failed callback functions. Maybe our scenario only needs to be invoked, rather than download after failure.

When location. href is used to invoke the native app on the iphone, the process of redirecting to the intermediate page may be better than that of the current page.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.