Universal Linking with Firebase and Ionic

Question

Additional Findings (After Initial Post)

---

I used this site https://limitless-sierra-4673.herokuapp.com/ to validate the link. Got an error about application/pkcs7-mime. Not sure how to change this with Firebase Dynamic Links

---

Im trying to set up universal linking with Firebase's dynamic links.

---

1. Firebase Setup

---

I've set up the app with Firebase and I have the link: https://e2x6f.app.goo.gl.

When I open the link I get a 400 Error but If I go to https://e2x6f.app.goo.gl/apple-app-site-association I get this:

{"applinks": 
    {
        "apps": [],
        "details": [{
           "appID": "8CK4RLPU2T.com.turnmusicapp.15499",
           "paths": ["/*"]
        }]
    }
}

So I think its ok. I've checked to make sure all the information is correct.

One problem is, when I use app's link to check search validation it also returns a 400 error - not sure if this is ok or not.

---

2. Xcode Setup

---

Anyways, I enabled Associative Domains on my app:

Then under "Info" -> URL Types I added:

---

3. Ionic Setup

---

Here is my Ionic info:

global packages:

@ionic/cli-utils : 1.4.0
Ionic CLI        : 3.4.0

System:

Node       : v8.1.2
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim    : not installed
npm        : 5.0.4

So I installed the Deeplinks package and have that all setup. I know it's working because I can use links like turn://home in the Safari browser and it will take me to my app. I'm not sure if I need to do anything else here. I've updated the widget field in my config.xml file to this:

<widget id="com.turnmusicapp.15499" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Does the id field need to include my app prefix?

Result

---

So I'm running my app with ionic cordova run ios --livereload, I type the message into Safari and It takes me to a 400 error page. I've tried sending the link as an iMessage and that does the same thing.

Thanks for the help!

Answer 1

You have a few misconceptions — let's clear them up in order:

1. The https://limitless-sierra-4673.herokuapp.com/ validator is outdated — application/pkcs7-mime hasn't been required for years. Check Apple's official docs and you'll see application/json has been the requirement since iOS 9. Dynamic Links certainly won't have any configuration issues on the server side so you really don't even need to check this part, but a more updated validator is available here if you want it (yes, https://e2x6f.app.goo.gl validates perfectly).
2. The URL https://e2x6f.app.goo.gl is not a Dynamic Link; it's simply your link base domain. Real links will look like https://e2x6f.app.goo.gl/A97Q (short version) or https://e2x6f.app.goo.gl/?link=https://example.com/path/to/app/content&ibi=com.turnmusicapp.15499&ius=turnmusicapp&ad=1&isi=1121012049&ifl=https://example.com&apn=com.turnmusicapp.15499&al=https://example.com&at=affiliate_token&ct=campaign_text (full length). While a 400 error for the base domain is lame UX, it's expected. You need to actually create some links.
3. The Apple tool is the "App Search API Validation Tool", not the "Universal Links Validation Tool" (which doesn't exist from Apple). The results from this tool have no connection to whether Universal Links work — it's checking something completely different.
4. There is no official Dynamic Links package for Ionic, and the Deeplinks package is not designed to support it. You're off the edge of the map trying to get these working together. You might look at this new community plugin.

Alternatively, take a look at Branch.io (full disclosure: I'm on the Branch team). We do everything Dynamic Links does plus far more, and there is an actively-developed Ionic module that will handle all of this for you.