Mastering Apple App Clips: A Developer’s Guide with a Completed Example

Picture this: you’re at your local Museum, gazing at an ancient vase from a long-lost civilisation. A small sign next to it invites you to scan a code for more details. With a quick scan, your iPhone springs to life, showing the vase’s history and a vivid image, all without downloading an app. That’s the power of Apple App Clips, a feature introduced in iOS 14 that lets users experience a snippet of your app’s magic instantly. For developers, App Clips are like a perfectly timed demo, showcasing your app’s value and nudging users toward the full version.

In this comprehensive guide, we’ll explore what App Clips are, how they work, and how to build one from scratch. We’ll use a practical example: an App Clip for a Museum that lets users scan a code to view exhibit details. Complete with SwiftUI code, step-by-step instructions, and best practices, this post is designed for developers eager to create fast, user-friendly experiences. Let’s get started shall we?

What Are App Clips?

App Clips are lightweight, task-focused versions of an iOS app, designed to let users perform specific actions quickly without installing the full app. Think of them as a bite-sized preview of your app’s core features; whether it’s ordering a coffee, renting a bike, or, in our case, learning about a museum exhibit. They’re discoverable right when users need them, offering convenience and immediacy.

For users, App Clips eliminate the friction of downloading an app for a one-time task. For developers, they’re a chance to make a strong first impression, potentially leading to full app downloads. Data from App Clips, like user preferences, can transfer to the full app, ensuring a seamless experience. Built using the iOS SDK in the same Xcode project as your main app, App Clips are a natural extension of your development workflow.

Key characteristics include:

• Small Size: Capped at 50MB for digital invocations (e.g., links) or 15MB for physical ones (e.g., QR codes) in iOS 17, ensuring rapid downloads.

• Focused Functionality: Designed for a single task, like displaying exhibit details.

• Integrated Features: Support for Sign in with Apple, Apple Pay, and notifications (with limits) for a polished experience.

• Discoverability: Triggered via QR codes, NFC tags, App Clip Codes, or digital links in Messages, Safari, or Maps.

How Do App Clips Work?

App Clips are all about context and speed. They’re activated through various methods:

• Physical Triggers: Scanning QR codes, tapping NFC tags, or using App Clip Codes (special QR codes with optional NFC).

• Digital Triggers: Clicking links in Messages, Safari, Maps, Spotlight Search, or Siri Suggestions.

When a user interacts with a trigger, iOS checks if the App Clip is on the device. If not, it’s downloaded in seconds, thanks to its small size. The App Clip launches with context from the invocation URL, for example, https://citymuseum.com/exhibit/1 might open details for a specific vase. Users complete their task, and you can prompt them to download the full app using tools like SKOverlay, with any data (like viewed exhibits) carried over.

App Clips are managed in App Store Connect alongside your full app, and you can create multiple App Clip experiences, each with its own URL and metadata. They’re designed to be fast, secure, and intuitive, leveraging Apple’s ecosystem for authentication and payments.

Why Use App Clips?

App Clips address a common user pain point: hesitation to download apps for one-off tasks. Research suggests that 78% of users avoid downloading apps for single transactions, and 80% of younger customers may abandon a purchase if an app install is required. App Clips remove this barrier, offering a low-friction way to engage users. They’re ideal for:

• Retail: Ordering food or paying for parking.

• Services: Renting scooters or booking appointments.

• Cultural Experiences: Providing exhibit details or AR tours, as in our museum example.

• Events: Buying tickets or accessing event schedules.

For businesses, App Clips enhance discoverability and user satisfaction, acting like a free sample that showcases your app’s potential. They’re a win-win: users get convenience, and you get a chance to convert them into loyal app users.

Creating an App Clip: Step-by-Step Guide

Let’s build an App Clip for the City Museum. The App Clip will let users scan a QR code next to an exhibit to view its name, description, and image. After viewing, a button encourages downloading the full app for more features, like a virtual tour or ticket purchasing. We’ll use SwiftUI for a modern, clean interface and share code with the main app for efficiency.

Step 1: Set Up Your Project in Xcode

Open Xcode and create a new iOS app project (or use an existing one). For this example, we’ll create a SwiftUI project named "CityMuseumApp."

Step 2: Add an App Clip Target

To add an App Clip:

1. Go to File > New > Target.

2. Select App Clip and name it (e.g., MuseumClip).

3. Ensure it’s added to your project’s targets.

This creates a separate target that’s lightweight but can share resources with your main app.

Step 3: Share Code Between App and App Clip

To keep code consistent, share data models between the main app and App Clip. We’ll create two shared files: Exhibit.swift for the data model and ExhibitModel.swift for managing exhibit data.

// Exhibit.swift (shared)

struct Exhibit: Identifiable {

    let id: String

    let name: String

    let description: String

    let imageName: String

}

// ExhibitModel.swift (shared)

