file

This article was first published at: https://github.com/bigo-frontend/blog/ Welcome to follow and repost.

Anatomy of the technical principle of one-click activation of app based on SMS scene

Scenes

The uninstall volume of most APPs is increasing, and the situation faced by each company is similar. Lost users need to be recalled, and SMS drainage is one of the relatively effective ways.

product requirement:

Put a link in the text message, and if the user clicks on the link, the app will be invoked directly if the user has installed the app (and does not need to go through a browser), and if the user has not installed the app, the browser will be opened to display the app download page.
The link needs to be as short as possible (SMS has a character limit, and if the length exceeds the length, multiple charges will be charged)

related technology

1. Web evoked app technology

There are three common URL schemes for invoking apps on the web, universal link (ios), app links (android); after research, URL schemas cannot invoke apps in text messages, but universal links and app links can. The next three techniques are described in detail below.

1.URL Scheme

First explain the scheme, let's look at the composition of the URL:

[scheme:][//authority][path][?query][#fragment]

Take https://www.baidu.com as an example, the scheme is https, which is the beginning of the url to define the type of url. We can assign a url at the beginning of the specified scheme to the app, and through this url, a certain function of the app can be directly invoked in the browser.

URL Scheme of common apps

WeChat	Alipay	Taobao	Weibo
weixin://	happy //	taobao://	sinaweibo://

shortcoming:

When the app to be invoked is not installed, an error will be reported when clicking this link, and there are various forms of error reporting in different mobile phones.
If multiple apps are registered with the same scheme, the web side will be indistinguishable, and a pop-up window will pop up for the user to choose which app to open
Basically, it can only be used in the browser, and it cannot be used in the webview in most apps, such as WeChat
It is impossible to judge whether the app has been installed so as to execute the logic of opening the app or downloading the app, and the effect can only be achieved by hacking

2. universal link

Universal link is a universal link technology launched by Apple after ios 9. The front end can open the app by accessing the ordinary https link. If the app is not installed, it will normally access the content of the https link.

advantage:

The performance is very smooth when the user installs and does not install the app. If it is installed, it will open the app directly. If it is not installed, it will normally access the web content (usually we will point the link to the download page)
Link uniqueness, there will be no situation where one link corresponds to multiple apps, because the universal link has a one-step verification by the server to ensure uniqueness.
There are many effective scenarios, because this is a function of the system, so it is not limited to the browser. It can also take effect in text messages (isn’t this what we want)

The map illustrates the business use process of universal link

3.app links

App links is a technology launched after Android 6.0, and its functions are similar to universal links, so I won’t go into details here.

Comparison of the three

2. Keep the links as short as possible

1. Use short-chain services (not feasible)

Let the links be as short as possible, we can easily think of using short chain services. Short chain service means that when we enter a long link, the short chain service will return a shorter link for us to use. When we access the short link, we will be redirected to our original long link. But this kind of service is not suitable for our scenario. We use universal link and app links. Both technologies require that the specified configuration file can be accessed in the root directory of the domain name. When using the short chain service, there is no corresponding configuration file under the short chain root domain name, and the function of directly invoking the app cannot be realized.

2. Apply for a short domain name and cooperate with the operation background

In order to achieve jumping to different functions of the app, we generally splice parameters after the link to specify specific functional scenarios, so that the entire link will be longer.

To this end, we implement an operation background, which configures specific parameters by the operation, and then generates a short id, which only has this short id on the link, and the app reads the operation background configuration through this short id to get specific parameters
Apply for a short domain name
The link in the SMS does not have the protocol header https

The final link form is as follows: z.short.com/5f2ac8dd

Implementation

Let's sort out the overall process

Configure specific parameters in the operation background to generate a short id such as 5f2ac8dd
SMS sending link z.short.com/5f2ac8dd
iOS adopts universal link, and Android adopts app links to click on the SMS link. If the user has installed the app, it will directly invoke the app. If the user has not installed the app, the browser will display the app download page.
In order to be compatible with mobile phones with lower versions that do not support universal links and app links, the web download page uses URL Scheme technology to cover the bottom, and try to wake up the app again when clicking download

1. Realization of operation background

This is the common save configuration function, design the table structure according to the parameters required by the app, and finally generate an identification id for the app to query specific parameters.

2. universal link

The domain name needs to support https
Upload the apple-app-site-association file in the root directory of the domain name, the content is in json format

{
    
    
    "applinks": {
    
    
        "apps": [],
        "details": [
            {
    
    
                "appID": "你的TeamID.你的Bundle ID",
                "paths": ["/*"]
            }
        ]
    }
}

Mainly configure
appID: let app colleagues provide
paths: configure the specified paths, these paths will evoke the app function, support the use of
wildcards

The processing that needs to be processed by the front end is over here. If you are interested in the processing of the client, you can search for the processing of the client.

important point:

Universal Link must require cross-domain, if it is triggered to adjust universal link B in webpage A, then A and B must be different domain names
Universal Link requests apple-app-site-association when the app is installed and running for the first time. If the apple-app-site-association is updated, it will take effect only when the app is upgraded for old users.

3.app links

The domain name needs to support https
Upload the assetlinks.json file in the root domain name.well-known directory, the content is as follows

[
  {
    
    
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],
    "target": {
    
    
      "namespace": "android_app",
      "package_name": "com.ss.android.ugc.aweme",
      "sha256_cert_fingerprints": [
        "D7:81:1E:C4:16:6F:EA:6C:C7:20:BA:66:69:9D:C8:4B:58:4A:C9:E6:98:66:13:A7:6D:4E:43:D8:CB:E3:2B:27"
      ]
    }
  }
]

relation can specify which paths can evoke the app, and other content can
be provided

4 z.short.com/5f2ac8dd Visit the web download page

Because a separate domain name is applied for the SMS recall function, all unreachable links can be resolved to the download page regardless of other extensions, and the static resources that can be accessed can be accessed normally.

Here directly use the try_files directive to configure
nginx

The nginx location configuration is as follows

location / {
   try_files $uri $uri/ /download.html;
}

Analysis of the try_files command:
The function of this command is as follows. When receiving an access request, first test whether $uri is a file, and then test whether it is a directory. If it is to continue accessing, if not, call the internal redirection command. In this configuration it redirects to
/download.html

5. The web download page uses URL Scheme technology to cover the bottom line

Click Download to try to wake up the app, if it does not wake up the app, download it. We can't judge whether the app is awakened, so we can implement it with another hack.

When the app is successfully awakened, our web page will become hidden. If our page is not in the hidden state after 3 seconds of execution, we will consider that the app has not been successfully awakened and execute the download logic. The code is implemented as follows

function openApp(deeplink, downloadUrl) {
    
    
  window.location.href = deeplink;

  setTimeout(() => {
    
    
    const isHidden = document.hidden || document.webkitHidden;
    if (typeof isHidden !== 'undefined') {
    
    
      if (!isHidden) {
    
    
        window.location.href = downloadUrl;
      }
    } else {
    
    
      window.location.href = downloadUrl;
    }
  }, 3000);
}

epilogue

This is the end of the relevant content of recalling users by SMS. I hope it will be helpful to students who encounter this kind of business scenario.

Welcome everyone to leave a message to discuss, I wish you a smooth work and a happy life!

I am the front end of bigo, see you in the next issue.