Deeplinks with Ionic 2+

02 June 2017 on Ionic2. 5 minutes

Show The User What They Want

With any great ad or advertising scheme, your trying to sell a specific product. And if that product is inside of an app, you want to guide the user all the way through any process to give them exactly what they want instead of making them find it.

This is the problem that we faced at 38Plank. We put together this killer ad advertising one of our trainers program, Katie Rings Working Girls Guide to Fit.

Crazy good ad right? Who doesnt want to do that workout program. But when the user says “Yes” and they click on the ad, where do they go?

Straight to the app, thats great for downloads if thats all your after, but if they want to buy the program how do they even find it?

A deeplink is a way to give a user a link to a certain section of your app that a user can respond to. So we could provide a link to a user that looks something like:

https://api.38plank.com/deeplink/working+girls+guide

And two things will happen when you click it. Your phone should give you the option to “Open In App”, and then when it goes to the app you can respond accordingly, taking the user directly to the content specifically.

To better understand what is happening, we need to dive into what both Android and iOS call their deeplinks and how to setup our Ionic project to handle them.

Ionic-Native

There are two things to think about when setting up Deeplinks in your app.

Android uses custom URL schemes to link to the product, (ex. 38plank://…), and since iOS 9.2 Apple supports whats called Universal Links (ex. api.38plank.com).

On both phones when you click a link like the above example, the phone recognizes the url scheme and is supposed to open up the app instead of a browser. Now generally, this pretty much just works post configuration on Android, but on iOS, there are lots of things can go wrong.

Configuration

Configure you app like the cordova plugin requested.

ionic plugin add ionic-plugin-deeplinks
--variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com
--variable ANDROID_PATH_PREFIX=/

URL_SCHEME is the scheme that will open an app on an android device, and the DEEPLINK_HOST matches the url you want to link to both your android app and the Universal Links for iOS

After we establish the url schemes and the deeplink schemes, we need to then make apple and google trust that we own those domains. For apple, this involves creating an “apple-app-site-association’ file, and for google, a ‘assetlinks.json’ file.

So if our domian is daniel-craig.com, we need to verify that we own it by serving these files at the domains below

danile-craig.com/.well-known/-link-

Example files will look like this as a nodejs response.

// daniel-craig.com/.well-known/assetlinks.json
    getAndroidLink(req: Request, res: Response, next: NextFunction) {
        const androidAssocationFile = [{
            "relation": ["delegate_permission/common.handle_all_urls"],
            "target": {
                "namespace": "android_app",
                "package_name": "--config.xml package name--",
                "sha256_cert_fingerprints":["11:22:33:44..."]
            }
            }];

        res.type('application/json').send(androidAssocationFile);
    }
// daniel-craig.com/.well-known/apple-app-site-association
    public getAppleLink(req: Request, res: Response, next: NextFunction) {
        // Configure Universal Links for ios/android
        let appleAssociationFile = {
            "applinks": {
                "apps": [],
                "details": [
                    {
                        "appID": "<team-id>.<config.xml package name>",
                        "paths": [<routes>, '*']
                    }
                ]
            }
        };

        res.json(appleAssociationFile);
    }

Where the config.xml package name is the one you setup when you originally created your ionic project, and the team id is your apple team id which can be found in the Membership Details section of your apple account.

After you configure this, make sure to delete and reinstall your app. It may take a few hours for apple to register and accept you app-site-association file so don’t worry if it doesnt work right away.

To test, copy a link that should work into your Notes app on your phone. Then “Long Click” the app, and an option to Open in “" should appear.

// Long Click Image

Now that you have configured this, you are going to hear two things I will be repeating a few times:

** On Android, It pretty much just works now **

** On iOS, so many things could still go wrong **

If your app doesn’t open up automatically on Android, you probably configured something wrong. If your app doesnt automatically open up on iOS, there are so many edge cases to consider, all because apple seems to want to frustrate developers.

First, there are many scenarios in which universal links will just not work at all.

  • Pasting the link directly into safari
  • Opening the link from an app with a WebView (Slack, etc…)
  • Some apps block access specifically (Instagram)

On top of these edge cases, the user can accidentally disable universal links. If they tap “www.daniel-craig.com” accidentally in the top right corner of the app, the user will navigate to the website and then Universal Links will be automatically disabled.

// Disabling Universal Links

To reset this, you need to long click on the link as I mentioned above, but thats not something you could tell a user to do.

Along with these edge cases, their is one other UX case that we have not talked about, but is probably very important to you as an app developer. What if the user doesn’t have the app yet?

In our experience this is actually the most common scenario for a user to be in. To solve this problem, (and many of those iOS edge cases) we need to look at whats called Dynamic Links

Dynamic links survive the install process, so a user can go from not having the app, all the way to the content you want them to see.

Check out my next blog post on Dynamic links to see more.

Also, as an example, here is a dynamic link that works for 38Plank

https://38plank.app.link/UNFG0dgT8D


Previous

Part 2: Push Notifications with Ionic 3

In Part 1 of this blog post, we looked at how to configure push notifications on iOS and Android with Ionics Push notification service. Then we sent a push notification to every device using Ionic push.