Firebase Dynamic Links: Getting Started

Learn how to use Firebase Dynamic Links to implement deep linking on iOS. By Danijela Vrzan.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 3 of 5 of this article. Click here to view the first page.

Defining the URL

As mentioned before, you don’t need to build a website for this tutorial. Instead, you’ll use the official raywenderlich.com website. If you’ve built a website and have a custom domain, feel free to use it for the rest of the tutorial.

In Xcode, open RecipeDetailView.swift. Add the following to the top of the file:

import Firebase

Next, scroll down to the end of the file. Inside createDynamicLink(), replace // TODO 1 with:

var components = URLComponents()
components.scheme = "https"
components.host = "www.raywenderlich.com"
components.path = "/about"

URLComponents constructs and parses URLs from their constituent parts. It’s part of the Foundation framework.

Here, you’re using the /about path to show raywenderlich.com’s “About” page as an example. Ideally, with this app, the page would show recipes, so if you’re using your own website, feel free to use the path to the page where you host your recipes.

Next, replace // TODO 2 with:

let itemIDQueryItem = URLQueryItem(name: "recipeID", value: recipe.recipeID)
components.queryItems = [itemIDQueryItem]

To find a specific recipe on a website or in the app, you need to specify it with the required recipeID.

Now, replace // TODO 3 with:

guard let linkParameter = components.url else { return }
print("I am sharing \(linkParameter.absoluteString)")

Here, you use the URLComponents object to create the URL.

Build and run. Tap a recipe card and click Share. Now, in your Xcode console, look for the print statement:

Screenshot of a Xcode console window showing print statement from the code and a URL parameter

Next, you’ll create a dynamic link.

Using Dynamic Link Builder API

You’ll be using the Dynamic Link Builder API to create Dynamic Links.

Still in RecipeDetailView.swift, replace // TODO 4 with:

let domain = "https://rayciperw.page.link"
guard let linkBuilder = DynamicLinkComponents
  .init(link: linkParameter, domainURIPrefix: domain) else {
    return
}

This defines a dynamic link component object with the URL you defined previously and the URI prefix, which is what you defined in the Firebase console under dynamic links: https://[your domain].

Don’t forget to replace https://rayciperw.page.link with your own URL.

Next, replace // TODO 5 with:

// 1
if let myBundleId = Bundle.main.bundleIdentifier {
  linkBuilder.iOSParameters = DynamicLinkIOSParameters(bundleID: myBundleId)
}
// 2
linkBuilder.iOSParameters?.appStoreID = "1481444772"
// 3
linkBuilder.socialMetaTagParameters = DynamicLinkSocialMetaTagParameters()
linkBuilder.socialMetaTagParameters?.title = "\(recipe.name) from Raycipe"
linkBuilder.socialMetaTagParameters?.descriptionText = recipe.description
linkBuilder.socialMetaTagParameters?.imageURL = URL(string: """
  https://pbs.twimg.com/profile_images/\
  1381909139345969153/tkgxJB3i_400x400.jpg
  """)!

Here’s a breakdown:

  1. You define a DynamicLinkIOSParameters object and assign it a value of your app’s bundle ID programmatically.
  2. The link needs to know where to send users who don’t have the app installed. For that, you use appStoreID. If you have your own app on the App Store, change it to match your app’s ID.
  3. Then you use socialMetaTagParameters to define how your link will look when shared in a social media post. You can add a title, description and an image from a URL. If you had a website with the recipes, you could assign a proper image URL for every recipe. In this case, you’re using a raywenderlich.com logo.

There are several optional parameters you can add to your dynamic link. To learn more about these parameters, see the Firebase Documentation.

Finally, replace // TODO 6 with:

guard let longURL = linkBuilder.url else { return }
print("The long dynamic link is \(longURL.absoluteString)")

Here, you retrieve your required dynamic link!

Build and run. Tap a recipe card, then tap Share. Check your Xcode console output and look for the output:

Screenshot of a Xcode console window showing print statement from the code and a full dynamic link

You could use this link as-is because it’s a functional dynamic link. However, it’s long and doesn’t look good when you share it.

Firebase gives you a way to shorten it and make it look more appealing.

However, to shorten it, you need to make another network call to Firebase. You need to send your long dynamic link to the network service, which will take that long link and return a shortened version.

If your user had poor network conditions, the shortening service might take too long. At this point, your user might give up and completely uninstall your app. Remember, the whole point of dynamic links is to save your users time, not to make them more frustrated.

It’s up to you to decide if you like the long dynamic link or if you want to shorten it.

You’ll learn how to shorten it next.

Shortening the URL

To shorten a long dynamic link, pass it to .shorten(completion:).

Still in RecipeDetailView.swift, add the following below the last code you added:

linkBuilder.shorten { url, warnings, error in
  if let error = error {
    print("Oh no! Got an error! \(error)")
    return
  }
  if let warnings = warnings {
    for warning in warnings {
      print("Warning: \(warning)")
    }
  }
  guard let url = url else { return }
  print("I have a short url to share! \(url.absoluteString)")

  shareItem(with: url)
}

The closure is straightforward. You need to check for any errors or warnings and make sure you get the URL. Print the final URL so you can test your app in the simulator.

At the end of the closure, you call shareItem(with:), a helper method that’s already defined. It opens a standard share sheet.

Your app now has all the functionality to share dynamic links and redirect users if they don’t have the app.

Build and run. Tap Share and you’ll see a share sheet.

You can see how your shareable link looks in the share sheet, with all the optional parameters you defined:

Simulator screenshot showing the basic share sheet look when you tap a share button in your app

In your Xcode console, look for the print statement to see how your final shortened dynamic link looks:

Screenshot of a Xcode console window showing print statement from the code and a shortened dynamic link

Now it’s time to see your app in action.

Seeing Your App in Action

To see the whole workflow, place your Simulator and Terminal side by side. Make sure your Simulator is showing the home screen and not running your app.

Copy and paste the following command to your terminal window, replacing [your shortened dynamic link] with the short dynamic link from the Xcode console:

xcrun simctl openurl booted [your shortened dynamic link]

Press return and see the app open:

Gif showing both simulator and terminal side by side and running a commands to open the short dynamic link and trigger the app opening in simulator

To see what happens when you don’t have the app installed, remove Raycipe from your Simulator. Long-press Raycipe and choose Delete App.

Follow the same instructions and use the same short dynamic link to run the command in your terminal window again:

Gif showing both simulator and terminal windows side by side and how dynamic link open a webpage previously defined when the app isn't installed on the phone

You’ll see the web page the dynamic link uses to guide the user to install your app. If you click OPEN, it’ll take you to the App Store. Unfortunately, that functionality isn’t available on the Simulator but you could try it on a real device instead.

If you don’t have a paid Apple Developer account or are unable to run your app on a physical device, here’s an example of how your link would look when you share it or receive it in Messages:

Screenshot of an iPhone XR showing how the dynamic link looks like when you share it in Messages or when you receive it from someone

Next, you’ll interpret your dynamic link.