App Linking for iOS

Overview

App Linking allows you to create redirection links that work across multiple platforms including Android, iOS, HarmonyOS, and web. With links of App Linking, you can redirect users to promotional information, or native app content that they can share with each other. You can create links of App Linking and send them to users, or allow users to share links dynamically generated in your app. Anyone who receives a link can tap it to access the specific app content.
When a user taps a link of App Linking:

If the user has installed your app, they will be redirected to the target app content directly. If the user has not installed your app, they will be prompted to install your app first, and then view the in-app content specified by the link.
In a desktop browser, the user will see the web version of your content.

What You Will Create

In this codelab, you will build an iOS app that integrates App Linking. You can create a link of App Linking in AppGallery Connect, through which your app can be launched when the link is accessed in a browser.

What You Will Learn

Integrate App Linking.
Create a link of App Linking using the App Linking SDK.
Receive a link of App Linking in your iOS app.

Development Environment and Skill Requirements

A Mac with Xcode 11 or later installed
CocoaPods 1.10.0 or later installed
A HUAWEI ID, whose identity has been verified

Device Requirements

An iPhone or a simulator for testing.

To integrate the App Linking service, you need to complete the following preparations:

Create an app in AppGallery Connect.
Create an iOS project.
Integrate the SDK into your Xcode project.
For details, please refer to Integration Preparations.

In AppGallery Connect, click My projects, click the project card, and select the app for which you want to enable App Linking from the drop-down list on the top.
Go to Grow > App Linking. If it is the first time that you use the service, click Use now.

If you are using Xcode, you need to integrate the App Linking SDK into your Xcode project with CocoaPods.

Sign in to AppGallery Connect and click My projects.
Click your project card and select an app for SDK integration from the app drop-down list on the top.
Enter the App Store ID and team ID used in your signing certificate, and then click " " .
Go to Project settings > General information. In the App information area, download the agconnect-services.plist file.
Copy the agconnect-services.plist file to your project.
Open the CLI and navigate to the location of the Xcode project. Then, create a Podfile. Skip this step if a Podfile already exists.
```
cd project-directory 
pod init
```
Add the pod ‘AGConnectAppLinking' dependency to the Podfile.
```
target 'AGC-AppLinking-2' do 
pod 'AGConnectAppLinking' 
end
```
Install the pod and open the .xcworkspace file to view the project.
```
pod install
```

The following figure shows the result after installation.

In this codelab, you can create a page in your iOS project and design the UI according to the following figure. On the page, a link of App Linking can be received and displayed using a button.

The sample code for the layout is as follows:


var shortAppLinking: String? 
let longLinkLabel = UILabel(frame: CGRect(x: 20, y: 180, width: 280, height: 160)) 
let shortLinkLabel = UILabel(frame: CGRect(x: 20, y: 380, width: 280, height: 40)) 
let resultLinkLabel = UILabel(frame: CGRect(x: 20, y: 510, width: 280, height: 40)) 
 
