Developer guide on App Clips for iOS

Announced at WWDC 2020, an App Clip is a lightweight version of an app that enables users to perform a specific task without installing the full app, i.e. App Clips allow users who do not have downloaded the app to still use its functionality.

In this article, we'll look at how App Clips work and how we can implement them in our iOS applications.

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free

How do App Clips work?

App Clips can be launched with so called invocation URLs, for example, by scanning an NFC tag, QR code, App Clip code or tapping on a link.

As soon as a user opens an App Clip URL, the system at first presents a so called App Clip experience, which is a card showing an App Clip summary and an action button to open the App Clip. If the user chooses to open it, the App Clip binary is downloaded and launched. The invocation URL is passed in, so it can be handled as a deep link if needed.

In case the according iOS application is already installed on the user's device, it gets opened instead of the App Clip.

If an App Clip is not launched for several days, it gets deleted by the system.

Supporting App Clips in an iOS application

To support App Clips in an iOS application, the following general steps are required:

1. Adding an App Clip target
2. Developing the App Clip which includes sharing assets and code between the iOS app and the App Clip and handling of the invocations
3. Associating the App Clip with the corresponding website
4. Configuring the App Clip experience in App Store Connect

Let's go through those steps in more detail.

1. Adding an App Clip target

To add an App Clip target to an iOS project, we can use Xcode's App Clip template.

The template creates a structure for the App Clip which is similar to our app's structure.

Additionally, it creates the correct entitlements and a scheme to build and run the App Clip and its tests. It also adds a new build phase for the app target that embeds the App Clip in the app.

2. Developing the App Clip

After adding the App Clip target, we can directly try out to build and run it by choosing the created scheme.

When it succeeds, we can start sharing code and assets between the App Clip and the actual iOS app. Sharing code with an App Clip works just like with any other target by selecting target memberships of a file in Xcode's File Inspector.

For iOS 16 devices, the uncompressed App Clip binary can be up to 15 MB in size, for iOS 15 and earlier up to 10 MB.

In cases we have to differentiate between the iOS app and its App Clip in code, we can use the Active Compilation Conditions build setting which can be configured in the App Clip's target build settings.

With that setup, we can use it as follows:

#if !APPCLIP
// App code
#else
// App Clip code
#endif

The invocation URL is passed in as a user activity. To handle the URL in a SwiftUI application after the App Clip is launched, we can use the onContinueUserActivity(_:perform:) method:

import SwiftUI

@main
struct ExampleAppClipApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { activity in
                    guard let incomingURL = activity.webpageURL else { return }
                    guard let components = NSURLComponents(url: incomingURL, resolvingAgainstBaseURL: true) else { return }
                    // Navigate to a certain part of the App Clip based in the URL
                }
        }
    }
}

As we can see above, the passed in user activity has a webpageURL property which we can use to show customized content to the user if needed.

Since the main application is launched instead of the App Clip if installed, similar code should be added there too.

3. Associating the App Clip with the corresponding website

The App Clip will be launched if a user opens an invocation URL. Before the system launches the App Clip, it verifies the app's entitlement and the server's Apple App Site Association file to make sure that the App Clip and the website are associated.

To associate an App Clip with a website, the following steps are required:

1. Add an Associated Domains entitlement. For that, we need to enable the Associated Domains capability in Xcode's project settings and to specify the invocation URL's domain within the Associated Domains Entitlement: appclips:<fully qualified domain>.

2. Add an Apple App Site Association file on the domain's server. For that, an Apple App Site Association file needs to be configured and uploaded to the server's .well-known directory with the following content:

{
  "appclips": {
      "apps": ["PREFIX.com.tanaschita.ExampleApp.Clip"]
  }
  ...
}

Check out this guide on associated domain files for iOS development to learn more.

4. Configure the App Clip experience in App Store Connect

After uploading a build that contains an App Clip to App Store Connect, we can configure App Clip experiences in App Store Connect. This includes configuring the URL which will launch the App Clip experience card, adding meta data like title, subtitle and image and choosing a call to action.

Additionally, we can choose between default and advanced experiences. With a default App Clip experience, we can add a Smart App Banner to the corresponding website that launches the App Clip. This will also enable invocations from links that are shared in Messages.

To support additional invocations such as scanning an App Clip Code or an NFC tag, we need to configure an advanced App Clip experience.

We can configure multiple App Clip experiences for one App Clip, for example one experience for each deep link the App Clip supports.