TODD KERPELMAN: Hey
there, iOS developers. Want to use a Firebase
Dynamic Link to deep link into your app? Well, you've come
to the right place. Let's get started
with Dynamic Links on this episode of Firecasts. [MUSIC PLAYING] Firebase Dynamic Links--
they're deep links that work the way you want them to. With one single link, you can
take users right into the app if they have it installed,
or the appropriate App Store if they don't. And better yet, they survive the
App Store installation process so your app can still grab
the original link context, even if your user had
to install it first. Sound good? It does to me, so let's
start building one. Now, there are three main steps
in implementing Dynamic Links in Firebase on iOS. First, we'll need to perform
some additional configuration steps, both in the Firebase
console and our Xcode project. Second, we'll need to
create an actual Dynamic Link for testing. And then finally, we'll add
some code to our app delegate to read in and parse
any Dynamic Links, and then pass that information
off to the rest of our app to handle. So we're going to
tackle the first two steps in this video
and then that last one in a follow-up video. So before we get started,
let's take a moment to understand how Dynamic Links
gets passed into your iOS app. There are going to be two
ways you'll see this happen. First is through
universal links. Now, you probably know
what universal links are. But if you don't, they're
essentially a way for you to map your website
to your iOS app by placing a little Apple
App Site association file on your website. Now, this file tells iOS
that any content found at certain locations
on your site are also available
in your app, so when iOS encounters these URLs,
it will open up your app instead of going to Safari. And then it'll pass
that URL into your app so that your app can
handle it and show the user the correct information. Now, don't freak
out if you're like, I have never set up universal
links from my website. You don't have to. See, what happens is when you
use Firebase Dynamic Links, all these links
start with a domain that looks a little
something like this. Well, Firebase will create
its own little mini-website at that domain. And then it will add its own
Apple App Site association file that points from this
domain right to your app. So when iOS runs into
a URL at this domain, it opens up your app, instead. So you don't need to
do the work required to set up your own
website for Dynamic Links. Firebase does most
of the work for you based on whatever is in
your Firebase project. The other way Dynamic
Links can sometimes make it into your app-- yes,
even in modern iOS versions-- is through custom URL schemes. Basically, you can think
of these like normal URLs, except that instead of
starting with https, they start with something
that's unique for your app. Your app basically
tells iOS that it's going to claim any URL that
begins with this custom scheme. And when iOS
encounters one of them, it'll pass it along
to your app to open. Now, by default,
Firebase Dynamic Links use your app's bundle
ID as your URL scheme. Now, you can change this
if your app is already using a custom URL scheme. But otherwise, I would
just stick with the default since it makes your
life a whole lot easier. So we're going to need to
make sure our app supports both universal links
and custom URL schemes. Now, I'm going to
start with an app where I've already
gone ahead and created a project in the
Firebase console and performed all the
initial setup steps. Don't know what
I'm talking about? Well, you should go watch this
video first and then come back. So let's set up our app to
receive universal links. This will involve
giving Firebase a little more info about
our app and deciding what domain we want to
use for our Dynamic Links. So I'm going to jump
into the Firebase console here and select my project,
then go into project settings and pick my iOS app. Now, if you didn't set
your App Store ID earlier, you're going to need
to add that here. If you're working
on a published app, select its ID from
the App Store. Otherwise, if you're fooling
around with the test app like I am or your app just
hasn't been published yet, pick the App Store ID
of your favorite app as a temporary solution. I'm going to go
with Google Photos here because Google
Photos is pretty awesome. Just don't forget to change it
back when you have a real App Store ID. Next, we're going to need
to set our App ID prefix. If you don't know what your App
ID prefix is, 98% of the time it's the same thing as your
Team ID, which you can find here in the membership section of
your Apple Developer account. But in some kind of a
rare and weird exceptions, you might have a
different App ID prefix than what's listed here. So to be absolutely
sure, you can look at the provisioning
profile you're using to develop this app. If you do a quick
look in OSX, you can grab the value right here,
which, hey, what do you know, is the same as my Team ID. So I'm going to go and enter
that value into the Firebase console. Now that this is
done, we're going to decide what domain we want
to use for our Dynamic Links. So head on over to
the Dynamic Link panel here and click Get Started. First up, Firebase
is going to ask us what subdomain we want to
use for our Dynamic Link. Now, a couple of notes here. First, you can't use this
subdomain in other Firebase projects. So I would generally
make this something specific to your project,
like the name of your app, and not, say, your company name. Also, depending on
what you enter here, you might need to add
some extra verification text into your
website's DNS entry to show that, yes, you really
are the owner of that brand. So, no, you can't
claim google.page.link. Nice try. In my case, I have to
be verified right away. So now Firebase is going
to create that little mini website with an Apple
App Site association file pointing to our app. In fact, we can check
it out right now. I'm going to type this
URL here into my browser and then add Apple App Site
Association afterwards. Now, if everything's
gone OK, you should see a little
something like this. See? This section here basically
says that any URL sent to this domain will go directly
to my app with this bundle ID on iOS if it is available. In fact, I recommend making
sure you see this site up and running before you move on
with the rest of the process. OK, next up we're going to need
to make sure our client can handle these incoming links. So open up your Xcode project. Select your target. Then over here in
the Capabilities tab, you're going to want to
turn on associated domains. Now, depending on the
account you're using, Xcode might just
think for a second and then enable this for you. But if that doesn't
work like this, it might mean that
you're going to need to talk to whoever on your
team has access to the Apple Developer Portal and ask
them to turn it on for you. Basically what this means
is your Apple Developer administrator person is going
to go over to the Identifier section of the Apple
Developer Portal here and either create
a new ID for your app or select an existing one
and edit it and enable associated domains
among the services. They might also need to
create a separate development provisioning
profile for your app that they'll download and
send to you to install, which you can usually do just
by double clicking on it. Either way, you should then
be able to turn on associated domains in your capabilities. And once you've
done that, you're going to need to enable
the specific domain of the dynamic link. So I'm going to start by
typing app links colon. And then I'm going to go
ahead and copy and paste the domain into here. Make sure you don't
have the https bit or the trailing slash. And you should have something
that looks a little like this. OK, so universal
links are set up. While we're at it, let's set up
support for custom URL schemes. This one's pretty easy. From within Xcode,
select your target. Then select Info. Now, down at the bottom
where it says URL Types, hit the plus sign. For your identifier,
you can leave it blank, but I prefer to give it
a name, like bundle ID. And then where it
says URL schemes, add your actual bundle ID,
dots and all, like this. Remember, this is
the custom URL scheme that Dynamic Links
uses by default. Great, we're all set up. In fact, you should
be able to test this. Now, a couple of things to
note about universal links is that they don't
work if you cut and paste the URL into
Safari, and they also don't work on the simulator. You're going to need
to click on these URLs from something
like the Notes app or iMessage on an actual device. So to do that, I'm
going to test this on a real iPhone, which I'll
show in a QuickTime window. Hi there. So first I'm going
to install and run the app with its new settings. Then I'm going to
switch over to Notes and I'll add this
URL to a new note. Now I can click on
it and you can see that iOS switches over my app. Hooray. Now, this URL isn't
a real Dynamic Link. It's got no data
associated with it. But it's enough to
make sure that I've got my universal links
working properly. Now, unfortunately, I
found that universal links can be kind of finicky
and are tough to debug. If universal links aren't
configured correctly, your link just
opens up in Safari and you don't really get
any explanation as to why. So if your app isn't opening
up when you click on this link, here are a few things to check. First, make sure you have the
right URL in the associated domain setting here and that
this capability is turned on in Xcode. Second, double check that you
entered the correct app ID prefix here in the
Firebase Console. Third, you might have
accidentally turned off universal links
for this domain. You can fix this by
long pressing your link until this action
sheet comes up, then select the option that
says open in your app name. And that will once again
reactivate universal links for this domain. By the way, be careful about
not clicking Open in Safari. That basically will
disable universal links for the domain on your
device and might actually be how you ended up
accidentally turning them off in the first place. Fourth, you can always double
check that the Apple app site association file has been
created in the right place. And fifth, apparently
there's a bug out there where iOS sometimes just doesn't
download the Apple app site association file associated
with your domain. Now, the current workaround
is to delete your app, restart your device,
reinstall your app, and then try it again, which
I know sounds terrible. So I might suggest
following the radar that's linked in the description
below just to see if that's still an open issue. It might not be by the
time you see this video. But assuming everything
is working OK, we are on to step two. Let's create a
real Dynamic Link. Now, there are ways to
do this programmatically. And in fact, I'm guessing
that a lot of the Dynamic Links you create will be
created that way, either using our client
libraries or the REST API. And we will talk about
that in a future video. But if you're looking to just
manually create a Dynamic Link, either to embed in
a social campaign or for testing
purposes, you're going to want to do that from
the Firebase Console. So I'm going to go
back into my project and make sure I'm in the
Dynamic Links section then click this New
Dynamic Link button. I can give it a
custom URL here and I think I'm going to give it the
very imaginative path of test one. Then I'll click Next. And here I can give it a name,
like my very first test link. But up here is this
Deep Link URL parameter. Hmm. So this URL
parameter is the data that's going to get passed
into your iOS or Android app. Now, you might expect this to be
like a JSON blob or something. But Dynamic Links requires
this to be a URL, and that's because if you were
to open this Dynamic Link on an unsupported platform
like a desktop browser, the link parameter is where
we would take you by default. That's why it's got to
be an actual web URL. So if you're a company where
the content of your app very closely mirrors the
content of your website, it's probably best if this
link parameter basically points to the corresponding
content of your website. For starters, it will take
people to the right place if they open this link
on a desktop browser. But it also means
you can probably piggyback on any universal link
logic you might have already set up to turn these links into
the right spot in your view controller. Your Android compatriots
can probably also do the same thing with
app links if they've got that set up on their side. Now, on the other hand, if
you're an app like, say, a game where your app's
content isn't really mirrored on your website, go
ahead and make it any link you want. I might recommend putting them
all in the same root directory so that you can easily
redirect people from these URLs back to a marketing
page or something if they were to open
this link on a desktop. Make sense? OK. Let's head back to our console. So for my deep link URL,
I'm going to add this very inventive value of
example.com/data. Hello equals world
and foo equals bar. Man, I'm clever. Next up, we're going to
specify what should happen if I open up this link on iOS. And I want this to
open up in my app, so I'm going to pick
that option and I'm going to select
from any of the iOS apps available in this
project, in my case, only one. Down below, I can choose what
to do if my app isn't installed. Now, I like the idea of sending
my users to the App Store. That's generally the point
of using these Dynamic Links. So I'm going to stick with that. Under this are some
advanced options where I can do things like
open a specific iPad app if I have one available, or
add some App Store parameters. But now this bottom
checkbox is to be used only if I want to
use a different custom URL scheme than the one that
Firebase Dynamic Links uses by default, which, as you
recall, is my Bundle ID. You shouldn't have to mess with
this unless your app is already using its own custom
URL scheme and you want to keep using that
for your Dynamic Links. If you have no idea
what I'm talking about, please just go ahead and
leave this unchecked. Next up we have some
options for what to do if a user opens
this link in Android. I don't have an
Android app, so I'm going to go with
this option here, which is to open the deep link
URL that I specified earlier. Finally, I have some
advanced options. Now, these social
meta tags let me specify a title, message, and
image to use in a Dynamic Link. And these are used
in two places. First, they're used by many
popular social networks to populate the preview
images and text that accompany this link. But then they're also used
to help customize the hey, we're about to go to
the App Store page that you're going to
see in the next video. So I strongly recommend
customizing these, even if you're not
planning on sharing this link on a social network. Track a campaign
with UTM parameters will let me specify
the source, medium, and name of this campaign
associated with this deep link. And this is used both in
Play Store campaign tracking and in Google
Analytics for Firebase. Finally, the Skip the
App Preview Page option lets me skip the interstitial
page that comes up before we take you to
the App Store, which you'll see in a moment. I would take their advice
here and leave this unchecked. It's a good page to have. Now I'm going to
click Create here. And then you can see I've got
my Dynamic Link ready to go. Nice. Now, Dynamic Links automatically
shortens this link for me to the nice URL path
that I specified earlier. But if I click on
link details here, I can see the full Dynamic
Link that this short link represents. I sometimes like to
refer to this full link when I'm curious about how
I might build a similar link programmatically. I can also check out
this debug option, which gives me this really
neat flow chart that describes exactly what's going
to happen in my link depending on the situation. I recommend checking that out
if your links aren't acting the way they're supposed to. But most importantly, I can also
try out this link on my device. And just like before,
it opens up my app. And just like before,
my app doesn't really do anything with
this link yet, so I think it's time we fix
that in the next video. So to review, we enabled Dynamic
Links in the Firebase console by adding our App
Store ID, app prefix, and picking our
own custom domain. Then we added the associated
domain's capability and our custom URL schemes
to our Xcode project. Then we created our
very first Dynamic Link in the Firebase console. And thanks to the magic
of universal links, we used it to open up our app. Coming up next, let's
actually do something with that incoming
link, as well as make sure the click on a
link without having the app installed first
process works OK. It's going to be a
thrill-a-minute video, so be sure to stick around. [MUSIC PLAYING]
