How to test Universal Links on iOS and Android?

Universal links bridge the gap between the web and mobile apps, heighten user experiences, amend app discoverability, enable personalization, supporting multi-platform interaction, and providing valuable measurement and analytics capabilities.

This guide explains in item about universal links, app links, and deep links, their benefits and how they act

What are General Links?

Universal Linksis a term Apple apply for launching apps on its operating scheme from any website. These are similar to Deep Links, just that Universal Links are iOS-specific and be germinate 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 site.

Why do you necessitate Universal Links?

Here are the reasons why you need Universal tie-in:

• Universal links enable a smooth transition from a site or a search locomotive 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 & # 8217; s device.
• By deep linking into the app, users are more potential to engage with the app & # 8217; s content, guide to high app adoption rate and improved user holding.
• A cosmopolitan link could place users to a specific production page within an e-commerce app, pre-populate sort fields with relevant information, or provide tailored substance based on the user & # 8217; s preferences. This degree of personalization enhances user engagement and satisfaction.
• Universal link can be leveraged to track user interaction and measure the effectivity of app campaigns. Marketers can acquire insights into user behavior, engagement metrics, and changeover rates through analytics tools.

What are Android App Links?

Android App Linksis a lineament 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 forthwith when a user clicks a link, furnish a unseamed experience.

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

What are Deep Links?

Deep Linksare URLs that direct users to specific content within a mobile application, instead than simply establish the app & # 8217; s homepage. They provide a way to admittance particular page or lineament forthwith, raise user experience and engagement.

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; andcontextual deep links, which carry data about where the link was snap, allowing for a personalized experience upon open the app.

By utilizing deep link, developers can create a more efficient seafaring path for user, enable them to reach relevant content quickly, whether from e-mail, societal media, or other apps.

For example, an e-commerce app can use deep links to direct users directly to a specific product page from an ad, rather than the app & # 8217; s master blind. This not only streamline the user journeying 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 unmediated exploiter to specific content within an app but typically require the app to be installed and lack web disengagement.

Universal Links (iOS) and Android App Links(Android) enhance this experience by countenance seamless pilotage between the app and the web, offering web fallback if the app isn ’ t installed, and ensuring security through land check.

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

Advantages of utilise Universal Links for Your App

Some of the vantage of utilize Universal Links include:

• Seamless User Experience: Universal Links enable a smooth passage between web and app content. When a user clicks on a link, it opens directly in the app if install, providing instant access to specific content without navigating through the app & # 8217; s homepage.
• Improved Engagement: By directing users to specific in-app content, Universal Links can increase user conflict and retention.
• Fallback to Web: If the app is not establish, Universal Links can mechanically 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 exploiter interact with links, providing insights into user behavior and preferences.
• Increased Discoverability: Universal Links can be indexed by search engines, making it easier for user to discover content within the app through search solution, farther driving traffic and engagement.
• Consistency Across Platforms: Universal Links make a consistent associate experience across iOS and Android, simplifying the implementation process for developers and ensuring that exploiter feature a similar experience regardless of their device.

Universal / App Links Example

1. Search for a product using Google Search

2. Tap the merchandise image or link

3. The link will open directly in the app

This enhances the exploiter ’ overall experience, allow them to access the app features seamlessly.

How does Universal Links work?

Before Universal Links be introduced, the primary way to open up an app when installed was to airt an app ’ s URI dodge 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 clip.

Ecumenical Links were developed to fix this.

• So, when a link is snap, instead of open the browser, the OS tab whether that Link is registered for the associated domain and so checks whether the like app is instal.
• If the app is installed, it will be opened.
• If it is not, the browser will open, and thehttp (s): //tie-in will laden.
• Functionally, Universal Links allows you to experience a single Link that will either open your app or open your site on the browser.

How does Universal Links work in Android?

Android App Links(sometimes phone Universal links) are HTTP URLs usable on Android 6.0 and higher that help wreak your users directly to your Android app. It contains theautoVerifyattribute that allows your app to delegate itself as a given type of link. So when a user dog on the Android App Link, it open 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 about
3. Making the exploiter parcel and find substance in an installed app well

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

To add support forApp Links:

• Create Intent filter in your Android Manifest file
• Add codification 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 model of an Android App link intent filter:

& lt; intent-filter android: autoVerify= '' true '' & gt; & lt; activity android: name= '' android.intent.action.VIEW '' / & gt; & lt; category android: name= '' android.intent.category.DEFAULT '' / & gt; & lt; category android: name= '' android.intent.category.BROWSABLE '' / & gt; & lt; data android: scheme= '' http '' / & gt; & lt; datum android: scheme= '' https '' / & gt; & lt; data android: host= '' myownpersonaldomain.com '' / & gt; & lt; /intent-filter & gt;

