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.

What are Android App Links?

Android App Links is a feature that allows developers to create deep links that direct users to specific content within their Android applications. Unlike regular deep links, Android App Links are verified and can open the app directly when a user clicks a link, providing a seamless experience.

They use the HTTP or HTTPS scheme, and if the app is not installed, the link can fall back to a web URL, ensuring that users can still access the content through a browser. This enhances user engagement and improves navigation between apps and websites.

What are Deep Links?

Deep Links are URLs that direct users to specific content within a mobile application, rather than just launching the app’s homepage. They provide a way to access particular pages or features directly, enhancing user experience and engagement.

Source

Deep links can be categorized into three types: basic deep links, which work when the app is installed; fallback deep links, which redirect users to a web page if the app is not installed; and contextual deep links, which carry data about where the link was clicked, allowing for a personalized experience upon opening the app.

By utilizing deep links, developers can create a more efficient navigation path for users, enabling them to reach relevant content quickly, whether from emails, social media, or other apps.

For example, an e-commerce app can use deep links to take users directly to a specific product page from an advertisement, rather than the app’s main screen. This not only streamlines the user journey but also enhances conversion rates by making it easier for users to find what they’re looking for.

Deep Links vs Universal Links vs Android App Links

Deep Links direct users to specific content within an app but typically require the app to be installed and lack web fallback.

Universal Links (iOS) and Android App Links (Android) enhance this experience by allowing seamless navigation between the app and the web, offering web fallback if the app isn’t installed, and ensuring security through domain verification.

Both Universal and Android App Links are also indexed by search engines, improving discoverability.

Advantages of using Universal Links for Your App

Some of the advantages of using Universal Links include:

• Seamless User Experience: Universal Links enable a smooth transition between web and app content. When a user clicks on a link, it opens directly in the app if installed, providing instant access to specific content without navigating through the app’s homepage.
• Improved Engagement: By directing users to specific in-app content, Universal Links can increase user engagement and retention.
• Fallback to Web: If the app is not installed, Universal Links can automatically redirect users to the corresponding webpage, ensuring that they can still access content.
• Enhanced Analytics: Implementing Universal Links can improve tracking and analytics capabilities. Developers can monitor how users interact with links, providing insights into user behavior and preferences.
• Increased Discoverability: Universal Links can be indexed by search engines, making it easier for users to discover content within the app through search results, further driving traffic and engagement.
• Consistency Across Platforms: Universal Links create a consistent linking experience across iOS and Android, simplifying the implementation process for developers and ensuring that users have a similar experience regardless of their device.

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.

Universal Link 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"]

   }

}

App Link 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>

Talk to an Expert

<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.

Why choose BrowserStack App Automate for Testing Universal Links?

Here are some of the reasons why you should choose BrowserStack App Automate for Testing Universal Links:

1. Access to Real Devices: With BrowserStack’s extensive cloud-based device library, you can test your Universal Links on a wide range of real devices and operating systems. This helps ensure that your links perform consistently across different platforms and screen sizes.
2. Instant Access and Scalability: BrowserStack App Automate allows for quick setup and execution of tests, enabling you to scale your testing efforts as needed. You can run automated tests in parallel, significantly reducing testing time and accelerating your release cycles.
3. Comprehensive Testing Environment: Easily simulate various scenarios, including app installations, link clicks, and fallbacks to web content. This comprehensive approach ensures that you catch any issues related to Universal Links before your app goes live.
4. Seamless Integration: BrowserStack integrates smoothly with your existing CI/CD pipelines, making it simple to incorporate Universal Links testing into your development workflow. You can automate tests as part of your continuous integration process, ensuring that any changes don’t break existing functionality.
5. Detailed Reports and Insights: Get actionable insights from detailed test reports, including logs and screenshots. This information helps you quickly identify and resolve issues related to Universal Links, improving the overall user experience.