import Foundation

class ExhibitModel: ObservableObject {

    @Published var exhibits: [Exhibit] = [

        Exhibit(id: "1", name: "Ancient Vase", description: "A 5th-century BCE ceramic vase from Greece.", imageName: "vase"),

        Exhibit(id: "2", name: "Renaissance Painting", description: "A masterpiece from the 15th century.", imageName: "painting"),

        // Add more exhibits as needed

    ]

    @Published var selectedExhibit: Exhibit?

    func selectExhibit(id: String) {

        if let exhibit = exhibits.first(where: { $0.id == id }) {

            selectedExhibit = exhibit

        }

    }

}

In Xcode, select these files and check both the main app and App Clip targets under Target Membership in the File Inspector.

Step 4: Implement App Clip Functionality

The App Clip’s job is to handle a specific task: displaying an exhibit’s details based on the invocation URL (e.g., https://citymuseum.com/exhibit/1 for the ancient vase). We’ll set up the App Clip to parse the URL, select the exhibit, and display it.

In the App Clip target, create the main app file:

// MuseumClipApp.swift (App Clip target)

import SwiftUI

@main

struct MuseumClipApp: App {

    @StateObject private var model = ExhibitModel()

    var body: some Scene {

        WindowGroup {

            ContentView()

                .environmentObject(model)

                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb, perform: handleUserActivity)

        }

    }

    func handleUserActivity(_ userActivity: NSUserActivity) {

        if let url = userActivity.webpageURL,

           let components = URLComponents(url: url, resolvingAgainstBaseURL: true),

           let queryItems = components.queryItems,

           let exhibitIDItem = queryItems.first(where: { $0.name == "exhibit" }),

           let exhibitID = exhibitIDItem.value {

            model.selectExhibit(id: exhibitID)

        }

    }

}

Next, create the ContentView to display the exhibit:

// ContentView.swift (App Clip target)

import SwiftUI

struct ContentView: View {

    @EnvironmentObject var model: ExhibitModel

    var body: some View {

        if let exhibit = model.selectedExhibit {

            VStack {

                Image(exhibit.imageName)

                    .resizable()

                    .scaledToFit()

                    .frame(maxHeight: 200)

                Text(exhibit.name)

                    .font(.title)

                    .padding(.top)

                Text(exhibit.description)

                    .font(.body)

                    .multilineTextAlignment(.center)

                    .padding()

                Button(action: {

                    // Implement SKOverlay to prompt full app download

                }) {

                    Text("Explore More")

                        .font(.headline)

                        .padding()

                        .frame(maxWidth: .infinity)

                        .background(Color.blue)

                        .foregroundColor(.white)

                        .cornerRadius(10)

                }

                .padding(.horizontal)

            }

            .padding()

        } else {

            Text("No exhibit selected")

                .font(.title2)

                .foregroundColor(.gray)

        }

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

            .environmentObject(ExhibitModel())

    }

}

Step 5: Set Up the Invocation URL

For testing, configure the invocation URL in Xcode:

1. Go to Product > Scheme > Edit Scheme.

2. Select the MuseumClip target.

3. Under Arguments, add an environment variable _XCAppClipURL with a value like https://citymuseum.com/exhibit/1.

This simulates scanning a code that selects the ancient vase exhibit.

Step 6: Generate App Clip Codes

App Clip Codes are visually distinct triggers that users can scan or tap (if NFC-enabled). Use Apple’s AppClipCodeGenerator tool, available from your Apple Developer account. Run a command like:

AppClipCodeGenerator generate --url https://citymuseum.com/exhibit/1 --foreground FF5500 --background FEF3DE --output ~/Downloads/exhibit1.svg

This generates an SVG file for the App Clip Code, which you can print or display digitally next to the exhibit. Repeat for each exhibit (e.g., ?exhibit=2 for the painting).

An example of an App Clip scannable clip code

Step 7: Test Your App Clip

Testing ensures your App Clip works as expected. You wouldn’t display a broken vase, right? Here’s how to test:

• Simulator: Run the App Clip target in Xcode with the _XCAppClipURL set. Verify that the correct exhibit loads.