How to test Universal Links on iOS and Android?

Let ’ s start by creating a newReact Native covering.

Step 1: Open the dictation prompt and run the following bid:

npx react-native init react_native_deep_links_master Cd react_native_deep_links_master

Step 2: Create the Root Navigation file namedRootNavigation.jsusing the codification below

import * as React from 'react '; export const navigationRef = React.createRef (); export function navigate (name, params) {navigationRef.current? .navigate (gens, params);}

Step 3: This will build an app in React Native incorporate 2 screens. Enter the below codification in theApp.js file.

import React, {useEffect} from 'react '; import {View, Text, Button, Linking, Alert} from 'react-native '; meaning {NavigationContainer} from ' @ react-navigation/native '; importation {createStackNavigator} from ' @ react-navigation/stack '; import * as RootNavigation from './RootNavigation '; use HomeScreen ({navigation}) {return (& lt; View style= {{flex: 1, alignItems: 'center ', justifyContent: 'center '}} & gt; & lt; Text & gt; Home Screen & lt; /Text & gt; & lt; Button title= '' Go to Details '' onPress= {() = & gt; navigation.navigate ('Details ')} / & gt; & lt; /View & gt;);} function DetailsScreen () {return (& lt; View style= {{flex: 1, alignItems: 'center ', justifyContent: 'center '}} & gt; & lt; Text & gt; Details Screen & lt; /Text & gt; & lt; /View & gt;);} const Stack = createStackNavigator (); function App () {const linking = {prefix: ['https: & lt; Your_URL_Link & gt; ', ' & lt; Your_URI & gt;: // '], //to configure react navigation to plow the incoming links}; useEffect (() = & gt; {// Get the deep link habituate to open the app const getUrl = async () = & gt; {const initialUrl = await Linking.getInitialURL (); if (initialUrl === cipher) {homecoming;} if (initialUrl.includes ('Details ')) {Alert.alert (initialUrl); RootNavigation.navigate ('Details ');}}; getUrl ();}); return (& lt; NavigationContainer linking= {linking} ref= {RootNavigation.navigationRef} & gt; & lt; Stack.Navigator & gt; & lt; Stack.Screen name= '' Home '' component= {HomeScreen} / & gt; & lt; Stack.Screen name= '' Details '' component= {DetailsScreen} / & gt; & lt; /Stack.Navigator & gt; & lt; /NavigationContainer & gt;);} export default App;

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

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

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

Universal Link Setup on iOS

To be capable to listen to the incoming worldwide linkup, add the following theAppDelegate.mfile:

// Add the header at the top of the file for RCTLinking: # import & lt; React/RCTLinkingManager.h & gt; // Add this above the ` @ end `: - (BOOL) covering: (UIApplication *) app openURL: (NSURL *) url selection: (NSDictionary & lt; UIApplicationOpenURLOptionsKey, id & gt; *) 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 & lt; id & lt; UIUserActivityRestoring & gt; & gt; * _Nullable)) restorationHandler {return [RCTLinkingManager application: covering continueUserActivity: userActivity restorationHandler: restorationHandler];}

Now, you postulate to add the strategy to your project configuration. In Xcode, open the project atDeepLinkTutorial.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 besides set upAssociated Domainson your server.

The chaseJSONcode represent the contents of asimple association file:

{'' applinks '': {'' item '': [{'' 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 way 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 '': ``???? ''}, '' input '': `` Matches any URL whose path starts with /help/ and which has a query item with name 'articleNumber ' and a value of exactly 4 fibre ''}]}]}, '' webcredentials '': {'' apps '': [`` ABCDE12345.com.example.app '']}, '' appclips '': {'' apps '': [`` ABCED12345.com.example.MyApp.Clip '']}}

App Link Setup on Android

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

1. Set launchmode of MainActivity to singleTask
2. Add the newintent-filterinside theMainActivityentry with aVIEWtype action
3. Addandroid: autoVerify= ” true ” to your & lt; intent-filter & gt; entry
4. Add your domain ’ s scheme and legion in a new& lt; datum & gt;entry inside the& lt; intent-filter & gt;

Talk to an Expert

