Get in Touch

react-nativeTechbhoos

Part 1: Universal & Deep Links | Connect App & Website

Niranjan Shakya

Niranjan Shakya

••3 min read

The world of mobile apps is all about seamless user experiences, and two key technologies that enable this are universal links and deep linking. These powerful tools allow you to create a frictionless connection between your app and website, ensuring your users always land in the right place, whether they're tapping a link on their phone or typing in a URL. Check this!

Deep linking involves using a specific URL to open a particular part of your app. This is achieved through custom URL schemes. However, there are limitations to this method, particularly when links are used on desktops, where custom schemes might not work.

They’re iOS-specific and not relevant for Android. Universal links are basically deep links, but they are built around an idea Apple developed for aligning website content with app content. These are a game-changer for Apple users, as they eliminate the need for clunky URI schemes. Instead, a universal link acts as a single entry point that can open your app or website, depending on what the user has installed. 

In Safari, the URI scheme was the primary mechanism to redirect to the app and open when the app was installed. This put the routing logic in Safari, moreover, this approach had a significant limitation: it couldn't check if the app was installed on the user's device. This meant that developers would try to call the URI scheme 100% of the time.

Universal Links were intended to fix this. Imagine you're browsing the web on your iPhone and come across a link to your favorite gaming app. In the past, tapping that link would open Safari, and you'd have to manually switch over to the app. This was clunky and disrupted the user experience.

Universal Links change all that. Here's how they work:

How does Universal link works?
How does Universal link works?

Claiming Ownership of a Domain

First, your app registers a claim to a specific domain, like "bhoos.com". This tells the iOS operating system that your app has a verified relationship with that website.

Smooth Handoff Between App and Website

Now, when someone clicks a link to "bhoos.com", the system checks if your app is installed. If it is, the link will open your app directly, taking the user straight to the relevant content. No more bouncing between browser and app.

Fallback to the Website

If the app is not installed, the link will simply open the website in the user's browser. It's a seamless experience, no matter what.

Universal Links functionally allows you to have a single link to open your app or mobile site. Android devices utilize a similar concept known as Android App Links, enabling apps to handle web URLs and provide a cohesive user experience across platforms.

How Does Linking work in React Native?

In React Native, linking provides a way to handle both incoming and outgoing app links through URL schemes. A URL scheme (e.g., http, https, mailto) determines how links are processed by the operating system. Custom URL schemes allow apps to be opened directly with specific URLs, a technique known as deep linking.

Implementation in React Native

  • Use the Linking API to handle deep links.
  • Register URL schemes and associate them with your app.
  • For mobile, ensure standard https links can trigger the app to open and handle the URL appropriately.

This approach ensures seamless linking across different platforms and devices.

In next parts, let's explore how to connect your app and website on both Android and iOS.