App clips are best when they provide an “in the moment” experience for people using them, like ordering your favorite refreshing beverage or paying for parking. We'll share guidelines and best practices for building focused and consistent app clips, show you how to streamline transaction experiences by taking advantage of technologies like app clip notifications and location confirmation, and explore how you can help people move from your app clip over to your full app.
To get the most out of this session, we recommend first watching “Explore app clips” and “Configure and link your app clips”.
♪ Hello, and welcome to WWDC Yongjun Zhang: Hello, and welcome! My name's Yongjun and I am an engineer on the App Clips team. I'm joined today by my colleague Luming to talk about how to streamline your App Clip experience. As you know, an App Clip is a small piece of your app. They're lightweight, delivered on-demand at the moment you need it. They are invoked by URLs that you have registered as App Clip experiences. Users can also easily get your app during this experience. Today, I will talk about three topics. First, best practices for designing and building your App Clip. Then I will show an example on how to streamline transactions in your App Clip. Finally, I will share some techniques to help transition users from App Clip to your app. Let's talk best practices. App Clips are designed for speed. Interactions with App Clips need to be quick and focused. Your App Clip should focus on essential tasks and limit features to what is needed for the task at hand. For the vast or complex features, reserve them for your app. When your App Clip launches, it should be usable right away. Include all required assets for fast initial experience. Do not include splash screens or make users wait for download before they can start a task. Creating an account is a complex task, and takes time and effort. Wait to ask people to sign up until after they have finished the task. When asking for user data, request permission at the moment you need it and clearly state why you need them. When users upgrade to your app, it replaces the App Clip. Your app should provide the same streamlined experiences that the App Clip offers. And make sure that your App Clip has the same name and icon as your app, so users can have a consistent experience. For more information about App Clip design, please check the "Design Great App Clips" session. To build an App Clip, you need to add a new target in your app's Xcode project. Your app already has assets and classes; some will be shared with your App Clip. Identify all resources that are required for the experience. Include them in your App Clip app bundle. Keep in mind, the smaller your App Clip is, the faster it gets to users. So only add what you need. For assets that are used in both your app and App Clip, put them in a shared asset catalog. Organize your classes and localization string files such that you can share them for both your app and App Clip. Sign in with Apple is the best way to get a user's account. If your service supports a federated login system that isn't Sign in with Apple, ASWebAuthenticationSession is a great, lightweight solution to authenticate with third-party services. It keeps the user in your App Clip and it doesn't require switching to an app. For users who already have an account with your app, you should also offer username/password login. App Clips supports Password AutoFill, which makes log in really easy. If a user used passwords logging in to the App Clip, consider offering a Sign in with Apple upgrade when the user gets the app. To learn about the best way to support a username and password sign-in in your app, check out "What's New in Authentication," and to learn about how to offer Sign in with Apple and strong password upgrades. See: "Securing Accounts with Upgrades to Sign in with Apple and a Strong Password" session. App Clips are ephemeral; your users should try them out with great confidence that their privacy is well protected. Some sensitive user data are not available to App Clips -- they're not essential to the lightweight experience an App Clip offers, and you can always encourage users to get your app for these functionalities. App Clips can request permissions for camera, microphone, and Bluetooth. To preserve the fast and streamlined experience, we also transfer this data when a user gets your app, so you don't need to request them again. To learn more about App Clips and app privacy, please check out the "Build Trust Through Better Privacy" session.
We use many iOS apps for transactions in our daily life. A typical transaction involves multiple steps. Let me walk you through with an example. Let's say I wanted to order a smoothie. I walk into a smoothie store, tap an NFC tag, and the Fruta App Clip launches. The App Clip asks my permission to get my location to find out which smoothie store I'm at. Next, the App Clip shows the menu for ordering. I select my favorite smoothie and pay. Then the App Clip asks my permission to send the notification to tell me when my smoothie is ready. Last, this App Clip offers to sign up or sign in to get a discount later. There are quite a few steps here. Let's see how we can improve this... ...to this! First, location. Your App Clip can be triggered by physical codes like NFC tags. In our smoothie example, the URL in the NFC tag tells which smoothie store it is for. With that, you can get the location of the store, show the right menu, and accept the payment. However, what if the tag is placed at the wrong store? Or what if someone intentionally placed a different tag in this store? This could cause confusion or even lead to fraud. To prevent that, you need to know if the user's actually at this store when they scan the tag. To do that, you need to get a user's location. Then use that to match the store's location. Location confirmation reveals just enough information to accomplish this. You do not need the full location access. The user has the control to allow that in the App Clip card. When your App Clip receives the payload from a physical code, you can ask the system if the payload is acquired at a specific location. And you will get a binary "yes" or "no" answer; no prompt needed. To enable location confirmation, add NSAppClipRequest LocationConfirmation key to the info plist. When your App Clip launches, get the payload from NSUserActivity, then prepare the region where the code should be acquired with the coordinates and the radius. You can set the radius to up to 500 meters. Last, call confirmAcquired(in:region) API. The closure will tell you the result. This is location confirmation. Next, payment. Just like apps, your App Clip can use any payment method. Apple Pay allows people to make purchases fast and secure -- no need to enter credit card numbers. It is a great way to speed up the payment experience. You can use notifications to connect to users after they use your App Clip. To send notifications today, you need to request permission first. With App Clip notifications, you get permission for up to eight hours after each launch. Users can grant the permission in the App Clip card. After the launches you can send notifications; no prompt needed. At any time when App Clip is running, you can always ask for regular permission. To enable App Clip notification, add NSAppClipRequestEphemeralUser Notification key to the info plist. To tell if a user has granted permission in the App Clip card, check authorizationStatus in NotificationSettings. Last, sign in. Sign in with Apple is a private and a convenient way to create an account or sign in with an existing one. If a user already has a password-based account with you, you can also use AuthenticationServices API to streamline the sign in without even showing the login screen. Now when you put all these improvements together, this transaction experience is much smoother. My user has the App Clip. They can easily get your app at any time. iOS provides plenty of opportunities for them to do it. After your App Clip's activated, the app banner will show your app's name, icon, and App Store link for a moment. Tapping the banner takes users to the App Store where they can install your app. Users can also get your app from the App Clip's settings panel. Your App Clip can embed StoreKit SKOverlay in a view. We think it works best if you display the overlay after the user finishes the task. For example, you can put it next to the payment confirmation page. To add SKOverlay to your App Clip, use appStoreOverlay modifier and make a config with AppClipConfiguration. To learn more about SKOverlay, please refer to the "What's New with In-App Purchase" video. Your App Clip may want to pass user data to your app, like a shopping list or order history. You can do this with a secure app group. This secure app group is only accessible between your App Clip and your app. When a user installs your app, the app group will be transferred to your app after the App Clip is deleted. If a user has already signed in to the App Clip, with the app group, they can automatically sign into the app. Here's a how to do it. In your App Clip, when a user logs in with Sign in with Apple, save the userID in the shared AppGroup as a file or in a database. After the user upgrades to your app, read the saved userID from the AppGroup. Then use ASAuthorizationAppleIDProvider() to verify the userID. If the user has already signed in to your App Clip, you can seamlessly sign them in to your app. With that, I would like to hand over to Luming to show you a demo. Luming? Luming Yin: Thanks, Yongjun, for your great talk about streamlining your App Clip experience! I'm Luming, an engineer from the App Clips team, and today I'll be demoing how to streamline your App Clip experience. Without a streamlined experience, if you launch an App Clip, your users may see something like this: They'll have to decide on-the-spot about giving location access as well as notification access. Not exactly a frictionless experience. So let's see how we can streamline these permission requests. Let's look at notifications first. App Clips can request for eight hours of ephemeral notification without throwing up an alert. I have the Fruta Xcode project open, and let's first look at the App Clips' info.plist. I've expanded the NSAppClip dictionary and I'll set the Boolean value of NSApp ClipRequestEphemeral UserNotification to "yes." Now I can come back to FrutaClip.swift and before we request for notification authorization we can check if our App Clip has already been granted ephemeral notification status. This is a new value introduced in iOS 14 for App Clips. If we have already acquired ephemeral notifications status there is no need to prompt a user for an alert. Let's build and install the clip on the device. While there is still a location prompt, there is no more notification permission prompts. Let's verify this. If I go to Settings and look at the notification settings for Fruta, you can see that there is "Will turn off in 8 hours." This indicates the Fruta App Clip has been given an eight-hour ephemeral notification tied to physical invocations. What a coincidence. Looks like my smoothie is ready, and ephemeral notifications are also confirmed working. Next up, since App Clips can request for a one-time location confirmation when launched through physical invocation methods -- such as NFC or QR code -- let's take a look at setting it up. Just like setting up ephemeral notifications, under the NSAppClip dictionary in info.plist, what we need to do for location confirmation is also very similar. This time, I'll instead set the Boolean value of NSAppClipRequestLocation Confirmation to "yes." Then we can go back to FrutaClip.swift. I can remove our existing code to explicitly request for location updates using CoreLocation APIs. Since I have already linked against AppClip.framework in our project settings, I'll import the framework here. Next, in handleUserActivity, I'll get the appClipActivationPayload and the location latitude and longitude to verify from the URL. After this, I'll instantiate a region I would like to confirm. Then I'll call confirmAcquired(in: region) on the payload. After this, I'll only allow Apple Pay if the user is within that region. I'll build and run the App Clip again. At Fruta headquarters, the QR code shipment team has mixed-up QR code print outs for Fruta Cupertino with QR code printouts from Fruta San Francisco. Without location confirmation, unsuspecting customers may end up paying for someone else's smoothie by mistake. The good thing here is location confirmation has us covered. Let's see how location confirmation protects you and your customers, in action. I am at Fruta Cupertino right now, and I'll scan this QR code that belongs to Fruta San Francisco. Now if I launch the App Clip, then try to place an order, you will see that location confirmation is working, and I am no longer allowed to pay for smoothies since I am not at San Francisco where the Fruta shop is located at. Now, let's go back to Xcode and use Xcode to simulate our device as if it's in the center of San Francisco. We really are traveling at the speed of light, and teleportation technologies have come a long way. Let's scan the same QR code again. This time, if I open the App Clip I can proceed through the payment as usual. Finally, let's look at migrating credentials from the App Clip to the full app. As my colleague Yongjun has explained in the talk, I have already set up a secure group container shared between the app and the App Clip. I'll open OrderPlacedView.swift and if Sign in with Apple has succeeded, we write the authorization credential into the group container.
For users to be easily able to upgrade to the full app, this is also the perfect opportunity to configure a StoreKit overlay. And also show it, right after Sign in with Apple has succeeded and your user has completed a transaction. Then, when we first launch the full app, we can add some code to migrate the credential over in FrutaModel.swift. In it, I'll migrate the account information over, only if we're building not for the App Clip but for the main app. We'll read the saved userID from the group container, instantiate a new ASAuthorizationAppleIDProvider() and get its credential state. Let's run the clip again.
This time I'll place an order.
And when the order is ready, I'll Sign in with Apple.
For your users, this is a great opportunity to get your full app and have their log in information automatically migrated over. So as we have added this UI -- SKOverlay, as Yongjun has explained earlier -- we've got just that. Since we have just made changes to our app, to handle account migration, which hasn't been submitted to the App Store yet, let's build and run the app to simulate the full app upgrade. In the target scheme selection, I'll choose the full app and build and run it on my device. As you can see, we're automatically logged in and all my rewards are right there waiting for me. So you've seen how to setup ephemeral notification, and one-time location confirmation, as well as migrating user data from the App Clip to the full app. That's my demo of streamlining your App Clip experience. Back to you, Yongjun. Yongjun: Thank you, Luming. It's great. I learned how to use location confirmation and App Clip notification. To recap, in this video we talked about best practices for designing and building App Clips. Then we covered how to streamline transactions in your App Clip. Last, we learned some ideas to help users transition to your app. Thanks, and I hope you have a great WWDC. ♪
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.