How to test Universal Links on iOS and Android?

Universal links bridge the gap between the web and mobile apps, enhancing user experiences, improving app discoverability, enabling personalization, supporting multi-platform interactions, and providing valuable measurement and analytics capabilities.

What are Universal Links?

Universal Links is a term Apple uses for launching apps on its operating system from any website. These are similar to Deep Links, just that Universal Links are iOS-specific and were developed by Apple. As per Apple, Universal Links are considered safer and more performing to their needs. It seamlessly connects the Links to the contents in your app or on your website.

Why do you need Universal Links?

• Universal links enable a smooth transition from a website or a search engine to a specific section or content within a mobile app.
• Instead of redirecting users to a mobile website, universal links can open the corresponding app directly if installed on the user’s device.
• By deep linking into the app, users are more likely to engage with the app’s content, leading to higher app adoption rates and improved user retention.
• A universal link could direct users to a specific product page within an e-commerce app, pre-populate form fields with relevant information, or provide tailored content based on the user’s preferences. This level of personalization enhances user engagement and satisfaction.
• Universal links can be leveraged to track user interactions and measure the effectiveness of app campaigns. Marketers can gain insights into user behavior, engagement metrics, and conversion rates through analytics tools.

Universal / App Links Example

1. Search for a product using Google Search
2. Tap the product image or link
3. The link will open directly in the app

Voila! A seamless way of bringing customers to your app. This enhances the users’ overall experience, allowing them to access the app features seamlessly.

How does Universal Links work?

Before Universal Links were introduced, the primary way to open up an app when installed was to redirect an app’s URI scheme in the browser. This put the routing logic in Safari, but there was no way to check whether an app was installed. This meant that the developers would try calling the URI scheme 100% of the time.

Universal Links were developed to fix this.

• So, when a link is clicked, instead of opening the browser, the OS checks whether that Link is registered for the associated domain and then checks whether the corresponding app is installed.
• If the app is installed, it will be opened.
• If it is not, the browser will open, and the http(s):// link will load.
• Functionally, Universal Links allows you to have a single Link that will either open your app or open your website on the browser.

How does Universal Links work in Android?

Android App Links (sometimes called Universal links) are HTTP URLs available on Android 6.0 and higher that help bring your users directly to your Android app. It contains the autoVerify attribute that allows your app to designate itself as a given type of link. So when a user clicks on the Android App Link, it opens the app immediately if it’s installed without any disambiguation dialog box. This helps in:

1. Driving more traffic to your app
2. Discovering which app content is used the most
3. Making the user share and find content in an installed app easily

To add support for App Links:

• Create Intent filters in your Android Manifest file
• Add code to your app’s activities to handle the incoming links
• Associate your app and your website with Digital Asset Links

The following code snippet shows an example of an Android App link intent filter:

<intent-filter android:autoVerify="true">

    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />

    <category android:name="android.intent.category.BROWSABLE" />

    <data android:scheme="http" />

    <data android:scheme="https" />

    <data android:host="myownpersonaldomain.com" />

</intent-filter>

How to test Universal Links on iOS and Android?

Let’s start by creating a new React Native application.

Step 1: Open the command prompt and run the following command:

npx react-native init react_native_deep_links_master

Cd react_native_deep_links_master

Step 2: Create the Root Navigation file named RootNavigation.js using the code below

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {

  navigationRef.current?.navigate(name, params);

}

Step 3: This will build an app in React Native containing 2 screens. Enter the below code in the App.js file.

import React, {useEffect} from 'react';

import {View, Text, Button, Linking, Alert} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';

import {createStackNavigator} from '@react-navigation/stack';

import * as RootNavigation from './RootNavigation';

function HomeScreen({navigation}) {

  return (

    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>

      <Text>Home Screen</Text>

      <Button

        title="Go to Details"

        onPress={() => navigation.navigate('Details')}

      />

    </View>

  );

}

function DetailsScreen() {

  return (

    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>

      <Text>Details Screen</Text>

    </View>

  );

}

const Stack = createStackNavigator();

