SlideShare a Scribd company logo
Deferred Deep Linking in
iOS
- Himanshu Gupta
Problem Statement
How to navigate a user from website to mobile app for a
better user experience of the same content?
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.
Types of deep links
1. Traditional deep link
2. Deferred deep link
3. Contextual deep link
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.
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.
Deferred Deep Linking
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.
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.
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>
Handling the URL Request
func application(_ app: UIApplication, open url: URL, options:
[UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
print(url)
// take decision according to URL
return true;
}
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.
Create apple-app-site-association File
{
"applinks": {
"apps": [],
"details": [
{
"appID": "9JA89QQLNQ.com.apple.wwdc",
"paths": [ "/wwdc/news/", "/videos/wwdc/2015/*"]
},
{
"appID": "ABCD1234.com.apple.wwdc",
"paths": [ "*" ]
}
]
}
}
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
Universal Link Validator
https://limitless-sierra-4673.herokuapp.com
Handle Universal Link
Add an entitlement file with supported urls in your application:
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:
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.
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">
Smart Banner
Smart banner when app is installed:
Implementing Deferred Deep Linking
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>';
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)
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>
Thank You
SFSafariViewController was first introduced in iOS 9 so deferred deep linking is
supported in iOS 9 & above only.

More Related Content

PDF
[@NaukriEngineering] Instant Apps
PDF
Deep Link (to the Future)
PDF
Mobile Web App & Google Apps Script
PDF
Progressive Web Apps For Startups
PPTX
Progressive Web App
PDF
From AMP to PWA
PDF
Building a Progressive Web App
PPTX
Pwa demystified
[@NaukriEngineering] Instant Apps
Deep Link (to the Future)
Mobile Web App & Google Apps Script
Progressive Web Apps For Startups
Progressive Web App
From AMP to PWA
Building a Progressive Web App
Pwa demystified

What's hot (20)

PPTX
Progressive Web App
PPTX
App Deep Linking
PPTX
Progressive web app
PPTX
Measuring the Right App Metrics - Guide for Beginners
PDF
Progressive Web Apps / GDG DevFest - Season 2016
PDF
Uncovering Secrets of Progressive Web Apps
PPTX
Top 20 Reasons your App can be banned on Play Store
PDF
Next Generation Mobile Web - PWA (Progressive Web App)
PPTX
Linkdialler
PDF
Progressive Web Apps
PPTX
Progressive web apps
PDF
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
PDF
Progressive web apps with polymer
PPTX
Preparing for the Mobile Algorithm Shift
PPTX
Porting Hybrid Apps to Native Apps
PPTX
Shoptalk rh
PDF
LaunchKit
PDF
Android Instant Apps testing
PPT
GDD2010 appengine ja night + Slim3
PPTX
IDEAS OF APPS
Progressive Web App
App Deep Linking
Progressive web app
Measuring the Right App Metrics - Guide for Beginners
Progressive Web Apps / GDG DevFest - Season 2016
Uncovering Secrets of Progressive Web Apps
Top 20 Reasons your App can be banned on Play Store
Next Generation Mobile Web - PWA (Progressive Web App)
Linkdialler
Progressive Web Apps
Progressive web apps
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive web apps with polymer
Preparing for the Mobile Algorithm Shift
Porting Hybrid Apps to Native Apps
Shoptalk rh
LaunchKit
Android Instant Apps testing
GDD2010 appengine ja night + Slim3
IDEAS OF APPS
Ad

Similar to [@NaukriEngineering] Deferred deep linking in iOS (20)

