Last active
May 27, 2022 13:39
-
-
Save savyounts/0ad5cb162e3002e5c9a472c9cbfc8f76 to your computer and use it in GitHub Desktop.
Deeplinking
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you!
v useful!