- What is a universal link
- What is a web view?
- Universal links in a web view
- Intercepting the universal links
- Implementing Universal Links
A universal link is a regular HTTPS link which can be used to open an app on a mobile device. For example - A universal link, when tapped in an iOS device, seamlessly redirects a user to the app without opening the content in the browser.
There are a few benefits to supporting universal links if your product has a mobile app counterpart. A universal link is -
- Unique - It cannot be used by any other app unlike custom URL schemes.
- Simple - It can be used for both, a website and the mobile app.
- Flexible - Universal links work even when the app is not installed on the device. When an app is not available, the universal link simply opens the content in the browser.
A web view is used to load the content of a web page directly within an app. For example - The default mail app in iPhone uses web view to embed the HTML content of a mail.
A universal link when tapped from within a web view, works in a same manner as it would if it was tapped from a different application.
For example - When a universal link for Apple Maps lets say http://maps.apple.com/?q=Mexican+Restaurant is tapped from a web view, iOS redirects to the Apple Maps application.
The universal link in the above example is associated with the Apple Maps app, so it works fine but if the universal link was associated with the same app which loaded the web view, then iOS will not perform any action when the link is tapped.
Why does that happen?
This happens because when a universal link is associated with the same app which is showing the web view, an iOS device attempts to open the app but since the app is already opened, iOS doesn't perform any action.
In some cases, there may be a product requirement where a user needs to be redirected back to the app from the web view when they tap on a universal link. To achieve this, a universal link can be intercepted in the web view when it is tapped. By intercepting the universal link, it's possible to redirect a user back to the app programmatically.
Following is an example which uses react-native-webview and react-navigation to show how a link can be intercepted when it is opened in the web view. To intercept a web view request, the prop onShouldStartLoadWithRequest can be used. This prop accepts a function that allows custom handling of any web view request.
import { WebView } from 'react-native-webview'
import { useNavigation } from '@react-navigation/native'
// A universal link which can be used to open the '/home'
// page in the browser and also the app.
const universalLink = 'https://www.testexample.com/home'
const webviewUrl = 'https://www.somewebsite.com'
const App = () => {
const { navigate } = useNavigation()
// This callback function is called for every
// request in web view.
const handleRequest = ({ url }) => {
// Check if the request url is the universal link
if (url === universalLink) {
// Navigate the user back to the home screen
// of the app when the universal link is tapped
navigate('Home')
return true
}
return true
}
return (
<Webview
source={{ uri: webviewUrl }}
onShouldStartLoadWithRequest={handleRequest}
/>
)
}Based on the above example, when the universal link https://www.testexample.com/home is tapped, the user will be navigated to Home screen of the app.
💡 Note - This is just a general example showing how to intercept a web view request by comparing the request URL. In an actual app, the implementation of
onShouldStartLoadWithRequestfunction could vary. You may need to verify the domain of a universal link and navigate a user to an appropriate screen based on the page links.
For example - If the page link is /chat then navigate a user to the chat screen. You get the idea 😄
- Refer to the official Apple documentation to learn how to support universal links in an app.
- Universal and Deep Links in React Native
Thanks for reading!
Brilliant, thanks a lot!