function App() {

  const linking = {

    prefixes: ['https:<Your_URL_Link>', '<Your_URI>://'], //to configure react navigation to handle the incoming links

  };

  useEffect(() => {

    // Get the deep link used to open the app

    const getUrl = async () => {

      const initialUrl = await Linking.getInitialURL();

      if (initialUrl === null) {

        return;

      }


      if (initialUrl.includes('Details')) {

        Alert.alert(initialUrl);

        RootNavigation.navigate('Details');

      }

    };

    getUrl();

  });


  return (

    <NavigationContainer linking={linking} ref={RootNavigation.navigationRef}>

      <Stack.Navigator>

        <Stack.Screen name="Home" component={HomeScreen} />

        <Stack.Screen name="Details" component={DetailsScreen} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

export default App;

Step 4: Configure the React Navigation version and the required dependencies.

yarn add @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context 

Step 5: You will find both iOS and Android folders in this newly created React Native App.

Setup on iOS

To be able to listen to the incoming universal links, add the following the AppDelegate.m file:

// Add the header at the top of the file for RCTLinking:

#import <React/RCTLinkingManager.h>



// Add this above the `@end`:

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url

            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options

{

  return [RCTLinkingManager application:app openURL:url options:options];

}

// Add this above `@end` for Universal Links:

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity

 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler

{

 return [RCTLinkingManager application:application

                  continueUserActivity:userActivity

                    restorationHandler:restorationHandler];

}

Now, you need to add the scheme to your project configuration. In Xcode, open the project at DeepLinkTutorial.xcodeproj. Select the project in the sidebar and navigate to the info tab. Scroll down to URL Types and add the URL scheme to your desired URL scheme.

To ensure the Universal Links work in your app, you must also set up Associated Domains on your server.

The following JSON code represents the contents of a simple association file:

{

 "applinks": {

     "details": [

          {

            "appIDs": [ "ABCDE12345.com.example.app", "ABCDE12345.com.example.app2" ],

            "components": [

              {

                 "#": "no_universal_links",

                 "exclude": true,

                 "comment": "Matches any URL whose fragment equals no_universal_links and instructs the system not to open it as a universal link"

              },

              {

                 "/": "/buy/*",

                 "comment": "Matches any URL whose path starts with /buy/"

              },

              {

                 "/": "/help/website/*",

                 "exclude": true,

                 "comment": "Matches any URL whose path starts with /help/website/ and instructs the system not to open it as a universal link"

              },

              {

                 "/": "/help/*",

                 "?": { "articleNumber": "????" },

                 "comment": "Matches any URL whose path starts with /help/ and which has a query item with name 'articleNumber' and a value of exactly 4 characters"

              }

            ]

          }

      ]

  },

  "webcredentials": {

     "apps": [ "ABCDE12345.com.example.app" ]

  },

   "appclips": {

       "apps": ["ABCED12345.com.example.MyApp.Clip"]

   }

}

Setup on Android

To configure external linking in Android, make the following adjustments in the android/app/src/main/AndroidManifest.xml file:

1. Set launchmode of MainActivity to singleTask
2. Add the new intent-filter inside the MainActivity entry with a VIEW type action
3. Add android:autoVerify=”true” to your <intent-filter> entry
4. Add your domain’s scheme and host in a new <data> entry inside the <intent-filter>

<activity

    android:name=".MainActivity"

    android:launchMode="singleTask">

    <intent-filter android:autoVerify="true">

        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />

    </intent-filter>

    <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="your_URI_scheme" />

        <data android:scheme="https" android:host="your_URL" />

        <data android:scheme="http" android:host="your_URL" />

    </intent-filter>

</activity>

To ensure the Universal Links work in your app, you must also set up a Digital Assets Links JSON file.

Following is an example of a Digital Assets Links JSON file:

[{

  "relation": ["delegate_permission/common.handle_all_urls"],

  "target": {

    "namespace": "android_app",

    "package_name": "com.example",

    "sha256_cert_fingerprints":

    ["14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5"]

  }

}]

If you are testing on iOS, run the following command:

npx react-native run-ios

If you are testing on Android, run the following command:

npx react-native run-android

Below are the screenshots of the test run on Android:

.   

Simply put, Universal Links and App Links are similar mechanisms (one for iOS, one for Android) that can be applied to any campaign link to send users directly to an app. These will only work for opening apps that are already installed. If the relevant app is not installed, then a process called Deferred Deep Linking can be set up which doesn’t involve Universal Links or App Links.