App clips are small parts of an app that offer a streamlined, direct experience and help people get what they need at the right time. Learn how you can invoke an app clip through real-world experiences like app clip codes, NFC, and QR codes, or have them appear digitally through apps like Maps or Safari. We'll show you how to handle links in your app clip and demonstrate how to set up your associated domains. And discover how you can configure app clip experiences in App Store Connect, add app clip banners to your website, and thoroughly test your app clips through TestFlight.
To get the most out of this session, you should have experience using Universal Links and associated domains. For a primer, watch “What's New in Universal Links” from WWDC19.
Voiceover: Hello, and welcome to WWDC. Ada Chan: Hi everyone. I'm Ada, an engineer on App Clips. I'll be joined by my colleague Luming today to show you all you need to know about linking to your App Clips. App Clips provides an entry point for your users to experience your app with minimum friction. When your users need your app's functionality to perform a task, your App Clip is presented to the user seamlessly with a deep-linked navigation. This session covers what you have to do to handle linking into your App Clip and configure the linking experience. First, let's take a look at an example of how one can perform a task with an App Clip. Imagine you come across a smoothie stand. You really want a nice, cold smoothie. You find an NFC tag with a sign that says, "Tap here to order." You tap the tag and the card pops up at the bottom of the screen which has a brief description of the smoothie-ordering App Clip. When you tap on the Open button, the App Clip is launched on your device taking you directly to the smoothie ordering page. You complete the purchase with Apple Pay and now you have a smoothie in your hand. The linking magic happens in these steps. The NFC tag actually encodes a URL that's registered with an App Clip experience, which I'll explain later in this session. Once you tap open, the App Clip gets launched with a URL that is passed via an NSUserActivity and the App Clip takes you directly to the ordering page. Besides NFC, active links can also appear in other places. These are your URLs that could be encoded in physical tags or visual codes or associated with a physical location on the map. Let's go through each of these linking methods. As I mentioned in my example earlier, an NFC tag can encode an App Clip URL that users can tap their phones on to open an App Clip. An App Clip URL can also be encoded in a QR code, which people can scan to open an App Clip. App Clip links can show up on the Maps place card for registered businesses and also in the Siri Nearby suggestions. You can also open an App Clip from Safari if your web page is configured with a smart app banner for App Clip. People can tap the open button in that banner to open the App Clip. And when they send an iMessage with that web page's URL, it is presented as a special App Clip link bubble, which gives the user a choice to open the link in the App Clip or in Safari. And to give you an even better experience, later this year, Apple will be releasing the new App Clip codes, which is the best way for your users to discover your App Clip. It's visually beautiful and distinct, so when they see one, they know there's an App Clip waiting for them. Each App Clip code encodes a URL. Apple will be releasing tools later this year that can create these beautiful visual codes. Now that we have looked at the different ways people can follow links into your App Clip, let's go through the steps an App Clip developer needs to do to set up this linking experience. First you have to make changes to your web server and your App Clip project. So these links can be handled by the App Clip. Next you have to configure the App Clip card which is the card that introduces the user to the App Clip and is part of the App Clip experience. You can setup the default and advanced App Clip experiences on App Store Connect. Lastly, let's configure a smart app banner to show your App Clip on your web page. If the contents of your web page can be delivered as a better and more streamlined App Clip experience, consider adding this banner to provide a way for your users to get to the App Clip from that web page. First, let's start with configuring your web server and your clip for link handling. The association between your web site and your App Clip must be validated for the App Clip to be able to present content in place of the website's URL. To securely associate your App Clip with the server, you will need the apple-app-site-association file on your web server, along with the appropriate associated domains entitlement on your App Clip. Then you have to update the code in your App Clip to handle links from incoming NSUserActivity. First, let's update the apple-app-site-association file on the web server. This file is located in a ./well-known subdirectory in your server's root folder. If you have set up universal links for your app before, you probably have this file already set up of your server. And the root dictionary has other entries already such as web credentials and app links. To declare a new App Clip's association in this file, add another entry in the root dictionary with a key "appclips" and the value containing a dictionary containing a single apps key that is set to an array containing your App Clip's app identifier. Next, let's update the App Clip project to add the associated domains entitlement. In Xcode, navigate to your project settings and add the associated domains capability. Under Domains, add a new string appclips: Now that both your website and your App Clip have been set up with associated domains, let's add code to handle NSUserActivity which contains the URL passed into your App Clip. If your App Clip has adopted the new SwiftUI app lifecycle, this is how you would add a handler for the web browsing user activity. In that method, you can get the webpageURL property from the NSUserActivity. Then you can parse that URL and direct the user to the linked content. Keep in mind that once the user upgrades from the App Clip to the app, navigating through that App Clip link will actually open your app rather than the App Clip. So make sure your app also has similar code for handling the URLs for universal links as well. If your App Clip uses the UIKit SceneDelegate lifecycle, here's some similar code for handling incoming user activities in the UIScene delegate. To learn about how to set up associated domains and handling NSUserActivities please refer to the What's New in Universal Link sessions. To test the URL handling code in your App Clip in Xcode, you can specify a test URL to be passed to your App Clip. Open up the scheme editor in Xcode. Select the Arguments tab. Under Environment Variables, specify the _XCAppClipURL variable. Now when you run your App Clip from Xcode, it will be launched with this URL. Now that we're done configuring the web server and the App Clip, let's configure the App Clip experiences. Each App Clip experience starts with the App Clip card that the user sees when they tap on an App Clip link. It shows information about the App Clip and asks for the user's consent to open it. When coming up with the metadata to use to configure the App Clip card, please follow these requirements on the length of the title and subtitle for the optimal layout of the card. There are also requirements for the image size, aspect ratio, and format for best user experience across all devices. The image you choose should match the experience this App Clip action delivers. Now let's set up App Clip card on App Store Connect. After you've delivered a build containing both your app and your App Clip to App Store Connect, the App Clips should be visible on App Store Connect with a new App Clip Configuration section. This is where you can start setting up the default and advanced App Clip experiences. The metadata for the default App Clip experience includes the active card's image, subtitle, and the verb for the action. There is a list of predefined actions you can choose from. This metadata will be used in a smart app banner in Safari and in the App Clip link bubble in Messages and also in App Clip card when it's presented. If you want your App Clip to be accessible from more than just Safari and Messages, you must set up an advanced App Clip experience by clicking the Get Started link here. Each advanced App Clip experience is tied to a URL which can be encoded in the physical tag such as the NFC tag or a QR code so your App Clip can be launched from these physical invocation methods. After clicking through some introduction screens, you'll arrive on this page where you can specify the URL for the advanced App Clip experience. For the same App Clip, you can set up multiple advanced App Clip experiences, each with a different URL. I'll give you some examples of multiple clip experiences in the bit. On the next page, you can set up the image, title, subtitle, and choose an action verb for App Clip card for this experience. You can also choose to associate this App Clip experience with a physical location. Now let's take a look at some use cases of advanced App Clip experiences and the best practices for registering URLs for these experiences. A single clip could handle different types of tasks and therefore different App Clip experiences can be customized for the same clip. For example, this restaurant App Clip provides two types of experiences for their customers. The food ordering experience, where users can view the menu and place their order, and the reservation experience, where customers can reserve tables. In this case, two advanced App Clip experiences can be setup. One for melamela.example/order, where the image could be a picture of their menu and the subtitle View menu and order, and another one for melamela.example/reservation where the image could be a picture of the restaurant setting and the subtitle Reserve a table. One thing to remember about the way the URL is mapped to App Clip is that it's based on the most specific prefix match against registered App Clip experience URLs. That means you don't need to register every single possible App Clip URL for the business. Do keep in mind though, that even if your registered experience URL is used only as a prefix, your App Clip must be able to handle being launched with the exact registered URL. This can happen when your App Clip is invoked through Siri Nearby Suggestions and from Maps. Here's an example of how you can register one App Clip experience URL to work with multiple invocation URLs. A bike shop has an online bike rental system. It has hundreds of bikes for rent which are identified by an ID number. The URLs for reserving these bikes will specify that ID in the query string argument. Fortunately, this bike shop does not need to register in advance the App Clip experience for every one of these URLs because URLs are matched based on prefix match. Only one App Clip experience URL needs to be registered. https://bikesrental.example/rent That is enough to deliver an App Clip experience for all these bike URLs with that prefix and different query string arguments. Here's another example to explain a strategy for picking the URLs to register for advanced app clip experiences. The café in this example is a big chain with multiple locations where each location basically offers a similar experience to their customers. Because of the common URL format for all the locations, which all start with https:/ /brighteggcafe.example/store/, we can just register an App Clip experience for that URL prefix. When their customers follow a link to any of their stores, they'll get the same App Clip card. But let's say the coffee shop wants to provide a more special App Clip experience for its flagship store in Cupertino. To handle this, you can also register the Cupertino store URL for a different App Clip experience with a different image and subtitle text. The main takeaway here is you can register a shorter, more general URL prefix that covers most cases and register a more specific URL only when you need to provide a different App Clip experience. For more information on setting up the default and advanced App Clip experiences on App Store Connect, please refer to the What's New in App Store Connect session. And for best practices on the App Clip card design, please refer to the Design Great App Clips session. Now to the last step for handling linking into your App Clip. Setting up the smart app banner to open your App Clip. This is how people can open app clips from a web page in Safari or in Messages when the web page URL that has this banner configured is sent. If you have set up a Smart App Banner for your app before, you must be familiar with the apple-itunes-app meta tag that you add to your web page's HTML to specify your app's unique identifier. To configure this banner for your App Clip, set the app-clip-bundle-id content attribute to the App Clip's bundle identifier. You should continue to set the app-id attribute as well, so you'll fall back to the full app linking behavior for users with systems older than iOS 14. Safari will verify the domain association between the web site and App Clip before showing the banner. By default, when a user taps on the smart app banner's Open button. They will see the default App Clip card configured for this App Clip. But if you register this URL with an advanced App Clip experience, you can customize the metadata for the experience such that the user could see a more descriptive title in the banner and get an App Clip card that's tailored for the task this App Clip performs. To demonstrate what we've talked about on handling linking for your App Clip, I'll ask my colleague Luming to give us a demo. Luming? Luming Yin: Thanks, Ada, for your wonderful introduction on linking to your App Clips. I'm Luming, an engineer from the App Clips team, and today I'll be showing you how to link to your App Clip. To link your users to your App Clip through physical or digital invocation, you need to setup associated domains first. As my colleague Ada mentioned earlier in this talk, we need to both configure our web server and our App Clip project for link handling. So let's start with the web server first. Here have the source code of my web server. It's a pretty straightforward static web site. Under the root directory of my web server, I have already created a ./well-known folder and within it there is an apple -app-site-association file. My AASA file has already been configured for universal links, handoff, and web credentials with password autofill. Now all we need to do here is to update the AASA file to link to our App Clip. And there we go! Now that we have already configured our web server, let's come back to the Fruta Xcode project. To link to your App Clip, you need to register to handle user activity of type NSUserActivityBrowsing Web. In our App Clips WindowGroup declaration, I'll add a new onContinueUserActivity handler of type BrowsingWeb. Inside that, I'll parse the incoming URL and get the query items in the URL. After that, I'll get the first query item that has the name "smoothie," and if there is one, set the selected smoothieID on the data store to that URL parameter which is our smoothie identifier. Back into Fruta Xcode project, I'll go to the Signings & Capabilities tab. In it, I'll add a new capability. I'll choose to add Associated Domains. I'll expand this capability and click on the plus button to add a new associated domain. Here, I will enter appclips:fruta.example. Now that we have set up our associated domain, let's configure a launch URL to debug our App Clip with. To do this, I'll click on the target pop-up button and click Edit Scheme. You see the Environment Variables section has already been pre-populated with the value example.com. All we need to do here is to tick the checkbox before the environment variable of name _XCAppClipURL. In it, I'll enter a URL that our App Clip is able to parse and our App Clip will pick up the smoothie=berry-blue parameter as we have setup earlier. I'll close the editor and build and run the clip on device.
Voila! Our app has automatically parsed the app launch URL and navigated us to the Berry Blue smoothie. I'll order, pay with Apple Pay, and wait for my order to be ready. Looks like my smoothie is ready! I would love to enjoy this smoothie myself but there's more to demo. I've already submitted my Fruta app to App Store Connect and have configured an App Clip card experience in App Store Connect using the flow Ada had discussed earlier in this talk. So now, if I tap my phone on this NFC tag, an App Clip card shows up and I can launch the clip right here through physical invocation. Another way, as my colleague Ada has discussed earlier in this talk, is through the Smart App Banner in Safari. So now I'm back at my web site sources and in the index.html file, all we need to do is to add a new meta tag for our App Clip. I've specified a name of apple-itunes-app and app-clip-bundle-id as its content. Notice I'm keeping the app-id parameter so that my users running on iOS released before iOS 14 can still see a smart app banner referring them to download the app from the App Store. All right, after pushing my changes up to the server, I'm back onto my phone and I've navigated to fruta.example in Safari. As you have guessed, while fruta.example is a .example domain and it's not for sale, we have a lot of production budget this year. You are really worth the exhilarating 14-hour domain auction marathon. So, of course you can still browse through the menu on the web page as you would before, but on top of the page, there's a new smart app banner. When I tap on Open, I'll see the same App Clip card as we saw earlier with physical invocation with NFC. And after tapping open, we're brought to the App Clip again. And that is a quick demo of linking to your App Clip. Thank you. And back to you, Ada! Thanks Luming for showing us how to setup linking in App Clips. That Berry Blue smoothie sure looks refreshing. There's one more thing that I want to briefly talk about which is beta testing for App Clips. So after you've delivered your build that includes both your app and your App Clip to App Store Connect, you should find a new App Clip section in TestFlight that lets you add test invocation points for your App Clip so your beta testers can test opening the URLs for the different App Clip experiences. Click on Add App Clip Invocation and set up the title and URL of an App Clip experience you'd like your beta testers to try out. For more information about testing and submitting App Clips In App Store Connect, please refer to the What's New in App Store Connect session. To summarize, in this session we've shown you how you can handle links into your App Clip by setting up the associated domains for the new App Clip service type and handling the web browsing NSUserActivity in your App Clip; how you can configure default and advanced App Clip experiences on App Store Connect, including best practices on what URLs to use when registering App Clip experiences; how to set up the smart app banner to open your App Clip on your web page; and finally what's new in TestFlight for testing App Clips. Thanks for watching this session, and I can't wait to see the cool App Clips you'll create.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.