override func viewDidLoad() { 
   super.viewDidLoad() 
   self.view.backgroundColor = UIColor.white 
 
   let welcomeLabel = UILabel(frame: CGRect(x: 50, y: 50, width: 200, height: 40)) 
   welcomeLabel.text = "Welcome to the Codelab" 
   welcomeLabel.textColor = UIColor.darkGray 
   self.view.addSubview(welcomeLabel) 
 
   let createButton = UIButton(frame: CGRect(x: 50, y: 100, width: 200, height: 40)) 
   createButton.setTitle("Create App Linking", for: .normal) 
   createButton.setTitleColor(UIColor.white, for: .normal) 
   createButton.backgroundColor = UIColor.blue 
   createButton.addTarget(self, action: #selector(createLink), for: .touchUpInside) 
   self.view.addSubview(createButton) 
 
   let longLabel = UILabel(frame: CGRect(x: 20, y: 150, width: 200, height: 20)) 
   longLabel.text = "Long App Linking:" 
   longLabel.textColor = UIColor.darkGray 
   longLabel.font = UIFont.systemFont(ofSize: 15, weight: .bold) 
   self.view.addSubview(longLabel) 
 
   longLinkLabel.textColor = UIColor.darkGray 
   longLinkLabel.numberOfLines = 0 
   longLinkLabel.font = UIFont.systemFont(ofSize: 12) 
   self.view.addSubview(longLinkLabel) 
 
   let shortLabel = UILabel(frame: CGRect(x: 20, y: 350, width: 200, height: 20)) 
   shortLabel.text = "Short App Linking:" 
   shortLabel.textColor = UIColor.darkGray 
   shortLabel.font = UIFont.systemFont(ofSize: 15, weight: .bold) 
   self.view.addSubview(shortLabel) 
 
   shortLinkLabel.textColor = UIColor.darkGray 
   shortLinkLabel.numberOfLines = 0 
   shortLinkLabel.font = UIFont.systemFont(ofSize: 12) 
   self.view.addSubview(shortLinkLabel) 
 
   let shareButton = UIButton(frame: CGRect(x: 50, y: 430, width: 200, height: 40)) 
   shareButton.addTarget(self, action: #selector(shareLink), for: .touchUpInside) 
   shareButton.setTitle("Share short App Linking", for: .normal) 
   shareButton.setTitleColor(UIColor.white, for: .normal) 
   shareButton.backgroundColor = UIColor.blue 
   self.view.addSubview(shareButton) 
 
   let resultLabel = UILabel(frame: CGRect(x: 20, y: 480, width: 200, height: 20)) 
   resultLabel.text = "getLinkingResult:" 
   resultLabel.textColor = UIColor.darkGray 
   resultLabel.font = UIFont.systemFont(ofSize: 15, weight: .bold) 
   self.view.addSubview(resultLabel) 
 
   resultLinkLabel.textColor = UIColor.darkGray 
   resultLinkLabel.numberOfLines = 0 
   resultLinkLabel.font = UIFont.systemFont(ofSize: 12) 
   self.view.addSubview(resultLinkLabel) 
}

Go to Grow > App Linking. Click the URL prefixes tab and click New URL prefix.
In the Set domain name area, enter the URL prefix used in this codelab.
Click Next. The system automatically checks whether the URL prefix is available.

Before creating a link of App Linking, you need to specify the trusted URL formats of the deep link used in this codelab. On the App Linking page, click the URL trustlist tab, and click New trusted URL format.
In this codelab, you can add the following trusted URL formats.

Import AGConnectCore and AGConnectAppLinking to the AppDelegate class of the app, and call AGCInstance.startUp in the didFinishLaunchingWithOptions method for initialization.


import AGConnectCore 
import AGConnectAppLinking 
 
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { 
AGCInstance.startUp() 
return true 
}

Create an object named AGCAppLinkingComponents, and set urlPrefix to the URL prefix requested in AppGallery Connect. Set deepLink. Set iOS app parameters, where iosBundleId is the app package name, and iosDeepLink is the redirection link to your iOS app.


let components = AGCAppLinkingComponents() 
components.uriPrefix = "https://codelab.drcn.agconnect.link" 
components.deepLink = "https://developer.huawei.com/consumer/cn" 
components.iosBundleId = Bundle.main.bundleIdentifier 
components.iosDeepLink = "AppLinking://ios/test2=456" 
components.socialTitle = "AppLinking"

Call components.buildLongLink to generate and obtain a long link.
```
longLinkLabel.text = components.buildLongLink().absoluteString
```

Call components.buildShortLink to generate and obtain a short link.


components.buildShortLink { [self] (shortLink, error) in 
if let e = error { 
  let alert = UIAlertController.init(title: "Error", message: e.localizedDescription, preferredStyle: .alert) 
  alert.addAction(UIAlertAction.init(title: "OK", style: .cancel, handler: nil)) 
  self.present(alert, animated: true, completion: nil) 
  return 
} 
shortAppLinking = shortLink?.url.absoluteString 
shortLinkLabel.text = shortAppLinking 
}

Call the method of sharing a link to copy the short link generated by the App Linking SDK, to the system clipboard.
```
objc func shareLink() { 
UIPasteboard.general.string = shortAppLinking 
}
```

If you want the link of App Linking to be a custom URL, set a custom URL scheme under TARGETS > Info > URL Types in Xcode. In this codelab, set URL Schemes to AppLinking.

In AppDelegate, call AGCAppLinking.instance().handle to process the received link event in the callback.


func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { 
let vc = ViewController() 
let nav = UINavigationController(rootViewController: vc) 
self.window?.rootViewController = nav 
 
AGCInstance.startUp() 
AGCAppLinking.instance().handle { (link, error) in 
  let deepLink = link?.deepLink 
  vc.getDeepLink(deeplink: deepLink) 
} 
self.window?.makeKeyAndVisible() 
return true 
}

Implement the application: openURL: options: method, and return the value of AGCAppLinking.instance().openDeepLinkURL(url).


func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { 
let isAppLinking = AGCAppLinking.instance().openDeepLinkURL(url) 
return isAppLinking 
}

In Xcode, run your app on a mobile phone or simulator.
Click Create App Linking to generate a long link and a short link using the App Linking SDK.
Click Share short App Linking to copy the short link to the clipboard.
Paste the short link to a browser and access the link. If a pop-up is displayed, indicating whether the app should be launched, click Open to launch your app.
Check whether your app can be launched and obtain the deep link, which is iosDeepLink set in AGCAppLinkingComponents.

Well done. You have successfully built an app that integrates App Linking of AppGallery Connect and learned how to:

Create a sharable link using the App Linking SDK.
Launch your app using a link of App Linking, and receive the deep link using the App Linking SDK.

API Reference

Sample code

Code copied