Streamline your App Clip

Streamline your App Clip

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.”

Resources
Related Videos

WWDC20
Download

Hello and welcome to WWDC.
Hello and welcome. My name's Yongjun, and I'm 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, the 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 of 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 Clip needs to be quick and focused. Your app clip should focus on essential tasks and the named 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 a 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 user data, request permission at the moment you need. 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 the user can have a consistent experience.
For more information about app clip's design, please check, "Design Great App Clips" session.
To build an app clip, you'll 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 Apple bundle. Keep in mind, the smaller your app clip is, the faster it gets to your users. So only add what you need.
For assets that are used in both your app and app clip, pull them in a shared asset catalog.
Organize your classes and localization strings 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 log-in 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 log in.
App Clip supports Password AutoFill, which makes logging in really easy.
If a user used passwords to log into the app clip, consider offering Sign in with Apple upgrade when users get the app.
To learn about the best way to support 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 very protected.
Some sensitive user data are not available to app clips. They are not essential to a lightweight experience an app clip offers. And you can always encourage users to get your app for these functionalities. App clips can request permission for camera, microphone, and Bluetooth.
To preserve the fast and streamlined experience, we also transfer this data when the user gets your app, so you don't need to request them again. To know more about app clips and app privacy, please check out, "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 NFC tag and a food 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 a notification to tell me when my smoothie's 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 the store when they scanned the tag.
To do that, you need to get the 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 NSAppClipRequestLocation- Confirmation 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 up to 500 meters.
Last, code confirmedAcquired(in: region) API. The closure will tell you the result. This is location confirmation.
Next, payment. Just like in 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 the notifications today, you need to request permission first.
With app clip notification, you get permission for up to eight hours after each launch.
User can grant the permission in the app clip card. After it launches, you can send the 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 NSAppClipRequestEphemeral- UserNotification key to the Info.plist.
To tell if the user has granted permission in the app clip card, check authorizationStatus in notifications settings.
Last, sign in. Sign in with Apple is a private and convenient way to create an account or sign in with an existing one. If a user already has a password best account with you, you can also use AuthenticationServices API to streamline the sign in without even showing the log in 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 the users to the App Store where they can install your app. Users can also get your app from App Clips 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 know more about SKOverlay, please refer to "What's New with In-App Purchase" video.
Your app clip may want to pass user data to your app like 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 the user has already signed in to the app clip with the app group, they can automatically sign into the app. Here's how to do it. In your app clip, when users log in with Sign in with Apple, save the user ID in the shared app group as a file or in a database.
After the user upgrades to your app, read the saved user ID from the App group... then use iOS authorization app ID provider to verify the user ID. If the user has already signed in to your app clip, you can seamlessly sign them into your app.
With that, I would like to hand over to Luming to show you a demo. Luming. 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 clip's Info.plist. I've expanded the NSAppClipDictionary, and I'll set the Boolean value of NSAppClipRequestEphemeral- 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 notification status, there's no need to prompt the 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 setting 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's 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 NSAppClipDictionary 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 NSAppClipRequest- LocationConfirmation to "Yes." Then, we can go back to FrutaClip.swift. I can remove our existing code to explicitly request for location updates using Core Location 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 app clip activation payload 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 printouts 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 launched 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.
And 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 user ID 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 set up 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. 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.

7:53 - Confirm a physical code's location.

import AppClip

guard let payload = userActivity.appClipActivationPayload else {
    return
}

let region = CLCircularRegion(center: CLLocationCoordinate2D(latitude: 37.3298193,        
    longitude: -122.0071671), radius: 100, identifier: "apple_park")

payload.confirmAcquired(in: region) { (inRegion, error) in

}

9:24 - Query if user has granted app clip notification on app clip card.

import UserNotifications

let center = UNUserNotificationCenter.current()

center.getNotificationSettings { (settings) in
   if settings.authorizationStatus == .ephemeral {
        // User has already granted ephemeral notification.
    }

}

10:49 - Embed SKOverlay to your app clip

import SwiftUI
    import StoreKit

    struct ContentView : View {
        @State private var finishedPaymentFlow = false

        var body: some View {
            NavigationView {
                CheckoutView($finishedPaymentFlow)
            }
            .appStoreOverlay(isPresented: $finishedPaymentFlow) {
                SKOverlay.AppClipConfiguration(position: .bottom)
            }
        }
    }

11:32 - Save user ID in app clip's secure app group.

// Automatically log in with Sign in with Apple
import AuthenticationServices

SignInWithAppleButton(.signUp, onRequest: { _ in
}, onCompletion: { result in
    switch result {
    case .success(let authorization):
        guard let secureAppGroupURL = 
            FileManager.default.containerURL(forSecurityApplicationGroupIdentifier:
                "group.com.example.apple-samplecode.fruta")
            else { return };
        guard let credential = authorization.credential as? ASAuthorizationAppleIDCredential 
            else { return }
        save(userID: credential.user, in: secureAppGroupURL)
    case .failure(let error):
        print(error)
   }
})

11:55 - Automatically sign in users to your app if they have signed into your app clip.

import AuthenticationServices

let provider = ASAuthorizationAppleIDProvider()
guard let secureAppGroupURL =
    FileManager.default.containerURL(forSecurityApplicationGroupIdentifier:   
        "group.com.example.apple-samplecode.fruta")
    else { return };
let user = readUserID(in: secureAppGroupURL)
provider.getCredentialState(forUserID: user) { state, error in
    if state == .authorized {
       loadFavoriteSmoothies(userID: user)
   }
}

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.

Resources

Related Videos

WWDC20