[MUSIC PLAYING] ZOEY FAN: Hi, I'm Zoey, product
manager on the Flutter team. CHUN-HENG TAI:
Hi, I'm Chun-Heng. I'm a software engineer
on the Flutter team. I'm also the engineering
owner of the GoRouter package. ZOEY FAN: Chun-Heng
and I are here to tell you more
about deep links. Before that, I have
some questions for you. Do you have an app? Do you also have a website? Let's say you have both. You own an online shop that
sells beautiful accessories and home goods. If a potential buyer comes
across one of your products when browsing on their
phone, either via search or a promotion link, when
they click on the link, the default behavior
today is going to open the link in
the mobile browser. But is that the best
user experience? Our recommendation is send your
users to the specific product page on the app. Apps usually have a much
smoother user experience than mobile websites. Besides, we've seen that
users who are directed to apps are twice as likely
to make that purchase. If you want to send
your users to the app, you will need deep links. So Chun-Heng and I will
give you a deep dive into Flutter deep linking. We will talk about why it is
important to have deep links and walk you through the steps
to configure your Flutter app to handle deep links using
best practices on both Android and iOS. Let's go over some terminology. A deep link is a URI that
points to a specific resource deep within your app. On the web, most links
are naturally deep links. But on mobile, you have to do
a small amount of extra setup. This URI contains
scheme, host, and pass, and opens the app to
a specific screen. A universal link is
a type of deep link that uses HTTP or HTTPS and
is exclusive to Apple devices. An app link is similar
to universal link, but it is for Android. There are different
types of deep links, but for the best
experience, we highly recommend implementing
universal links for iOS and app links for Android. They're more secure and
specific because you verify ownership of the domain. This helps securely associate
your domain with your app. Plus, they provide a
seamless user experience. App links and universal links
use the same URL as your web links, so if your
app cannot open, users will be taken to the
mobile site's landing page. Technically speaking, you
can use custom schemes to create custom URIs to link to
any in-app content you choose. These are easy to set up
and might be a good solution if your website and apps
don't have a one on one match. But they're less secure. Without authorization required,
anyone can claim custom schemes and may use to direct traffic
to apps other than yours. Someone who clicks
on the deep link but doesn't have
your app installed will also get an error page. So universal links and
app links are best way to implement deep links. Next, let's talk
about the benefits of adding them to your app. Deep links allow you
to drive more traffic into your mobile app. They can be used in multiple
use cases, such as marketing, emails, and SMS. And more traffic
to your mobile app means more in-app purchases,
more checkouts, and more sales. With deep links, you can
include a target URL parameters to create a personalized
app experience. Remember, users
tend to delete apps that don't make it easy to
complete their central tasks, whether that's interacting
with other users, verifying some data, or adding
the right items to their cart. With deep links, you can
give your application code all the logic it needs to
help your users accomplish their goals in your app
with minimal effort. Last but not least, deep links
drive long-term engagement and boost the
return on investment you get from your app. Like I mentioned earlier,
users who are directed to app are twice as likely
to perform actions as users who are directed
to the mobile web version of the same content. So the conversion is much
higher for you and your users. I know you can't wait to see
the code, so over to you, Chun-Heng! [MUSIC PLAYING] CHUN-HENG TAI: Thanks, Zoey. Today, I'm going to share
with you on how to set up deep links in Flutter. The advantage of
using Flutter is that you can share most
of your business logic with the same Dart code. Although the process of adding
deep link on Android and iOS requires some extra steps,
they are very similar. In this session, we'll
talk about them separately. First, let's start with
a high-level overview. A deep link workflow consists
of two parts, the web setup and the app setup. The web setup requires
you to own a web domain and host a specific web file
for both Android and iOS. This part of setup is
focusing on redirecting user from your website to
install app on devices. The web file contains
the app ID and package name of the app that
will be redirected to, so no other app can hijack
the redirect requests. That's the web setup. The app setup involves
adjusting the project parameter and writing Dart code to handle
redirect from your website. The project parameters
specify which web domain is
allowed to redirect their user to this app. Most of the setup
are in place to make sure deep links are secure
and no other third party can tamper that process. Now we have talked about the
deep link at a high level. It's time to dive
into details on how to actually set up deep links. Let's start with Android. Using the example earlier, you
have built an online shopping app, and the app has two
screens, a product overview and a detailed view when
user click on the product. Let's say you want to add a
deep link to the detailed views. To do that, first you need
to implement a routing table in your Dart code. You can use
MaterialApp.router API or any third-party routing
package of your choice. For this example,
we use GoRouter. In GoRouter, you can
define how a path will be mapped to a specific widgets. Assuming the ProductList widget
represents the product overview and the ProductDetails widget
represent the detailed view of our product, in
this code, slash maps to ProductList and
the slash colon id maps to the ProductDetails. The slash colon id
means the GoRouter will store any non-slash string
after the first slash, and lets ProductDetails
widget assess the string in its context. To learn more on how this
is actually implemented, you can check out the Flutter
samples in the description below. Once your Dart code
can handle the URL, open the AndroidManifest file. Your manifest file
should look like this. Inside the manifest
are the intent-filter and the meta-data tag. The meta-data tag opts in for
Flutter's default deep link handler. Don't add this tag
if you are using another third-party plugin
to handle deep links, as this tag will
override that plugin. In the intent-filter, you just
specify your web domain name. You can also specify
an allowed path to filter out such a URL
from launching this app. Now, we have covered the
app setup for Android. Let's move on to the web setup. For your web setup, you need
to host assetlinks.json file on your website. It needs to be
hosted at this path. And the file should contain
data similar to this. The package_name value
should match the application ID of your app. The applicationId
should be defined in the build.gradle file. Back to assetlinks.json file. In the sha256
fingerprint section, you need to replace it with
the fingerprint of your own app signing key. This is the key you
use to sign the app, and there are two
way to do that. Depend on which
way you are using, you need to follow different
path to get the fingerprint. If you choose to automatically
sign your app in Play Store, you can find the fingerprint
on the Play Developer Console under the App integrity
in Release panel. If you sign your app locally,
you can get the fingerprint by using this command. Once the file is hosted, make
sure the file is publicly accessible through a browser. And that is all for setting
up deep linking in Android. To summarize what we just did,
first we wrote a Flutter app. Second, we add intent-filter
and meta-data tag in AndroidManifest. Finally, we host
assetlinks.json file with package name
and fingerprint. So now you have
learned about how to set up deep link in Android. Let's move on to iOS. In iOS, you also need to go
through both app setup and web setup. Although both have a
different front entry, they should feel similar. Let's start with app setup. Since Flutter is a
cross-platform framework, you can reuse the same Flutter
code for both Android and iOS. So let's use the same code
for the online shopping app. The goal is to add deep link
to the product detail view. Launch Xcode and open
the runner.xcode project in [? our ?] folder
inside the Flutter folder. In Xcode, navigate to Info file. Add a key,
FlutterDeepLinkingEnabled, with Boolean value set to Yes. Similar to Android, this is to
[INAUDIBLE] Flutter's default deep link handler. Next, go to Runner, click
on Signing and Capability, click Add Capability,
find Associated Domain from the list and double-click. Once the box is
added to the screen, type your web domain
in the text box. That should cover the
app setup for iOS. For web setup, you need to host
the apple-app-site-association file on your website. It needs to be
hosted at this path. The file should contain
data similar to this. The appID is the ID of your app. It's the combination of
the team ID and bundle ID. You can find a
bundle ID in Xcode. The team ID is the ID of
your Apple Developer team that is used to
build and register your app onto App Store. You can find the team ID by
visiting Apple's Developer account page and you can find a
link in the description below. Once you have your app ID,
the last thing you need is to set the allowed path. In this example, allow slash
followed by two character. Once you host a file
on your web domain, make sure the file is publicly
accessible to your browser. And that is all for setting
up deep link in iOS. Let's do a quick summary. First, write a Flutter
app or use the same app you have built for Android. Second, add an
entry in Info file. Third, add the
associated domains. Lastly, host a web file with
your app ID and allow paths. That's it. Now we have talked
about how to set up deep links for Android and iOS. You may wonder what
the process is like if I want to add a
second deep link. How difficult would it be? Fortunately, at
this point, we have done most of the groundwork
to enable deep links. We just need to modify
a bit of existing code. Let's say you create a new
page to display product based on category and you want
to also add a new deep link to this page. Assume you already have
built a widget called ProductCategoryList. All you need to do is to add
the widget to your Dart code. After that, if you are
building for Android, you just need to make
sure the intent-filter in AndroidManifest
allows for new path. If you are building
for iOS, you need to update the web file
hosted on your website during the web setup to also
allow the newly added path. Congrats, you just added a
new deep link to your app. That is all I want
to cover today. Back to you, Zoey. [MUSIC PLAYING] ZOEY FAN: Thank you, Chun-Heng. I want to share some
stories about how companies have transformed
their business with deep links. Boozt, the leading Nordic
online department store, they implemented
deep links and saw their app has a 4.5
times higher conversion rate compared with mobile web. Average order value is also two
times higher than mobile web. Boohoo.com is a leading British
online fashion retailer. After implementing deep
links, their mobile app has a 5.5 times higher
conversion rate than web. This has resulted in a
25% revenue increase. Deep links create a better
user experience and engagement with your app. In this video, we showed how to
implement deep links in Flutter with app links and
universal links. If you wish to learn
more, please check out the links in the description
below for deep linking recipes from the Flutter Cookbook. Thank you, and bye-bye now. [MUSIC PLAYING]