& lt; activity android: name= '' .MainActivity '' android: launchMode= '' singleTask '' & gt; & lt; intent-filter android: autoVerify= '' true '' & gt; & lt; action android: name= '' android.intent.action.MAIN '' / & gt; & lt; category android: name= '' android.intent.category.LAUNCHER '' / & gt; & lt; /intent-filter & gt; & lt; intent-filter & gt; & lt; action android: name= '' android.intent.action.VIEW '' / & gt; & lt; category android: name= '' android.intent.category.DEFAULT '' / & gt; & lt; category android: name= '' android.intent.category.BROWSABLE '' / & gt; & lt; datum android: scheme= '' your_URI_scheme '' / & gt; & lt; data android: scheme= '' https '' android: host= '' your_URL '' / & gt; & lt; datum android: scheme= '' http '' android: host= '' your_URL '' / & gt; & lt; /intent-filter & gt; & lt; /activity & gt;

To ensure the Universal Links employment in your app, you must also set up aDigital Assets LinksJSON file.

Following is an exemplar of aDigital Assets LinksJSON file:

[{'' intercourse '': [`` 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 bidding:

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 exploiter directly to an app. These will alone work for opening apps that are already installed. If the relevant app is not instal, so a procedure calledDeferred Deep Linkingcan be set up which doesn & # 8217; t affect Universal Links or App Links.

Best Practices for Implementing Universal Links

When setting up Universal Links, ensuring they work across devices, OS versions, and user conditions is merely as critical as implementing them.

1. Verify Configuration on a Real Device

• Emulators often behave differently than real devices, peculiarly when testing Universal/App Links.
• Use real-device cloud program like BrowserStackto test how links behave in literal user conditions.

2. Test from Multiple Contexts

Confirm how your linkup behave when:

• Tapped in email client(for example, Gmail, Apple Mail).
• Clicked frommessaging apps(for example, WhatsApp, SMS).
• Opened viasocial media apps(for exemplar, Facebook, Twitter).
• Accessed frombrowsers(Safari,).

Some apps may open links in webviews which don ’ t induction Universal Links.

3. Use HTTPS URLs with No Redirects

• Universal Links will fail if redirects (301/302) are involved before the final URL.
• Test relate directly and assure the terminus uses HTTPS with no intermediate hops.

4. Validate the AASA File

• Use coil or a browserto fetch and control theapple-app-site-association file.

Example:

bash

curl https: //yourdomain.com/.well-known/apple-app-site-association

• Use tools like Branch Validator to trouble-shoot.

5. Use App Automation for Regression Tests

• Integrate automate Universal Link essay into your CI/CD pipeline using
• Simulate cold beginning, ground, and foreground scenarios through automation scripts.

6. Check App Routing Logic

• When the app is opened via a Universal Link, ensure the deep link is aright parsed and route.
• Use logging in thescene (_: willConnectTo: selection:) or application (_: continue: restorationHandler:)methods on iOS.

7. Test Across OS Versions

• Universal Link behavior can depart across iOS versions (for example, iOS 12 vs iOS 16).
• BrowserStack ’ s device cloud permit you to test on specific OS versions without needing physical devices.

8. Fallback Strategy Validation

• On devices without the app establish, verify that Universal Links fallback graciously to the intended web page.
• BrowserStack & # 8217; s link try from Safari or Chrome ensures these cases are covered.

9. Inspect Console Logs

• Use Xcode log (for iOS) or Android Logcat (for Android) to confirm whether the Universal Link was handled by the app or browser.
• On BrowserStack, access twist logs directly for validation.

10. Avoid Social App Link Blocking

• Some social platform (like Facebook or Instagram) open links in their own webviews, which may block Universal Links.
• Always test link behaviour within these apps if your cause relies on social media traffic.

Why choose BrowserStack App Automate for Testing Universal Links?

Here are some of the intellect why you should choose for Testing Universal Links:

1. Access to Real Devices: With BrowserStack & # 8217; s extensive cloud-based twist library, you can test your Universal Links on a wide range of real devices and operating systems. This helps ensure that your links execute 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 test efforts as require. You can run automated tests in analogue, significantly reduce examine time and speed your freeing cycles.
3. Comprehensive Testing Environment: Easily simulate various scenario, including app installations, link clicks, and fallbacks to web content. This comprehensive coming ensures that you catch any number related to Universal Links before your app goes live.
4. Seamless Integration: BrowserStack integrate smoothly with your existing CI/CD grapevine, making it unproblematic to incorporate Universal Links testing into your development workflow. You can automate tests as part of your uninterrupted integration process, ensuring that any changes don ’ t break subsist functionality.
5. Detailed Reports and Insights: Get actionable insights from detailed trial reports, including logs and screenshots. This info helps you quickly identify and adjudicate issues related to Universal Links, improving the overall exploiter experience.

Related Guides