Test Universal Links Locally for iOS
A couple of days back, I wanted to implement and support the universal links for our iOS application. Before recommending it to my customer, We wanted it to understand and verify that it is working.
What is Universal Link? At a high-level, Universal links allow your users to intelligently follow links to content in your app or your website based on the application and website association to provide a seamless experience to the end-user.
Heads-up, We are not going to discuss what is Deep Linking vs Universal Linking vs URL Scheme?
What are we trying to achieve?
- When users tap or click a universal link, the system redirects the link directly to the app without routing through Safari or the website.
- Universal links are standard HTTP or HTTPS links that one URL works for both the website and the app.
- Open an installed application associated with the web app.
- If the user has not installed your app, the system opens the URL in Safari, allowing the website to handle it.
To support Universal Links we need to create a two-way association between your app and your website. It has to be a valid association.
Why this kolaveri Di?
Let us say you have a website hosted takemyexample.com.
You want to create an association between takemyexample.com and the takemyexample mobile application.
You cannot ask the app to handle the takemyexample.com domain & its links. Without having some verification & validation to check if the apps belong to the same site or vice-versa.
If it has to be so generic, which means anyone can easily use any popular links to open their application.
Why not?
Any e-commerce apps like Flipkart, Myntra, BigBasket mobile application could have used the Amazon domain links to set the association and move all amazon traffic to their application. The fact is most e-commerce apps will do the same. There could have been a big mase, and OS could not know which application to open or what to do in this case. It could have been an injustice to Amazon.
The association between the mobile application and the domain must be valid, so it needs two things.
✔️ An app to have the capability to handle the domain association
✔️ A server hosting the website allows your app to do so via a configuration file.
Two teams were involved to provide support for Universal Links,
📱 Team and 🌐 Team
A. App Capability — Mobile Team
- Have an application identifier & profile with the Associated Domains capability enabled.
Approach 1: Visit developer.apple.com.
In Certificate, Identifiers & Profiles -> Look for you application identifier -> Click on the identifier -> Under Capabilities -> Check the checkbox of Associated Domains
Approach 2: Select Automatically manage signing.
- Add the Associated Domain Capabilities into your application.
- In XCode, select the project file from the file panel
- Select project target from Targets
- Click on Signing & Capabilities
- Click +Capabilities
- Search for Associated Domains
- Add the domain link ????
# 6 Mobile team need a domain link which support Universal Link. They have dependency on the web team to provide support of Universal Link so that they can implement, handle, navigate, and test the Universal Link feature.
Our mobile team was stuck as Web Team was busy with other important modules.
We thought, Why not have a locally hosted dummy website to test and explore before our backend team gets free?
Our mobile team took matter in their own hands and started setup the Host Server Locally….
A. HOST SERVER LOCALLY
Step 1: Create a configuration file i.e., apple-app-site-association.
The following JSON code represents the contents of a simple association file.
- The key applinks indicate we are about to declare universal links configuration.
- An array of details objects that define the apps and the universal links they handle for the domain.
- The appIDs key specifies the application identifiers for the apps that are available for use on this website.
- IMPORTANT NOTE: In the paths key, only add paths and should not prefix it with the domain name like testmyexample.com/* or testmyexample.com/assistant.
The following example is the right way of defining the paths,
“paths”: [
“/assistant/link/*”,
“/assistant/link”,
“/stella/*”
]
In case, you want only one path to exclude and all should be supported then just use NOT before the specific path.
Example:
“paths”: [
“*”,
“NOT /assistant/link/home”
]
NOTE: Replace appID value with your <Application Identifier Prefix>.<Bundle Identifier>
To know more about all the keys in apple-app-site-association read me
apple-app-site-association file needs to be associate with some website.
Step 2: Open terminal -> Go to some dedicated folder on your machine and run below command to install yarn.
> npm install — global yarn
Step 3: Generate a project with,
> yarn init
It will ask couple of questions which needs to be answered,
Step 4: Add express: It’s an fast, minimalist web framework
> yarn add express
It installs the express framework in the current directory to create web application
Step 5: Copy-paste the apple-app-site-association file in this project folder.
Step 6: Create the index.js file
Step 6: Create home.html
Step 7: Create about.html
Step 8: Spin our server
> node index.js
The local web app is running and accessible over with the localhost. We have to make it accessible publically to test the Universal Link.
So, we started to setup web app accessaible publically from our local machine.
Step 9: Install ngrok on local machine.
Ngrok exposed local servers behind NATs and firewalls to the public internet over secure tunnels.
Step 10: Open Terminal -> Go to the ngrok executable binary path -> run
> ./ngrok http 80
Now the local machine is accessible over http/https globally. https://1bd39880fbad.ngrok.io yours will be different.
Step 11: 1Let’s go back to our application which we have created and associated with our site.
We left after adding the Capabilities i.e., Associated Domains.
Now just go back and add the ngrok domain name with prefix applinks:
TEST THE UNIVERSAL LINKS
Pre-requisite:
1. Run the application on the simulator once to make sure the application is installed and running fine.
2. Keep the same simulator launched and running.
Go to your simulator browser and open type the ngrok domain address i.e., https://1bd39880fbad.ngrok.io in my case.
**************************** OR ****************************
Run the below command in terminal,
> xcrun simctl openurl booted https://1bd39880fbad.ngrok.io
It should open the application directly, if application is not installed then it simply redirects to the browser.
To handle different URL path implement the method in SceneDelegate.swift file
func scene(_ scene: UIScene, continue userActivity: NSUserActivity)
func scene(_ scene: UIScene, didFailToContinueUserActivityWithType userActivityType: String, error: Error)
func scene(_ scene: UIScene, willContinueUserActivityWithType userActivityType: String)
Online Universal Link Validator
Resources:
😊 😊 😊 Happy Coding!!! 😊 😊 😊
