Deep Links in mobile development for iOS and Android

Android Studio

We’ll start off with android. This is a very high level overview of how the process works but here goes.

In an Android App, before we enter the main code (the index js and whatever runs your react-native). There is a file called AndroidManifest.xml, which you can put an <intent-filter> on to handle specific links that a user opens on the mobile. There’s a full description in this link https://developer.android.com/guide/components/intents-filters.

Difference between Applink and Deeplink in Android

So the difference between an app link and deeplink can actually just be summarised in this table in this link https://stackoverflow.com/questions/46169025/android-deep-links-and-app-links-confused

But essentially for deeplinks you can have a custom scheme. Meaning if inside your app you open a link such as myScheme://path, then you can open the app in a specific location. But for an applink it only accepts a url link such as https://mydomain.com/path which you then can use to open a specific location in the app. There are actually other differences that you should look at the link for. But essentially an App link is a Deep link that has been verified for a website and you also don’t need to ask the user to select the app (it will just open the app straightaway).

Setup

In the end setting up app linking is 3 main steps.

1. On your domain (if your app linking) setup an association file.

You need to make file on your domain (the site you are trying to app link off). So you have to host a file under https://mydomain.com/.well_known/assetlinks.json . This depends entirely on how you have hosted the website. Inside the assetlinks.json you need something like this

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "<PASTE PACKAGE NAME HERE>",
    "sha256_cert_fingerprints":
    ["<PASTE FINGERPRINT HERE"]
  }
}]

You should be able to find your package name inside your repo. it would look something like com.package.app. The fingerprint can be generated from Android Studio. So inside android studio go to app link assistant (you should be able to find it in View → ToolWindows → App Links Assistant. Which should open a menu. If you go through create app link the 3rd step will say to open a digital assets link file generator which will generate the above code for you.

2. Introduce a intent filter in the AndroidManifest.xml file

Lets look at a deep link example

 <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="myScheme"
            android:host="path" />
 </intent-filter>

So if the user opens the link myScheme://path then you can set a specific behaviour

Now let’s look at an app link example

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />

  <data android:scheme="https" />
  <data android:host="mydomain.com" />
  <data android:pathPrefix="/path" />
</intent-filter>

In this case if the user opens https://mydomain.com/path then we can set a specific behaviour.

3. Handle changes in link (and set specific behaviours)

There are several ways to approach this. The way I did it was to use an event listener to keep track of changes in the URL. For example in my React Native app I have created a context wrapper which contains the following logic.

  React.useEffect(() => {
	       
		const eventLinkSubscription = Linking.addEventListener(
      'url',
      handleLinkEvent,
    );
    return () => {
      eventLinkSubscription.remove();
    };
  }, []);

In the following logic, everytime the url is called the function handleLinkEvent is called, and we can put whatever logic we want whenever the url is opened.