background


Recently doing WeChat, QQ, weibo use js arouse App, before also made similar function, but is coarser, considering the situation of not too full, and that was a long time before, a lot of technology is outdated, now have a better experience, more functional perfect arouse technology, before a lot of plan, now have is not very necessary, Now through this article to share with you a comprehensive, the latest plan to arouse, I hope to help you.

The result of the final realization

The user clicks the open App or download button on the H5 page (this button may be on the top or bottom banner of a download entry page or a variety of sharing pages). If the user has installed the App, it will jump to the corresponding Native page according to the business. If the user does not have the App installed, go to the AppStore or the App Market to download our App.

The application process

First, all downloads/evocations are a direct jump, which should look like this:

<a href="https://applink-party.mtime.cn/mtlf">download</a>Copy the code

Or this:

window.location.href = 'https://applink-party.mtime.cn/mtlf'Copy the code

All business judgment is MTLF this page to do, so there are two benefits:

  • Code shared by multiple businesses. On a team, everyone’s business might have a banner download, and there’s no simpler way to call it than from location to a URL
  • Be able to useuniversal link

A quick word about Universal Link

Advantages of Universal Link

Before iOS9, the method of evocation is the same as that of android now. They all use Scheme for evocation. There is a small problem with this method. The universal Link will jump directly and will not stay on the page. The condition is to add an apple-app-site-association. Json file in the root directory of our project, which is roughly like this:

Then the iOS App background configuration, you can achieve direct arousal!

The universal link configuration

How is the configuration successful on the H5 side? As long as we open a URL in the browser (no matter CDN address or routing and forwarding) and see the content of the JSON file, the configuration of H5 is considered successful. Then you give this address to the old iOS drivers, and when you say something to them, they immediately know what to do. It’s that simple!

Wechat, Weibo, QQ, Safari in each platform evoke scheme

Arousal flow chart



After a long time of experimentation, we have summarized the solutions to evoke success/failure in various situations, and we are going to talk about them one by one.

WeChat

Wechat is one of the most important sharing channels, but we can do, but not much. Previously, wechat on iOS supported universal Link, but since January 8, 2018, wechat has blocked this method!! Whatever the reason, wechat has blocked the most convenient way of arousing people on iOS. All we can do is adapt to it. So, now whether it’s iOS or Android, we do the same thing: we jump straight to App Treasure. Note: wechat also blocks the iTunes link, so there is no way to go directly to the AppStore. You have to use AppStore to connect to the App store.

weibo

Twitter currently supports Universal Link arousal, so we only need to consider the undownloaded case.

  • iniOSNext, weibo does not support opening the link of app Treasure, so we need to guide users to use itSafariOpen it like this:

  • inandroidPlatform,useschemeYou can’t call an App that wayBut there are exceptions, againscheme, adult comments and netease cloud music can be aroused, you can try it yourself when you are free, so we can infer that weibo under Android platform also has a whitelist similar to wechat, and those in the whitelist can be usedschemeArouse, like wechat to jingdong, jingdong in wechat is throughschemeArousing by way of.

So, no matter iOS or Android, our solution is to directly guide the user to use the local browser to open.

QQ

  • iOSPlatform, QQ is still supporteduniversal linkEvoke, if not installed, QQ also support direct openitunesLinks to compare other applications, QQ support is the best.
  • androidPlatform, QQ is also supportedschemeThe way evokes, howeverIn some older models, QQ will have a certain probability of evocation failure, the specific phenomenon is: the first time to open the page, evoke failure, open again, evoke success. According to the phenomenon, we can infer that in QQwebview, toschemeAfter the test, the loading time is about 500ms. If the time value exceeds this value, there will be the failure of the arousing. The reason why the probability of success of evocation is high when the file is opened for the second time is that the file has been cached when the file is opened for the first time, and the file is directly loaded when the file is opened for the second time, so that the time is within the limit.

Safari

Safari supports universal Link and iTunes, so, as shown in the figure below.

Hit the pit

    • iniOS9,SafariDirect jump is not supporteditunes, so, this situation needs to do compatibility processing, you can directly jump to the app treasure
    • Before, you had to count your own time to see if the arousal was successful, because if it was successful,setIntervalIn my tests, I can no longer use this method, just use itdocument.hidden || document.webkitHiddenIt’s ok. It’s compatible
    • Judge whether or notSafariIn the browser, the general judgment is whether there is this string in UA. After testing, it is found that UA of Android also contains this stringSafariThis string (shown below in UA) requires the judgment of the operating system
    • aboutSchemeEvoke, before there are many schemes, such as: useiframe,<a> TAB click,window.location. After testing, just use the A tag to click, which is the best compatibility, the code looks like this:

    About the test

    Two platforms, so many situations, one test at a time? Of course you need to verify it one by one, but there’s no need to change a line during development. It’s too inefficient to test it on your phone, especially if you choose an Android 4.4 phone like this, which can definitely temper your patience. In order to improve efficiency, I share my common UA with you, so that you can configure it in the Chrome emulator and debug it locally. The common UA is as follows:

    • IOS – WeChat

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.47. (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.61. NetType/WIFI Language/zh_CNCopy the code

    • iOS-QQ

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.47. (KHTML, like Gecko) Mobile/15C202 QQ/7.3. 5473. V1_IPH_SQ_73.. 5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1Copy the code

    • IOS – weibo

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.47. (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__81.. 0__iphone__os112.2.)Copy the code

    • iOS-safari

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.47. (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1Copy the code

    • Android – WeChat

    Mozilla/5.0 (Linux; Android 4.42.; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.02987.132. MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36MicroMessenger/6.61.1220.(0x26060135) NetType/WIFI Language/zh_CNCopy the code

    • Android-QQ

    Mozilla/5.0 (Linux; Android 4.42.; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.02987.132. MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36V1_AND_SQ_73.2._762_YYB_D QQ/7.32.3350. NetType/WIFI WebP/0.3. 0 Pixel/1080Copy the code

    • Android – weibo

    Mozilla/5.0 (Linux; Android 4.42.; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0. 0. 0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8. 02.__android__android44.2.)
Copy the code

    Once configured, you can switch environments on your computer as I did:

    Source code and library file use, please see: Github, force me

    Scan code validation

    For the entire arousal process, you can visit the download portal: party.mtime.cn/download or scan the code:

    Talking fish released on the Oba donkey