App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide How to test Universal Links on iOS and Android devices

How to test Universal Links on iOS and Android devices

By Sandra Felice, Community Contributor -

Table of Contents

What are Universal Links?

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

Android uses the term ‘App Links’ which behaves in a similar way as Apple’s Universal Links.

Universal / App Links Example

  1. Search for a product using Google SearchUniversal Link Example
  2. Tap the product image or linkRedirecting link to the App
  3. The link will open directly in the appOpening Universal Link in App

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

How do Universal Links work?

Before Universal Links were introduced, the primary way to open up an app when it was 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 or not. 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 domain associated with the link, 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 do Universal Links work in Android?

Android App Links (sometimes referred to as Universal links) are HTTP URLs available on Android 6.0 and higher, that help in bringing 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 in order 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.

Universal Links in iOS

To make sure the Universal Links work in your app, you also need to 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 make sure the Universal Links work in your app, you also need to 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:

Universal Links on Android    Running Universal Links in Android 

Running Android App Links.   Running App Links 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 in order 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.

Testing Universal Links on Real Device Cloud

Universal Links play an important role in driving user traffic to an application from URLs; hence it is essential to test its functionality thoroughly to identify any bottlenecks. When testing deep linking on Real Devices, one can decipher the issues that could cause interruptions or altered behavior of the universal link. Testing on BrowserStack’s real device cloud includes all the real user conditions while performing tests, rather than unreliable test accuracy from emulators and simulators. Thus, allowing developers to test on 3000+ browser-device combinations for cross-compatibility testing.

Test on Real Device Cloud for Free

BrowserStack App Automate offers cloud-based access to both the latest and legacy devices (Android, iOS, and Windows) installed with real operating systems. App Automate also requires no additional setup, helping testers save precious time and meet their deadlines that much faster.

Since users demand high-functioning and engaging campaigns, universal link testing is an absolute requirement before releasing any campaign. By running deep link tests on real Android devices, testers can ensure that apps are working as expected in real user conditions. Run as many tests as possible on as many real Android devices to offer a consistently optimal user experience.

Tags
Automated UI Testing Automation Testing Mobile App Testing Mobile Testing

Featured Articles

How to Test Deep Links on Android & iOS devices

How to test an eCommerce website

Overcoming Common Problems While Developing eCommerce Websites