Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

All the following operations have been verified

Universal Link Universal Link

Universal Link is one of the new iOS9 features Apple introduced at WWDC; You can easily open an HTTPS link to directly launch your client application, of course, the premise is that you must have the App installed on the phone;

Before Universal Link, we usually use the METHOD of URL Scheme to realize the jump in the way of Web-app. Compared with URL Scheme,Universal Link provides an excellent user experience.

For more information, see the Universal Link official introduction

Application scenarios

Universal Link allows users to pull up the corresponding App in Safari browser or WebView of other apps, and use corresponding functions in the App to divert users to the App. For example, when we are shopping, when we enter Taobao website in Safari browser and click to open the mobile phone, Taobao will directly use Universal Link to pull up Taobao App.

The Universal Link advantages

  • uniqueness: with customURL SchemeCompared to theUniversal LinkIt’s standardHTTPSThe protocol is linked to your site, so it generally won’t beAppThe statement; The custom ofURL SchemeYou can’t open it directly without installing the applicationSafariThere will also be a popover that cannot be opened; Standards are usedHTTPSOf the agreementUniversal LinkLinks are more compatible;
  • security: If your application is installed on the user’s mobile phone, the system will go back to the website you configured to download the file you uploadedapple-app-site-associationIn this file, indicate the currentUniversal LinkWhich links can be openedApp; Because only the development of their own access to the siteThe root directoryUpload this file so website withAppThe association between the two is secure;
  • variable: Don’t worry if you don’t have your app installed on your phone,Universal LinkStill able to work; If you wish, install yours in the absence ofAppWhen the user clicks on the link, it will be inSafariDisplaying your site’s content in the browser;
  • simple: as aUniversal LinkThe use ofHTTPSLink, which can simultaneously operate onWeb siteandApp;
  • private: otherAppCan be in need of knowing yourAppWhether to install the case with yourAppCommunicate with each other;

Support conditions

  • Like having a supportHTTPSAnd owns the domain name under which to upload files to the root directory (or.well-knownDirectory); Need to be in the root directory (or.well-knownDirectory) under uploadAppleSpecified file;
  • inApp Developer WebsiteTo find yourAppThe correspondingApp IDconfigurationAssociated Domains, tick it;

  • Configure in project: Click+CapabilityAnd then search forAssociated Domains

Once confirmed, Xcode will generate the following configuration items:

