2. Problem Statement
How to navigate a user from website to mobile app for a
better user experience of the same content?
3. What are deep links?
Deep links link the content inside of a mobile application directly to the web url. If a
user sends a link to her friends, they can open the same content in mobile
application just by clicking the url.
4. Types of deep links
1. Traditional deep link
2. Deferred deep link
3. Contextual deep link
5. Traditional Deep Linking
● When a user clicks on any url, she is redirected to the corresponding content
in the application, if the application is installed. Otherwise, the url is opened in
web browser.
● The browser takes user to the store. If she installs the application and opens
it, she will land on the home page of the application instead of the respective
content page of the url.
6. Deferred Deep Linking
● Traditional deep linking loses the link when user does not have the app
installed on her device.
● Deferred deep linking solves this problem and when user installs the app for
first time from a link and opens the app she is redirected to the content
according to the url.
8. Contextual Deep Linking
● Much similar to deferred deep linking.
● Additionally stores user information and passes it to the mobile app so that it
can restore user’s state in the app.
● Can record the information about a user including who they are, where they
are referred from, who referred them or which promotion code they want to
apply.
9. URL Scheme
● URL scheme is widely used for supporting deep linking from Safari browser to
the app.
● It lets you communicate with other apps through a protocol that you define.
● To communicate with an app that implements such a scheme, you must
create an appropriately formatted URL and ask the system to open it.
● To implement support for a custom scheme, you must declare support for the
scheme and handle incoming URLs that use the scheme.
10. Registering URL Scheme in iOS app
let appUrl = URL(string: "youapp://page-to-open")
UIApplication.shared.openURL(appUrl!)
Register your Custom URL
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.yourapp</string>
<key>CFBundleURLSchemes</key>
<array>
<string>yourapp</string>
</array>
</dict>
</array>
11. Handling the URL Request
func application(_ app: UIApplication, open url: URL, options:
[UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
print(url)
// take decision according to URL
return true;
}
12. Universal Link
Custom scheme url requires a browser to open the app. Universal Link solves this
by providing direct linking between web page url and mobile app.
Steps to support Universal Link:
1. Create an apple-app-site-association file.
2. Upload this file to your HTTPS server.
3. Handle universal link in your app.
14. Upload apple-app-site-association File
Your server must support https protocol. Copy the file to the root directory of your
server or the .well-known subdirectory. This file should be accessible with https
protocol without any redirection at,
https://<your_domain>/apple-app-site-association or
https://<your_domain>/.well-known/apple-app-site-association
17. Handle Universal Link
func application(_ application: UIApplication, continue userActivity:
NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
let url = userActivity.webpageURL!
print(url)
// Take decision according to URL
return true
}
Implement method that will be called when the link is clicked:
18. Problem with Universal Link
When a user opens the url in the application by tapping the breadcrumb
button at the right side of the status bar, iOS remembers this choice.
To overcome this situation, add a Smart Banner to the web page so that
when iOS opens the application in Safari user can go back to application.
19. Smart Banner
The banner intelligently changes its action depending upon whether the
application is installed on the device or not.
<meta name="apple-itunes-app" content="app-id=myAppStoreID,
affiliate-data=myAffiliateData, app-argument=myURL">
22. Store State in Cookies using JavaScript
custom = "yourapp://<your_token>";
var now = new Date();
var time = now.getTime();
var expireTime = time + 1000*3600;
now.setTime(expireTime);
document.cookie = 'yourKey=' + custom +
';expires='+now.toGMTString()+';domain=<your_domain>';
23. Read State from Cookies in App
let redirectUrl = URL(string: "http://<youwebsite>/redirect.html")!
let safariViewController = SFSafariViewController(url: redirectUrl)
safariViewController.delegate = self
safariViewController.modalPresentationStyle = .overCurrentContext
safariViewController.view.alpha = 0.05
present(safariViewController, animated: false, completion: nil)
24. Sample redirect.html File
Now in url we have used redirect.html which will be responsible for reading the
cookie and then calling our application by URL Scheme. Add following code in the
redirect.html file to read and redirect
<script>
function getCookie(name) {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
var m = getCookie("yourKey");
if(m) {
location.href = m;
} else {
document.writeln("No Cookies...");
}
</script>