Enhance app user experience with Universal Links

You may already have seen Universal Links flow in your daily life. Clicked on product advertisement on social networks and it directly opens the product detail page of the relevant app if you have already installed it.

This is one of the use cases of Universal Links. In this tutorial, I’m gonna build a sample store app which will open the store detail page in the app directly when the user clicks on specific store detail web links.

Sample App Flow

So, in this sample app, we would like to open the store detail page if the user clicked on the universal link.

1. Enable Universal Links in the project

First, we need to configure the app to handle universal links.

In SampleStore.xcodeproject

1. Select the “SampleStore” project
2. Select the “SampleStore” target
3. Select the “+ Capability”
4. Select the “Associated Domains”

Then add testing domain name with “applinks:” prefix.

2. Configure apple-app-site-association in web server

Second, we need to add `apple-app-site-association` file to the website. After the app is installed, this file is downloaded and this is how iOS decides whether should open the app or webpage.

So, “apple-app-site-association” file is created. Make sure not to use any filename extension.

apple-app-site-association

Let me quote an explanation from Apple Docs.

“applinks” is the root object for a universal links service definition.

The “details” dictionary only applies to the applinks service type; other service types don’t use it. The components key is an array of dictionaries that provides pattern matching for components of the URL.

As a testing purpose, I use the * wildcard character to redirect all websites’ links to the app. You can configure to include or exclude paths. More details can find here — https://developer.apple.com/documentation/safariservices/supporting_associated_domains

We need to put app id in “apps” array with this format,

“<team identifier>.<app bundle id>”.

Team identifier can be found in membership info after login to developer.apple.com.

Then the file is hosted using https:// with no redirects. Make sure you can access it.

https://testingapplinks.herokuapp.com/apple-app-site-association

At this point, the app should open once clicked on the link. If not, I recommend to check this for troubleshooting.

3. Handling universal link in the project

Now, App is opened with a universal link but it’s not opening the correct page, the Store Detail page.

Let’s handle that

If app launched because of a universal link, triggered weblink is passed to the “connectOptions” in “func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions)” method.

If the app is in the background and the app is opened because of a universal link, triggered weblink is passed to the “userActivity” in “func scene(_ scene: UIScene, continue userActivity: NSUserActivity)” method.

This time, the app opens the correct page, the Store Detail page.

The next step is to think about edge cases. With universal links, we can open that app directly if that app is installed. If the app is not installed, it will open the webpage. What if the feature is only available on the mobile app. In this case, will it be more convenient for the user if we open the AppStore page to install the app? Then user installs the app and it directly opens the relative app page that the user clicked previously.

In this kind of flow, we can use third-party tools like Firebase Dynamic Links. I recommend checking that out.

In Fairprice app, we have Scan & Go feature which customers no longer have to wait in line for the cashier as you make payment directly in the app. One of the flows we applied is that once customers scan the store QR code (which is Universal Links), the Fairprice app is opened and a specific store is automatically checked-in.

Check here whether any Scan & Go enabled Fairprice stores around you

Hope this tutorial is helpful to you. Feel free to share your thoughts in the comment section below.

Ref:

https://www.raywenderlich.com/6080-universal-links-make-the-connection https://www.donnywals.com/handling-deeplinks-in-your-app/ https://developer.apple.com/documentation/uikit/uiscenedelegate https://developer.apple.com/documentation/safariservices/supporting_associated_domains