In Domains, configure applinks: XXXXXXXXX; Applinks: the value is a fixed string. The domain name followed by XXXXXXXXX is the url where files are stored. For example, if your website is https://www.test.com, you only need to configure applinks:www.test.com. Note that both Debug and Release modes need to be configured. The location of configuration items may be different depending on the version of Xcode

  • Upload specified file: Creates a file namedapple-app-site-association.Note that the file name must be fixed toapple-app-site-associationNo suffix, no suffix, no suffix; Its content isjsonThe format is as follows:
{
    "applinks": {"apps": []."details":[
            {
                "appID":"M9N2NBY3KD.com.test.dev"."paths": ["/qq_conn/*"."/wechat1/*"] {},"appID":"ZB2D2P7QLR.com.test.dis"."paths": ["/qq_conn/*"."/wechat1/*"] {},"appID":"4X3EKPR8EQ.com.apple.dev"."paths": ["/qq_conn/*"."/wechat2/*"] {},"appID":"ZB2D2P7QLR.com.apple.dis"."paths": ["/qq_conn/*"."/wechat2/*"] {},"appID":"4X3EKPR8EQ.com.thk.dev"."paths": ["/qq_conn/*"."/wechat3/*"] {},"appID":"ZB2D2P7QLR.com.thk.dis"."paths": ["/qq_conn/*"."/wechat3/*"}]}}Copy the code

Here I have configured three apps, and the test and release of each App are configured separately, so there are six groups of configuration information.

The appID is formed by teamId. Your app’s bundle identifier; 4X3EKPR8EQ, ZB2D2P7QLR, and M9N2NBY3KD are Team ids that can be found on the developer website;

Paths for the list of supported paths: /qq_conn/* for QQ sharing, “/wechat3/* for wechat sharing;

validation

Apple officially provides verification websites to verify whether apple-app-site-Association is configured

Enter the domain name (without the protocol header) in the website. If the following information is displayed, the configuration is successful:

Configuration failure:

Guidelines on pit

  • Confirm the configurationapple-app-site-associationThe web site,The IPAccessible; (Very important, multiple tests, requires US IP access)
  • confirmDeveloper platform.The SDK integration.Xcode configuration item DomainsThree placesUniversal LinkBe able to correspond;
  • If theThe root directoryand.well-knownI put it in the directory at the same timeapple-app-site-associationMake sure the two files are the same (try not to do this); I only ended up inThe root directoryRelease the files;
  • Domain name needs to beHTTPSAgreement;
  • apple-app-site-associationfilejsonData configuration problems:

Error case 1 :(/wechat1/ not followed by wildcard *)

{
    "applinks": {"apps": []."details":[
            {
                "appID":"M9N2NBY3KD.com.test.dev"."paths": ["/qq_conn/*"."/wechat1/app1"] {},"appID":"ZB2D2P7QLR.com.test.dis"."paths": ["/qq_conn/*"."/wechat1/app1"] {},"appID":"4X3EKPR8EQ.com.apple.dev"."paths": ["/qq_conn/*"."/wechat2/app2"] {},"appID":"ZB2D2P7QLR.com.apple.dis"."paths": ["/qq_conn/*"."/wechat2/app2"] {},"appID":"4X3EKPR8EQ.com.thk.dev"."paths": ["/qq_conn/*"."/wechat3/app3"] {},"appID":"ZB2D2P7QLR.com.thk.dis"."paths": ["/qq_conn/*"."/wechat3/app3"}]}}Copy the code

Case 2 :(wildcard * is configured separately)

{
    "applinks": {"apps": []."details":[
            {
                "appID":"M9N2NBY3KD.com.test.dev"."paths": ["*"."/qq_conn/*"."/wechat1/app1"] {},"appID":"ZB2D2P7QLR.com.test.dis"."paths": ["*"."/qq_conn/*"."/wechat1/app1"] {},"appID":"4X3EKPR8EQ.com.apple.dev"."paths": ["*"."/qq_conn/*"."/wechat2/app2"] {},"appID":"ZB2D2P7QLR.com.apple.dis"."paths": ["*"."/qq_conn/*"."/wechat2/app2"] {},"appID":"4X3EKPR8EQ.com.thk.dev"."paths": ["*"."/qq_conn/*"."/wechat3/app3"] {},"appID":"ZB2D2P7QLR.com.thk.dis"."paths": ["*"."/qq_conn/*"."/wechat3/app3"}]}}Copy the code

Case 3 :(wildcard * is configured separately)

{
    "applinks": {"apps": []."details":[
            {
                "appID":"M9N2NBY3KD.com.test.dev"."paths": ["*"."/qq_conn/*"."/wechat1/*"] {},"appID":"ZB2D2P7QLR.com.test.dis"."paths": ["*"."/qq_conn/*"."/wechat1/*"] {},"appID":"4X3EKPR8EQ.com.apple.dev"."paths": ["*"."/qq_conn/*"."/wechat2/*"] {},"appID":"ZB2D2P7QLR.com.apple.dis"."paths": ["*"."/qq_conn/*"."/wechat2/*"] {},"appID":"4X3EKPR8EQ.com.thk.dev"."paths": ["*"."/qq_conn/*"."/wechat3/*"] {},"appID":"ZB2D2P7QLR.com.thk.dis"."paths": ["*"."/qq_conn/*"."/wechat3/*"}]}}Copy the code

The above three json will lead to WeChat SDK WXApi self-check function. CheckUniversalLinkReady through check; In addition, if three apps are configured under the same domain name and multiple apps are installed on the phone, the wrong App will be returned after sharing. The returned App is searched once according to the order in Details, returning the first App found;

The correct JSON data format is:

{
    "applinks": {"apps": []."details":[
            {
                "appID":"M9N2NBY3KD.com.test.dev"."paths": ["/qq_conn/*"."/wechat1/*"] {},"appID":"ZB2D2P7QLR.com.test.dis"."paths": ["/qq_conn/*"."/wechat1/*"] {},"appID":"4X3EKPR8EQ.com.apple.dev"."paths": ["/qq_conn/*"."/wechat2/*"] {},"appID":"ZB2D2P7QLR.com.apple.dis"."paths": ["/qq_conn/*"."/wechat2/*"] {},"appID":"4X3EKPR8EQ.com.thk.dev"."paths": ["/qq_conn/*"."/wechat3/*"] {},"appID":"ZB2D2P7QLR.com.thk.dis"."paths": ["/qq_conn/*"."/wechat3/*"}]}}Copy the code

Universal Link can be:

QQ:

  • https://www.xxxxxxxx.com/qq_conn/123
  • https://www.xxxxxxxx.com/qq_conn/456
  • https://www.xxxxxxxx.com/qq_conn/789

WeChat:

  • https://www.xxxxxxxx.com/wechat1/app1/
  • https://www.xxxxxxxx.com/wechat2/app2/
  • https://www.xxxxxxxx.com/wechat3/app3/

According to this configuration, the current wechat self-check function completely passes the self-check; There is no return disorder in multiple apps;

Whether Universal Link is configured correctly cannot be judged by the success of sharing and other functions. Because sharing may succeed even if the Universal Link fails to pass the verification, because the COMMUNICATION will be degraded using the URL Scheme.

Similarly, if you type Universal Link into Safari, you cannot be sure that Universal Link is fully configured, even if the App opening entry appears. This is because multiple apps will be configured and installed on the phone, and an error will be returned.

Therefore, please refer to the check result of the self-check function in the test phase.