Some time ago, when I was doing some H5 pages, the landing page accounted for a large proportion of the demand, and the responsibility of the landing page was drainage. There are two forms of drainage, which is also our definition of call end: guiding downloaded users to open APP, and guiding undownloaded users to download APP.

Guide downloaded users to open the APP. Statistically speaking, users stay in the APP for more time, which improves user stickiness. In terms of experience, APP experience is better than H5. Guiding undownloaded users to download APP can increase the number of our users.

So that’s What we’re talking about and Why we’re calling ends, so we’re going to talk about How, which is How to call ends.

Let’s take a look at the common call methods and their applicable scenarios:

Call the media

URL Scheme

source

We have a lot of private information on our phones, contact details, photos, bank card details… We don’t want this information to be freely accessible by mobile applications, because information leakage is very harmful. Therefore, how to ensure that personal information is used with the knowledge and permission of the device owner is the core security issue of intelligent devices.

To do this, Apple uses a mechanism called sandbox: an app can only access the resources it claims it can access. But sandboxes also prevent proper sharing of information between applications, limiting their ability to do so to some extent.

Therefore, we urgently need an auxiliary tool to help us achieve application communication, and URL Scheme is this tool.

What is a URL Scheme

Let’s look at the composition of the URL:

[scheme:][//authority][path][?query][#fragment]
Copy the code

Take https://www.baidu.com for example. Scheme is HTTPS.

Just as we assign a URL to a server resource so that we can access it, we can also assign a special format URL to a mobile APP to access the APP or a function within the APP. The APP has to have an identity so we can locate it, which is the Scheme part of the URL.

URL Scheme of common APP

APP WeChat Alipay taobao weibo QQ zhihu SMS
URL Scheme weixin:// alipay:// taobao:// sinaweibo:// mqq:// zhihu:// sms://

The URL Scheme syntax

The above table shows the simplest URL Scheme for opening APP. The following is the common URL Scheme format:

Some function (application) | scheme: / / [path]? [query] | | need application identification function parametersCopy the code

Intent

Android’s native Google browser has made some changes to the call function since chrome25, and URL Scheme no longer launches Android apps. For example, using iframe to point to weixin:// cannot be opened even if the user has installed wechat. So, the APP needs to implement the intent: syntax provided by Google, or enable the user to open the APP with a custom gesture, but that’s another topic.

The Intent of grammar

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;
Copy the code

If the user has not installed the APP, it will jump to the system default store. Of course, if you want to specify a jump address that evokes a failure, add the following string to end; Before will do:

S.browser_fallback_url=[encoded_full_url]
Copy the code

The sample

Here is an intent that opens Zxing QR code to scan APP.

intent:
   //scan/
   #Intent; 
      package=com.google.zxing.client.android; 
      scheme=zxing; 
   end; 
Copy the code

To open this APP, you can use the following methods:

 <a href="intent://scan/#Intent; scheme=zxing; package=com.google.zxing.client.android; S.browser_fallback_url=http%3A%2F%2Fzxing.org; end"> Take a QR code </a>
Copy the code

Universal Link

What is Universal Link

Universal Link is a new feature apple introduced in WWDC2015 for iOS9, which opens apps via a traditional HTTP Link. If the user has not installed the APP, the page corresponding to the link will be redirected.

Why use Universal Link

Traditional Scheme linking has the following pain points:

  • On ios, there will be a confirmation popup to prompt the user whether to open it or not, which is an extra step for the user to call. If the user has not installed the APP, there will also be a prompt that says, “We can’t open this page because the URL is invalid.”
  • The traditional Scheme jump cannot know whether the calling end is successful or not. If the Universal Link calling end fails, the corresponding page of this Link can be opened directly
  • Scheme has been banned in wechat, Weibo, QQ browser and Baizhong. Universal Link can be avoided by using Universal Link (as of August 21, 2018, Universal Link has been banned by wechat and QQ browser, and no other mainstream apps have been found to be prohibited).

How to make APP support Universal Link

There are a lot of articles that will tell us how to configure in detail. You can also go to the official documentation. I will simply write 12345 here.

  1. Have a domain name that supports HTTPS
  2. In the developer center, AppIDs under Identifiers find their App ids, edit them and open the Associated Domains service.
  3. Open the Associated Domains in project configuration and type in the Associated Domains you want to supportapplinks:The prefix
  4. configurationapple-app-site-associationThe file name must beapple-app-site-association ，No suffixes
  5. Upload the file to your HTTPS serverThe root directoryor.well-knowndirectory

Pits in the Universal Link configuration

Here are the pits we encountered in the configuration process. Of course, first of all, you must strictly follow the above requirements in the configuration process, especially the bold areas.

  1. Cross-domain problem

    After IOS 9.2, you must trigger cross-domains to support Universal Link calls.

    The IOS side has a judgment that if you want to open Universal Link and the current page is the same domain, IOS respects the user’s most likely intention and directly opens the Link to the corresponding page. If it’s not in the same domain, open the link in your APP and perform the specific call operation.

  2. Universal Link is an empty page

    Universal Link is essentially an empty page. If the APP is not installed, the Universal Link is treated as a normal page Link and will naturally jump to the 404 page, so we need to bind it to our transfer page or download page.

How do I call the three call media

From the previous introduction, we can see that regardless of URL Scheme, Intent or Universal Link, they are all urls, but URL Scheme and Intent are special urls. So we can use them the same way we use urls.

iframe

<iframe src="sinaweibo://qrcode">
Copy the code

In the days when only URL schemes were available, iframe was the most used. Because if the APP is not installed, it will not jump to the error page. However, there are many compatibility problems of IFrame in various systems and applications, so URL Scheme cannot be used in all of them.

A label

<a href="intent://scan/#Intent; scheme=zxing; package=com.google.zxing.client.android; end"">scan</a>
Copy the code

Earlier we mentioned Intent protocols. The official use case uses the “A” tag, so we can use it along with it.

In the process of use, for the dynamically generated A label, dispatch was used to simulate the trigger click event, and it was found that many kinds of events were invalid when passed. Click () is used to simulate triggering. In some scenarios, the first click is returned to the original page and the click is clicked again. The location of the click is deviated from the recognized location of the page, so the Intent protocol changes the a tag to window.location.

window.location

In ios 9+ browsers such as Safari, UC and QQ, iframe cannot successfully invoke APP, and only window.location can successfully invoke APP.

Of course, if our app supports Universal Link, ios 9+ will not use URL Scheme. In the process of using Universal Link, I found that in QQ, no matter iframe navigation, A tag opening or window.location could be called successfully. At first, I thought that QQ and wechat banned Universal Link call function, in fact, not so, after various tests, through the top. Location call successfully.

Check whether the call was successful

If the call fails (APP is not installed), we always have to do something, it can be a download page, it can be ios to the APP Store… However, Js does not provide the ability to retrieve APP invocation state. Android Intents and Universal Link do not need to worry. Their own mechanisms allow them to navigate directly to the corresponding page after the invocation fails. So we can only use some very hack ways to implement the APP evoke detection function.

// Usually visibilitychange
const visibilityChangeProperty = getVisibilityChangeProperty();
const timer = setTimeout((a)= > {
  const hidden = isPageHidden();
  if(! hidden) { cb(); } }, timeout);if (visibilityChangeProperty) {
  document.addEventListener(visibilityChangeProperty, () => {
    clearTimeout(timer);
  });

  return;
}

window.addEventListener('pagehide', () => {
  clearTimeout(timer);
});
Copy the code

If the APP is aroused, the page will run in the background and trigger the visibilitychange event of the page. If it does, the page is successfully invoked and clearTimeout is called to clear the failed function (callback) callbacks if the page is not hidden.

Of course, this event is compatible, the specific code implementation of the event to add prefix (such as -webkit-) check. If neither is compatible, we will use the PageHide event for back-pocket handling.

There is no perfect solution

Through several points above, we can find that both calls end media, call calls end medium and judgment calls end results are not a perfect method, we can do is on code level in ensuring that the most common scenarios (such as WeChat, weibo, hand hundred, etc.) call the correct, under the condition of maximum compatible with the rest of the scene.

Ok, so we’re going to pull a few things out of code to make our APP evocative on more platforms.

  • Wechat, Weibo, Hand 100, QQ browser and so on.

    These applications block callers because they block the URL Scheme directly. Then there may be doubts, wechat can open the public comment ah, micro-blog can open youku ah, that is how to achieve?

    Each of them maintains a whitelist, and if your domain name is in the whitelist, all URL schemes initiated from that domain name will be allowed. Just like wechat, if you are a “family member” of Tencent, you can be added to the whitelist. Wechat’s whitelist generally only includes “family member”, and it is difficult to apply for whitelist qualification. However, weibo and other channels can contact their children to apply, but the conditions are different, for example, weibo is to add the entrance to open weibo in your APP, evoke more than 100W times within three months, you can join the white list.

  • Tencent APP Treasure directly opens a function of the APP

    As we mentioned earlier, if you are not a wechat family member, it is very difficult for you to enter the whitelist, so we usually directly open Tencent App Treasure in Android, and directly open App Store in ios. Clicking the “Open” button in Tencent APP Treasure can directly evoke our APP, but we cannot open a certain function in the APP (that is, the specified page cannot be opened).

    Tencent APP Treasure opened an application called APP Link, as long as you apply for APP Link, you can open the APP treasure by adding &android_schema={your_scheme} after the APP treasure address, to open the specified page.

Callapp-lib out of the box

It’s very informative! All kinds of problems have their own pit verification! Inside very breakdown!

Don’t worry, the prescription is ready for you, just fill the prescription 😏 — NPM package callapp-lib

You can also load CDN files directly from script:

<script src="https://unpkg.com/callapp-lib"></script>
Copy the code

It works in most environments, is easy to use, and supports many extensions. Check out its documentation

Refer to the article

  1. Invoke the Native app in the browser, or skip to the App store for download
  2. H5 arouse the app
  3. URL Schemes use details
  4. Android Intents with Chrome
  5. Commonly used the URL Scheme
  6. Universal Link front-end deployment mining record
  7. Support Universal Links
  8. Universal Link is a fraud

In this paper, starting from: suanmei. Making. IO / 2018/08/23 /…