Skip to content

Instantly share code, notes, and snippets.

@savyounts
Last active May 27, 2022 13:39
Show Gist options
  • Save savyounts/0ad5cb162e3002e5c9a472c9cbfc8f76 to your computer and use it in GitHub Desktop.
Save savyounts/0ad5cb162e3002e5c9a472c9cbfc8f76 to your computer and use it in GitHub Desktop.
Deeplinking
Universal Link vs Deep Link: https://www.adjust.com/blog/universal-links-vs-deep-links/
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app
NOTES FROM APPLE:Important
While custom URL schemes are an acceptable form of deep linking, universal links are strongly recommended as a
best practice. For more information on universal links, see Allowing Apps and Websites to Link to Your Content.
(Universal links only work for for Apple devices and available on iOS 9+)
Enabling Universal Links:
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/enabling_universal_links
______________________________________________________________________________________________________________________________
https://developers.tune.com/sdk/deep-linking-to-your-mobile-app-from-your-website/
To deep link from your mobile website into your mobile app, include JA in the head of your HTML page that opens your deep link URL on teh page load.
if the user has the app installed on their device, it will open the app to that screen, otherwise it will prompt the user to
download the app.
Its very important to make sure your deeplink URL is properly formatted for the device and browser, otherwise you may be
redirected to "Page Not Found"
Mobiledeeplinking.org provides the best documentation on how to create properly formatted Invoke URLs. You can also
reference the technical documentation provided by the native platforms themselves.
iOS -- USE UNIVERSAL LINKS INSTEAD OF CUSTOM URLS
For iOS, reference the ‘Registering Custom URL Schemes’ section for information on how to set up URL schemes and handle deep links in your app delegate:
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html#//apple_ref/doc/uid/TP40007072-CH6-SW11
Android
On Android, reference how to set a URL data scheme in an intent filter:
http://developer.android.com/training/basics/intents/filters.html
Learn how to read the data from the intent when your app is launched:
http://developer.android.com/guide/topics/manifest/data-element.html
If your Application and Activities are instrumented according to our Android Quick Start guide, then the opened url should automatically be recorded as the referral source for the app launch.
However, note that Chrome on Android has a different URL format than the standard Android browser:
https://developer.chrome.com/multidevice/android/intents
EX JS in <head></head>
<!-- implement javascript on web page that first first tries to open the deep link
1. if user has app installed, then they would be redirected to open the app to specified screen
2. if user doesn't have app installed, then their browser wouldn't recognize the URL scheme
and app wouldn't open since it's not installed. In 1 second (1000 milliseconds) user is redirected
to download app from app store.
-->
<script>
window.onload = function() {
<!-- Deep link URL for existing users with app already installed on their device -->
window.location = 'yourapp://app.com/?screen=xxxxx';
<!-- Download URL (TUNE link) for new users to download the app -->
setTimeout("window.location = 'http://hastrk.com/serve?action=click&publisher_id=1&site_id=2';", 1000);
}
</script>
______________________________________________________________________________________________________________________________
https://www.leanplum.com/glossary/deep-linking/
Deep linking works by mapping out every screen of the app in a similar manner to a website. This means that every
individual webpage has its subsequent screen in the app, so customers can transition easily from web browsing into the app.
______________________________________________________________________________________________________________________________
https://medium.com/@ageitgey/everything-you-need-to-know-about-implementing-ios-and-android-mobile-deep-linking-f4348b265b49
Apple calls it Universal Links and Google calls it App Links
Both iOS (9.0 and newer) and Android (all versions) provide good APIs for deep linking. You can implement deep linking on
both platforms at the same time and a lot of the work overlaps.
Step 1: Mapping website URLs to screens in your app:::
you need to decide which urls on your website should link to which screens in your mobile app.
Step 2: iOS and Universal Links:::
I recommend that you only implement Universal Links and don’t implement support for iOS 8.0 and below if you can possibly
avoid it. Not only is this a lot less work, but the older deep linking solutions for iOS 8 constantly break in iOS 9 updates
This requires changes on both our website and in our native app.
First, you have to create a file on your website called https://www.example.com/.well-known/apple-app-site-association
that tells Apple that you own your mobile app and that it should intercept all links to /products/.
{
"applinks": {
"apps": [],
"details": [
{
"appID": "9JA89QQLNQ.com.example",
"paths": [ "/products/*"] <-- put in custom paths
}
]
}
}
I highly recommend hosting this file on a CDN to prevent the flood of traffic from taking down your website.The file has
to be located on your website at exactly /.well-known/apple-app-site-association.
******this file must be live on your website before your app is released. This also means that you can’t add new deep
linking url patterns to your app until you push out a new app update to force users to refresh the file.*******
Step 3: Android and App Links:::
Android in the past has supported deep links with Intent Filters, since Android 6.0, they use App Links. Since most people
have not updated to 6.0, you need to include both. Its the same process, just add an extra line to include App Links.
First, you update your AndroidManifest.xml file and add a new <intent-filter> declaration telling Android which Activity
to start when the user clicks on a https://www.example.com/<your-path>/* link
Next, you add code to that Activity in the java file to grab the url the user clicked and show the right feature in the app
Check out Google's Doc for more details
https://developer.android.com/training/app-links/deep-linking
Implementing Android App Links with Verification
First, update your AndroidManifest.xml file again to request that Android verify that you own your website:
<!-- Add android:autoVerify="true" to ask Android to verify you own the site -->
<intent-filter android:label="@string/filter_title_viewproducts" android:autoVerify="true">
Second, you need to create a file on your website called https://www.example.com/.well-known/assetlinks.json (assetlinks.json)
that proves to Google that you own the app.
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android",
"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"]
}
}]
You can generate the “sha256_cert_fingerprints” value with this command:
$ keytool -list -v -keystore my-release-key.keystore
You don’t need to build a custom banner to promote downloading your app. Both iOS and Android provide
a nice built-in way to easily pop up a banner on your website prompting the user to download your app.
Using the banner provided by the operating system (instead of building your own) gives you less control,
but it results in a more integrated and slick app installation experience with less user annoyance.
iOS Smart Banners:::
The banner is “smart” because it can tell if the user has the native app installed and adapt it’s behavior.
If the user doesn’t have the app, it will prompt them to download it. If the user already has the app, it
will open the app to the corresponding screen.
Just add this to each page you want to show a banner:
<head>
<!-- Add this on each website where you want to show a banner -->
<meta name="apple-itunes-app" content="app-id=yourAppStoreID, app-argument=ThisPagesUrl>">
</head>
You can get your app store id from the iTunes Link Maker page.
https://linkmaker.itunes.apple.com/en-us
Android App Install Banners:::
Google also has their own version of a smart banner. They call it an App Install Banner. It pops up inside the user’s web browser when they visit your page.
Drawbacks:
The banner will only show up for repeat visitors to your website (at least two visits on two separate days within a two week window). First time visitors won’t see it. This prevents users from seeing a banner on every website they visit and getting app fatigue.
The banner only shows up in Chrome, so the user won’t see a banner if they are using a third-party web browser.
First, you need to create a web app manifest json file and host it on your site (manifest.json)
{
"name": "Example.com",
"short_name": "Example",
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "com.example.android"
}
],
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
The file can be hosted anywhere on your site.
You must have a 144x144 png icon with a mime type of “image/png” or it won’t display a banner.
Second, you need to add a <meta> tag to each page of your site linking to the manifest file:
<head>
<!-- Add this on each page where you want to show a banner. Make sure the link is correct. -->
<link rel="manifest" href="/manifest.json">
</head>
____________________________________________________________________________________________________________________________
https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e
____________________________________________________________________________________________________________________________
To create protocol (ex: breakingviews://) (CUSTOM URL)
https://stackoverflow.com/questions/8201724/how-to-register-a-custom-app-opening-url-scheme-with-xcode-4
____________________________________________________________________________________________________________________________
To create a universal link
https://www.appsflyer.com/blog/how-to-set-up-ios-9-universal-links-for-your-app/?gclid=Cj0KCQjw1pblBRDSARIsACfUG10DzXFSABVhwArHcTFHRjyx3urL9URR4Oa1VdOLgRNmQaj40cVe1B4aAg5iEALw_wcB
____________________________________________________________________________________________________________________________
Setting up App's Association File:
https://developer.apple.com/documentation/security/password_autofill/setting_up_an_app_s_associated_domains
Create a file named apple-app-site-association (without an extension). Update the file to contain the JSON representation of a dictionary listing the app identifiers associated with your domain for the webcredentials service. Place this file either in your site’s .well-known directory, or directly in its root directory. If you use the .well-known directory, the file’s URL should match the following format:
https://<fully qualified domain>/.well-known/apple-app-site-association
____________________________________________________________________________________________________________________________
Good tutorial:
https://medium.com/@abhimuralidharan/universal-links-in-ios-79c4ee038272
____________________________________________________________________________________________________________________________
Android App Links through Android Studio
https://developer.android.com/studio/write/app-link-indexing#java
@harshagarwal00
Copy link

thank you!
v useful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment