Signup for the Ionic Newsletter to get the latest news and updates!

  • http://www.raymondcamdencom/ Raymond Camden

    I think maybe you skipped over something important in the beginning. You say:

    “A URL to one of those Hats might look like https://ionic-hats.com/hats/very-nice-hat.

    We can actually launch our app when someone navigates to this URL on Android or iOS and display the app version of the Hat product page. ”

    Ok, so given that I’ve built my hat site, how exactly do I launch the custom URL when you’ve requested this URL? And even if there is some magical way of doing that (maybe a META tag?), isn’t the “do you want to open this in our app” thing pretty annoying?

    I’m assuming I’m just misreading you though. 😉

    • yesimahuman

      Hey Ray, if I understand the question, this is on you to decide how to handle this. You can either automatically redirect (assuming the user hasn’t disabled that functionality for your app, by default it’s on), or you can have a button to “open in app.”

      For the first example, Amazon does this if you hit a product link from mobile (for example, in a google search). They don’t give you the option of opening in the app, they just do it. This is configured (on iOS) through this file: http://amazon.com/apple-app-site-association. You don’t actually “do” anything, iOS does by matching paths in this file to paths navigated to in the browser.

      Imgur, by contrast, gives you the option to open in the app instead of doing it automatically: http://m.imgur.com/gallery/FaBrG, though I believe that was a recent change as they used to automatically open it. It might also be the case that this was a local setting that I forgot I set (universal links is incredibly finicky and if you click the upper-right label in the status bar after a redirect it will go to safari always instead).

      If you look at the imgur site, they redirect to the app through a custom URL scheme link: imgur://imgur.com/gallery/FaBrG

      Did that help? I believe Smart App Banners through meta tags are redundant with universal links, but I might be wrong (would love someone else to chime in!) I’m noticing fewer of them in the Universal App Links era.

      Also, you never trigger the user to the app of your own accord (except through browser exploits). It’s always either a passive operation, or giving the user a link to click.

      • http://www.raymondcamdencom/ Raymond Camden

        Yep – it does. Thank you for the examples!

  • Young Park

    wow. awesome resource!

  • imakkie

    Great work guys 🙂

  • http://julienrenaux.fr/ Julien Renaux

    What about the apple-app-site-association file for UL?

    • yesimahuman

      The link to the apple docs explain it all, but perhaps worth us doing our own tutorial…

  • Mike M

    Great article! thanks Max for sharing! I know I’ve spent time on this, and knowing it is all from the ionic stack will make it that much easier, especially on integrations with other ionic services like ionic push! We all love simplicity!

  • Jeremy S

    Great tutorial… FYI, the Ionic1 DeepLinks Demo LINK (https://github.com/driftyco/ionic1-deeplinks-demo) doesn’t work

  • Keith D. Moore

    Is deferred deep linking going to be supported through Ionic Services? I’m talking about the ability for a user to click a link that will take them to the appropriate app store and allow the user to download the app. Then when the app any request params are retrieved from a service. This is what https://branch.io/ does. They do a ton of other things but this is one service they provide.

    • yesimahuman

      Yes, it’s coming!

      • Steven Sanders

        How far off do you think that is?

      • Jet Balagtas ✈

        do you happen to already have a rough ETA on this?

      • Anirudh Goel

        it’s over a year, @yesimahuman:disqus is it going to come in any time sooner?

  • http://bcliks.blogspot.in/ bCliks

    ionic 1 demo link not working. Please check and update. https://github.com/driftyco/ionic1-deeplinks-demo)

  • Steve Melnikoff

    Hi Max, echoing the other comments: great article! Quick question about the apple-app-site-association manifest file. I was reading Apple’s docs which say that manifest name should be simply: ‘apple-app-site-association’ without a file extension, and (for iOS 9+) to be sent as ‘application/json’. Do I have something confused when I studied your express.js example gist?

    • yesimahuman

      Hey Steve. You are correct that there is no file extension. However, on the mimetype, I got conflicting info on this, and struggled to get iOS to detect the universal link when using the JSON mimetype. From other posts online, I read to try the application/pkcs7-mime mimetype, which could be a hold over from when the file required a certificate to be attached. Let me know if you have any additional info or learning on this.

  • Davo

    Thx for the awesome plugin and tutorial! Just gonna leave two comments here, in case someone gonna struggle as much time as I did on following remarks. 1. If you target iOS9 and use https, you don’t need to sign your apple-app-site-association. Furthermore the file should not, in that case, returned with a header content “application/pkcs7-mime” but “application/json”. 2. If you define for example an URL_SCHEME “mytest” and you face the same problem as I did, that the application didn’t opened, when you perform the simulator “Contacts” test described above, try to modify your link from “mytest://” to “mytestapp://”, that solved my issue

  • http://www.codingandclimbing.co.uk Dave

    Just tried this on Android and it doesn’t pass through the parameter at all, just undefined. Must be something missing from your walkthrough.

  • Daniel C

    As seen in the screenshot above, the “open in app” toolbar that appears in safari lacks the application name. I have the exact same problem. Do you know where the app name is pulled from? I’ve retraced all the steps and don’t think I’ve missed anything.

  • uzer_t1

    Android was pretty easy to setup, iOS was painful.
    I would recommend adding a backend example in these tutorials so that ionic users can easily set up the entire process.

    I also did not use ‘application/pkcs7-mime’, but instead used ‘application/json’

    For any node / express users this is what worked for me.

    var assetlinks = fs.readFileSync(__dirname + ‘/public/assetlinks.json’);
    var applesite = fs.readFileSync(__dirname + ‘/public/apple-app-site-association’);

    app.get(‘/.well-known/assetlinks.json’, function(req, res, next) {
    res.set(‘Content-Type’, ‘application/json’);
    res.status(200).send(assetlinks);
    });

    app.get(‘/.well-known/apple-app-site-association’, function(req, res, next) {
    res.set(‘Content-Type’, ‘application/json’);
    res.status(200).send(applesite);
    });

    • Ari S

      Is this your code on the server side?

      • mark candaras

        yes

  • jasonwastaken

    Thanks for the great article, Max! Question: what will this experience be like for users on pre-6.0 Android?

  • Tiago

    Thank you for the tutorial! That was awesome. I have only one question. I have my login logic inside my app.component platform.ready().then().. so I need to know if the user is using a Deeplink to open the app or not. Because I need to decide which logic to execute, the deep link routing or the normal logic. For the life of me I can’t seem to find a simple solution for this.

    Thank you so much

  • vishnu

    After Install the plugin . I’m getting the error Unknown provider: $cordovaDeeplinksProvider

    • Andres

      were you able to resolve this? I’m getting the same thing.

      • Ladna Meke

        I’m guessing this plugin shouldn’t work in the browser and you’re testing in browser. Wrap the plugin initialization in function that checks if we’re in cordova or not

    • Aleksander Kostov

      Any luck?

    • Jacques De Villiers

      I also have the same thing. Any help on this would be much appreciated

    • Wade Novak

      If you’re not using Ionic Native (with Ionic 1 or 2) you most likely need to use the non-Ionic / Angular config listed here: https://github.com/driftyco/ionic-plugin-deeplinks#non-ionicangular. If you install the plugin IonicDeeplink should be available for you.

  • queejie

    There are a number of unanswered questions about getting this to work for a web based app that are not addressed here, in the docs, or in the forum. (In the forum, questions simply go unanswered.) It would be great if there were more documentation or a complete example app that allowed for true URL based navigation. Or, if it isn’t supported, it should be stated clearly.

    I know that one problem is that the evolution of the Angular 2 router has resulted in constantly changing conditions, so there are a number of information pages on the net that are now incorrect. These decoys can really be a time sink, both in reading and in trying to follow obsolete advice.

    Following the example in this blog post, I’ve been able to see URLs generated in the location bar, but entering those same URLs manually results in 404’s.

    Here are some of the unanswered questions:

    1.) Is installing the plugin necessary for apps that are to be used on the web platform only?

    2.) Does one need to “add browser” platform to get this to work properly, or does the www directory that one uses with ionic serve work as well?

    3.) If one does need to add the plugin to get it to work fully for the browser platform, how can the dev server be distinguished from that used for production? The command line appears to hard code a domain name.

    4.) The DeepLinking document page states that it isn’t a router, that it provides some sort of mysterious breadcrumb navigation. I have read and re-read it multiple times without understanding what it is. If it isn’t a router, what mechanism does support the ability to go to a specific page in an app?

    Thanks for reading. I have given myself until the end of the day to make a yea-or-nay decision on using Ionic, or switching back to Angular alone. It would be great to know there is some support, somewhere, for these kinds of questions.

    • jpradeep

      I have exact same questions that queejie asked 4 months back here. Web-based app and deep-linking are both essential for a critical requirement in the app. I use Ionic 2 for other applications and hope that it is possible to use it for this as well. Kindly share if anybody has figured this out.

    • David D

      Exactly what I was thinking after browsing this incomplete blog post. Does anyone was successful to handle URL navigation with a non-native ionic web app?
      Why the f*** it’s written nowhere if it’s possible or not?

  • Janelle Thorn Contreras

    For Android, I was able to lunch my app through the emulator when I type into terminal the command you have in the tutorial:

    adb shell am start -a android.intent.action.VIEW -d theurlIsetup://

    However, if I open up chrome in the emulator and type theurlsetup:// into it, I get ‘This site can’t be reached in the browser instead of the app opening up. Same if I download the app to my device and try it. Ideas on where to look? I feel like I am missing something really simple.

    • Aymeric Figerou

      Did you find any solutions?

  • Philip Chen

    Hello,I have download the ionic 1 example and restore the plugins. After I type ‘ionic serve’ in terminal, the demo app is running on the web. My question is. What should I do in order to execute the Deeplinking functions. Thank you….

  • Brad

    can anyone explain to me where the “routes.js” plays its role? I feel like I have done everything but still no success… or is it not needed if I have a real server only needed for a Node server?

  • Oscar Manuel Aguillon

    hi, the command add sell am … wokrs well but when we put te last parametter (adb shell am start) doesnt work beacuse we dont know what is it or where can we get it.

  • shi11

    this blog post really helped me debug my setup issues, in particular, checking my robots.txt and making sure to use the TeamID http://building.usebutton.com/debugging/ios/deep-linking/links/universal-links/2016/03/31/debugging-universal-links/

  • armando restrepo

    Excellent article!!! I was able to have all this working thanks to this article…I have a little problem and maybe some of you had it too and can help me…only in ios when I run the app from Ionic-cli it opens safari but if I run it directly from XCode it open the app without problems.

    Any help?

  • Artur Alkaim

    Hi!
    Is it possible to click in the link inside the app and it redirects to the right item? In this case if I have a clickable link like ionichats://app/hats/very-nice-hat in the home page would it go to the right hat without reloading the app?

  • mx

    Is this way still the latest and greatest ionic 2/3 has to offer regarding deep linking?
    I’m currently using deep linking only for the browser based version of the app.
    Thank you for the update!

  • Justas Kuizinas

    This tutorial isn’t completed, do I need setup anything on the backend or not if I want deep links working for android?

  • adjwilli

    This was a really helpful guide, but it’s a bit incomplete with Ionic 3. Would you mind updating it for the latest version. The part about adding links in the app.module.ts would be great. I have something the following code that seems to work:

    IonicModule.forRoot(MyApp, { locationStrategy: 'path' }, {
    links: [
    { component: AboutPage, name: 'AboutPage', segment: 'about-us' },
    { component: HatDetailPage, name: 'Hats', segment: 'hats/:hatId' },
    ]
    }),