This is an old article written by myself, first published in: original link, slightly modified.

background

Call up the third-party app on the H5 page or in the Webview of the app

The core

Calling app is the mechanism of operating system (iOS, Android), there is not much we can do in H5 page.

Before tuning up, the H5 page cannot determine whether the current phone has the corresponding APP installed, so we can only try to tune up and use some methods to deal with the situation that there is no tuning up.

The principle of the adjustment is not introduced, a lot of online search. Go straight to the core code.

if(iOS9) {
    window.location.href = ${universalLink};
}
else {
	var ifr = document.createElement('iframe');
    ifr.src = ${scheme};
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    window.setTimeout(function() { document.body.removeChild(ifr); }, 300); } For example:${universalLink} = 'http://myapp.com'
${scheme} = 'myapp://index'
Copy the code

To explain the code above, if you are running iOS9 or higher, jump directly to the universal link of the app. If it’s Android or iOS9 or later, create a new iframe, change the SRC of the iframe into the scheme of the app, insert the IFrame directly into the DOM tree of the page, and “leave it to god.”

IOS tuned up

IOS uses universalLink(ulink) to tune up. Specific system internal mechanism did not say, a pile of online articles, casually search on the line.

UniversalLink is just a normal HTTP request URL. Href =XX, then the url will not be accessed and the packet will not be captured. In other words, if we access this URL, our call-up failed.

IOS how to implement [install the tune up, not install jump download page]

As I said, when iOS fails to downgrade, it accesses a URL. To achieve no installation to skip the download page, then directly to the corresponding link to ulink into the download page. We can also make ulink’s corresponding URL into any page on demand. But what if we don’t want to jump to this page, or if we want to stay on the previous page? Very simple, ask RD brother to add a 302 redirection service to the server side of that URL.

For example, we use ulink below to call up the App.

http://myapp.com/index?target=encodeURIComponent('http://www.baidu.com');

After the failure, the above ULink will be accessed by the browser, we add the redirection service on the server side, we will finally access the address corresponding to the target, namely www.baidu.com. In this way, we have achieved [when the call fails, jump to the page you want].

How to implement iOS [installed to tune up, not installed, in the current page to continue other operations]

Two methods:

First, we need the backend redirection service, we just need to change the above redirection link into a scheme. This works well for interactions where the page must be clicked by the user, such as video or audio playback. (Also: wechat can automatically play video and audio by listening to jsBridge ready events)

This scheme needs to satisfy the following requirements:

  • Can be recognized by the current browser
  • The browser recognizes this scheme, but does nothing else.

If the scheme satisfies both of these conditions, then the experience is best. Otherwise, problems such as browser pop-ups may occur.

Here are a few examples of Scheme

. Facetime :// (iOS11 is perfect, later versions will pull up faceTime directly) ucBrowser ://...Copy the code

Second, we need the backend redirection service, we need to replace the redirection link with [current link with a special parameter] link. In this way, special parameters in the URL can be determined in the front-end code, so that the current page is entered when the APP fails to pull up.

Notes for iOS tuning

  • At the beginning of 2018, universalLink was completely banned under iOS wechat, so app cannot be switched under wechat. There is nothing to be done for the time being. When this happens, the user can be prompted to open it from the browser. Of course, you can also find wechat to open the whitelist, directly using wechat’s ability to pull up.
  • Href = scheme, but there is a problem with this. If the app is not installed, it will pop up in Safari: The link is unrecognized, and even if the app is installed, a window will pop up asking you to confirm whether to activate it.
  • Although the iOS link is a URL, it is not directly pasted into safari or other browsers to access the app. Because iOS link up must require user actions, such as clicks and so on. You can paste the link into your iOS memo and click on it to set it up.

Android tuning up

Android calls use iframe (although older versions of Android can also use window.location.href=scheme).

The biggest thing about Android call up is that Android has no way of knowing if it successfully called up the app. Android tuning generally comes with a backstop strategy, such as download. The code is simple

    var ifr = document.createElement('iframe');
    ifr.src = ${scheme};
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    window.setTimeout(function() { document.body.removeChild(ifr); // Write the logic of the last-ditch strategy, such as download. // If you can't afford it, you don't need to use any backstop strategy. window.location.href =${download address}
    }, 300);
Copy the code

If you want to implement the function of “app launch, app download is not installed”, then the launch and download logic must be executed at the same time, because Android has no way of knowing whether the app was successfully launched.

Android is very flexible, so you can control the logic of the bottom-of-the-line strategy and do whatever you want. It’s just that the bottom line strategy is almost guaranteed to be executed, whether you succeed or fail.

Android tune up precautions

### blocking of various browsers

Scheme is blocked by many browsers. Therefore, it is quite normal for Android not to be able to lower the APP.

Wechat down

Wechat is too closed, naturally blocked non-own app tune up. Creating only one iframe cannot be activated in wechat. Wechat has also been modifying its app strategy for webview. The latest (March 19, 2018) ways to activate an app in wechat’s WebView are:

  • Apps must be installed on your phone
  • Use the following way, jump to the app treasure page to tune up.
    window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=${pkgname}&android_scheme= encodeURIComponent(${scheme})'
    
    ${pkgname}Represents the package name of your app, for example'com.myapp'.${scheme}Represents the invoked schemeCopy the code

Android to determine whether the switch is successful

There’s actually a way to tell if you’ve successfully tuned up android. After the setup logic is executed, a certain delay is set to determine whether the current page is visible. If it is not, it is almost certain that the setup is successful. But it only works on a small number of browsers (like Chrome on Android). On most browsers, a pop-up box will pop up and the user will have to click OK to invoke the app. Because of this popup, there is no way to determine whether the page is visible or not. In Chrome, the app will not pop up if it is successfully invoked, so chrome can use delay + whether the page is visible to judge whether it is successfully invoked.