• Real Device: Go to Settings > Developer > Local Experiences on an iOS device. Register your URL (e.g., https://citymuseum.com/exhibit/1), bundle ID, title, subtitle, and action (e.g., Open). Scan the App Clip Code to test.

You should now see the initial app clip launcher, which users will initially see when they first scan your app clip.

You should now see your app clip launcher

Step 8: Encourage Full App Download

After users tap open and view the exhibit, you can also prompt them to download the full app using SKOverlay from StoreKit. Here’s a basic implementation:

import StoreKit

func showAppStoreOverlay() {

    guard let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene else { return }

    let config = SKOverlay.AppClipConfiguration(position: .bottom)

    let overlay = SKOverlay(configuration: config)

    overlay.present(in: scene)

}

In a real app, you’d call this from the “Explore More” button. In SwiftUI, you may need a UIViewControllerRepresentable to present the overlay. For details, see the SKOverlay Documentation.

In the below example, a user has scanned a painting app clip. The explore more encourages users to download the full museum app.

An example of the SKOverlay in action

Step 9: Advanced Features (Optional)

Let's not end it there. With App Clips there's a few more things you can do to enhance your users experience. Let's dive into those.

Creating Notifications

You can request ephemeral notifications for up to 8 hours post-launch. This allows you to send additional, related notifications after the user has scanned your App Clip. To get started add the Requests ephemeral user notifications key to Info.plist and use UNUserNotificationCenter:

func requestAuthorizationForNotification() {

    let center = UNUserNotificationCenter.current()

    center.getNotificationSettings { settings in

        if settings.authorizationStatus == .ephemeral {

            // Already authorized

            return

        }

        center.requestAuthorization(options: [.alert]) { granted, error in

            if let error = error {

                print("Notification error: \(error)")

            }

        }

    }

}

Sending The Notifications

To send the notifications use UNMutableNotificationContent to create notification content, UNTimeIntervalNotificationTrigger for scheduling, and UNUserNotificationCenter to deliver the notification. Notifications are temporary (ephemeral) and will only be delivered during the App Clip's 8-hour session. The notification includes a title, message body, and default sound, and can be scheduled to appear after a specified delay (default 5 seconds). 

import UserNotifications

func sendNotification(title: String, body: String, timeInterval: TimeInterval = 5) {

let content = UNMutableNotificationContent()

content.title = title

content.body = body

content.sound = .default

// Create a time-based trigger (fires after specified seconds)

let trigger = UNTimeIntervalNotificationTrigger(timeInterval: timeInterval, repeats: false)

// Create requestlet 

identifier = UUID().uuidString

let request = UNNotificationRequest(identifier: identifier, content: content, trigger: trigger)

// Add to notification center UNUserNotificationCenter.current().add(request) { error in

if let error = error {

  print("Error scheduling notification: error)") 

  } else { 

    print("Notification scheduled successfully") 

    } 

  } 

}

Ensuring Location Verification

Ensure the App Clip is used at the correct location (the museum in this example) by adding the Requests location confirmationkey to Info.plist and verifying the location:

import CoreLocation

func verifyLocation(userActivity: NSUserActivity, completion: @escaping (Bool) -> Void) {

    guard let payload = userActivity.appClipActivationPayload else {

        completion(false)

        return

    }

    let center = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194) // Museum location

    let region = CLCircularRegion(center: center, radius: 100, identifier: "museum")

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

        if let error = error {

            print("Location verification error: \(error)")

            completion(false)

        } else {

            completion(inRegion)

        }

    }

}

What does that all look like?

Putting that all together, after scanning an app clip, users at the museum could receive a welcome message shortly after promoting a new exhibit. This location-based customisation enhances the user experience by providing relevant information based on the user's physical presence at the museum.

The welcome message could look like this, shown after users scan their first App Clip at the museum

Summing It Up: City Museum App Clip

Your App Clip now lets users scan a code next to an exhibit, like the ancient vase, to view its details. The App Clip launches, shows the vase’s image, name, and description, and offers an “Explore More” button to download the full app. The shared ExhibitModel handles data, while MuseumClipApp processes the invocation URL (e.g., https://citymuseum.com/exhibit/1). The ContentView displays the UI, and the App Clip Code triggers the experience.

And if you've added the enhancements, user also receive notifications when nearby to learn more.

Here’s the setup summarised:

The final app clip in practice

Best Practices for App Clips

To make your App Clip shine:

• Minimise Size: Keep well below the 50MB (digital) or 15MB (physical) limits. Optimise images and code.

• Single Task: Focus on one action, like showing exhibit details, not browsing the entire museum.

• Seamless Data Transfer: Use app groups to share data with the full app (see App Clip Documentation).

• Intuitive UI: Avoid complex navigation; keep it linear and native-feeling.

• Rigorous Testing: Test with QR codes, NFC tags, and digital links to catch edge cases, like invalid URLs.

Common Pitfalls to Avoid

• Overloading Features: Don’t cram the full app into the App Clip, it’s a teaser, not a replacement.

• Ignoring Size Limits: Large assets slow downloads and frustrate users.

• Skipping Real-World Tests: Simulate museum conditions to ensure reliability.

In Summary

App Clips are like a perfectly curated exhibit: they capture attention, deliver value, and leave users wanting more. With this guide, you’ve learned how to create an App Clip for the City Museum, from setting up Xcode to generating App Clip Codes. The provided SwiftUI code is ready to adapt to your own projects, whether for museums, retail, or beyond. If you're interested in creating an App Clip experience, reach out to us for a chat!