PPTX
Deep linking slides
PPTX
Android Deep Linking
PDF
Deep linking - a fundamental change in the mobile app ecosystem
PDF
Deep linking
PPTX
How App Indexation Works
PPTX
Life After Mobilegeddon: App Deep Linking Strategies - Pubcon October 2015
PPTX
Life After Mobilegeddon: App Deep Linking Strategies - Pubcon October 2015
PDF
Complete A-Z Of Google App Content Indexing And Much More...
PDF
How To Make Your App Available Offline.pdf
PDF
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
PPTX
Progressive Web Apps: Opera's perspective
PDF
iOS & Android App Indexing & App Actions
DOCX
progressive web app
PPTX
Link Users to Your Specific Page in a Mobile App With Deeplinks
PPTX
Guidelines for Android application design.pptx
PPTX
Achieving quality contraints
PPTX
Overview of wrap Features in Power Apps.pptx
PDF
Detect If URL Opens in Browser or App_ Quick Guide.pdf
PPTX
Android Marshmallow APIs and Changes
PPTX
The Art and Science of Mobile App Success - Seattle Interactive Conference 20...
Deep linking slides
Android Deep Linking
Deep linking - a fundamental change in the mobile app ecosystem
Deep linking
How App Indexation Works
Life After Mobilegeddon: App Deep Linking Strategies - Pubcon October 2015
Life After Mobilegeddon: App Deep Linking Strategies - Pubcon October 2015
Complete A-Z Of Google App Content Indexing And Much More...
How To Make Your App Available Offline.pdf
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Progressive Web Apps: Opera's perspective
iOS & Android App Indexing & App Actions
progressive web app
Link Users to Your Specific Page in a Mobile App With Deeplinks
Guidelines for Android application design.pptx
Achieving quality contraints
Overview of wrap Features in Power Apps.pptx
Detect If URL Opens in Browser or App_ Quick Guide.pdf
Android Marshmallow APIs and Changes
The Art and Science of Mobile App Success - Seattle Interactive Conference 20...
Ad

More from Naukri.com (17)

PPTX
[@NaukriEngineering] Video handlings on apple platforms
PDF
[@NaukriEngineering] Introduction to Android O
PDF
[@NaukriEngineering] MVVM in iOS
PDF
[@NaukriEngineering] Introduction to Galera cluster
PDF
[@NaukriEngineering] Inbound Emails for Every Web App: Angle
PDF
[@NaukriEngineering] BDD implementation using Cucumber
PDF
[@NaukriEngineering] Feature Toggles
PDF
[@NaukriEngineering] Apache Spark
PDF
[@NaukriEngineering] Icon fonts & vector drawable in iOS apps
PDF
[@NaukriEngineering] AppTracer
PDF
[@NaukriEngineering] Flux Architecture
PDF
[@NaukriEngineering] Mobile Web app scripts execution using Appium
PDF
[@NaukriEngineering] Messaging Queues
PDF
[@NaukriEngineering] Docker 101
PDF
[@NaukriEngineering] Git Basic Commands and Hacks
PDF
[@NaukriEngineering] IndexedDB
PDF
[@NaukriEngineering] CSS4 Selectors – Part 1
[@NaukriEngineering] Video handlings on apple platforms
[@NaukriEngineering] Introduction to Android O
[@NaukriEngineering] MVVM in iOS
[@NaukriEngineering] Introduction to Galera cluster
[@NaukriEngineering] Inbound Emails for Every Web App: Angle
[@NaukriEngineering] BDD implementation using Cucumber
[@NaukriEngineering] Feature Toggles
[@NaukriEngineering] Apache Spark
[@NaukriEngineering] Icon fonts & vector drawable in iOS apps
[@NaukriEngineering] AppTracer
[@NaukriEngineering] Flux Architecture
[@NaukriEngineering] Mobile Web app scripts execution using Appium
[@NaukriEngineering] Messaging Queues
[@NaukriEngineering] Docker 101
[@NaukriEngineering] Git Basic Commands and Hacks
[@NaukriEngineering] IndexedDB
[@NaukriEngineering] CSS4 Selectors – Part 1

[@NaukriEngineering] Deferred deep linking in iOS

  • 1. Deferred Deep Linking in iOS - Himanshu Gupta
  • 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.
  • 13. Create apple-app-site-association File { "applinks": { "apps": [], "details": [ { "appID": "9JA89QQLNQ.com.apple.wwdc", "paths": [ "/wwdc/news/", "/videos/wwdc/2015/*"] }, { "appID": "ABCD1234.com.apple.wwdc", "paths": [ "*" ] } ] } }
  • 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
  • 16. Handle Universal Link Add an entitlement file with supported urls in your application:
  • 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">
  • 20. Smart Banner Smart banner when app is installed:
  • 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>
  • 25. Thank You SFSafariViewController was first introduced in iOS 9 so deferred deep linking is supported in iOS 9 & above only.