Many people will encounter this problem, most of them are from the perspective of the mobile terminal to explain this problem, this article will analyze the problem from the perspective of the Web terminal to solve the problem

background

Understanding the background helps us to understand and analyze the requirements more deeply

The magnitude of users and traffic determines the excellence of an Internet product. For an elegant Internet product, the APP side and the Web side are essential, and we use them to form a closed loop to ensure user experience and activity. In addition to end coverage, we also need to achieve end-to-end interaction, so we put forward the requirements of the product: waP page evokes the APP, and if the user does not install the APP, they will jump to the download page (the boot page is ok). If the user is already installed, it will jump to the interface specified in the app based on the URL, which is exactly what this article is trying to solve

1. Let’s start with the most common and most commonly used method: scheme

An 🌰 :

wzry://videolists.show/mark/penta_kill? num=1Copy the code

In this way, you need to register the corresponding scheme in the APP in advance, and access the registered scheme through the web page to call up the APP client and related interfaces

Android configuration: Androidmanifest.xml
<activity android:name=".ui.SchameFilterActivity">
	<intent-filter>
	<action android:name="android.intent.action.VIEW" />
	<category android:name="android.intent.category.DEFAULT" />
	<category android:name="android.intent.category.BROWSABLE" />
	<data
	    android:host="videolists.show"
	    android:path="/mark/penta_kill"
	    android:scheme="wzry"/>
	</intent-filter>
</activity>
Copy the code
What’s the point of iOS graphical configuration

Define the logic beyond Scheme by yourselfgoogleBut the logic must be protected

Ok, we can have fun with it

<a href="wzry://videolists.show//mark/penta_kill? vid=666""> < p style =" max-width: 100%; clear: both; </a>Copy the code

(You can also use direct access to the address, which is a bit tricky: some browsers will return a 404 status code, or a search result page, annoying.)

After declaring sheme, look back at the requirements: the user installs the app, and calls the app. The user is not installed and we need to guide the user to download. Here’s the problem: the web doesn’t know if the user has an app. So let’s change the idea —- can we know the page is placed in the background? Page into the background, can be considered to be successful; The page does not enter the background, indicating that it failed to evoke (no installation or other reasons).

A new API fully meets the requirements mentioned above: Page Visibility API, which is detailed in the documentation —-> to accurately know the current status of the Page (foreground, background, etc.), but this API is too new, requires the support of newer browsers, coverage is a little low. Here’s a picture to feel it:

The timer

Let me give you some ideas:

  • SetTimeout implementation process:

    The browser tries to open the URL Scheme and record the time t1. After 2 seconds, check the current time T2. If T2-T1 > 2200ms, it indicates that app is successfully evoked (the timer of the browser will be delayed if app is evoked). You can direct the user to the download page

  • SetInterval implementation process

    Similar to setTimeout in principle, the method is changed to set a relatively small time interval (such as 20ms), run multiple times (such as 100), compare the total elapsed time of 100 times with the time difference of 20*100. The same logic as setTimeout

The advantages and disadvantages:

  • SetTimeout is not stable, because Android is based on Linux time-sharing multi-task, the benchmark deviation of setTimeout is not so large, which is difficult to teach

  • SetInterval is better. If the page is in the foreground all the time (failed to raise app), the total elapsed time is not much different from 100×20=2000ms. However, when the page is running in the background (successfully raised APP), the elapsed time will obviously exceed 2000ms

Note: I do not know why setTimeout and setInterval will be delayed. Please make up the execution principle of them

Good mouth gun finished, on 🌰 :

setTimeout

var openTime = +new Date();
window.location.href = 'wzry://videolists.show/mark/penta_kill? num=1'
var timer = setTimeout(function () {
    if((new Date()) -opentime < 2200) {// Add 200ms base error window.location.href ='you app download page';
    }
    if((new Date()) - openTime > 2200) { clearTimeout(timer); }}, 2000);Copy the code

setInterval

var limit_num = 100;
var openTime = +new Date();
window.location.href = 'wzry://videolists.show/mark/penta_kill? num=1'
var timer = setInterval(function () {
   if(limit_num > 0){
        limit_num--;
   }else{
        if((new Date()) -opentime < 2200) {// Add 200ms base error window.location.href ='you app download page'; } clearTimeout(timer); }}, 20);Copy the code

Once we’ve done that, we should be able to invoke our app in normal circumstances

2. Let me repeat the special situation —- weibo, wechat, etc

Schemes are whitelisted, and only schemes in the whitelist will not be filtered out. Huh?

Like, how are we gonna fix that?

(I). In fact, the simplest way is to use app treasure like dad —-.

Use the app address it gives you, jump to that address, and then dad will take you directly to the app, ignoring wechat and all that stuff

(II). Use Universal Links

It’s a great feature coming out of iOS9. It allows you to wake up your app via HTTP Links (whether your app is in wechat/Weibo or any other app, because Universal Links is handled by the system directly). Let me briefly describe how to use Universal Links to wake up your app. You can also read about it in detail through the official documentation.

First of all,

  • You must configure HTTPS for the domain name to use it
  • Configure in the Developer Center: find the App ID — > Associated Domains and set it to Enabled
  • Go to the capabilities TAB and set Associated Domains in the Capabilities TAB. Type in the Domains you want to support and prefix them with applinks:
  • Edit apple-app-site-association file (file name, JSON format cannot be changed, note apple-app-site-association file does not have format suffix)
{
    "applinks": {
        "apps": []."details": [{"appID": "TeamID + BundleId TeamID"."paths": [ "/mark/penta_kill? num="}]}}Copy the code
  • Upload the file to the root directory of the domain name to ensure that it is accessible

Once you’ve done that, you can try evoking your iOS app

It is important to note that the intercepting address must not be in the same domain as the current WebView URL. So the Universal Links will work. Don’t ask me how I know

3. There is also a final —- do their own boot, guide the user to open the browser, bypass the restrictions. However, in this case, there are many steps, and the discount rate may rise

To sum up, there is no better way for Android app to use App Treasure to jump to evoke and guide the page. Universal Links is added to the iOS scheme, which is why we often see that some apps can directly evoke the app on the iOS side in wechat/Weibo. The Android end is often the reason to go along with the app treasure

Ok, the above content is my summary and experience of arousing app, I hope it can help you

Shall not be reproduced without my permission. There are omissions and superficial articles, please correct them

Modified: After verification, wechat added a blast shielding function of Universal Links. General principle reference:Prevent universal links from opening in WKWebView/UIWebView

Wechat built-in browser how to change how to change, fierce fierce