Integrate App Clips in SwiftUI

 

App Clips are a powerful way to let users experience a small part of your app without installing the full version. Whether it’s ordering food, renting a scooter, or checking into a hotel — App Clips offer speed, simplicity, and delight. In this article, we’ll learn how to integrate App Clips using SwiftUI, step-by-step, with real-world use cases.

📌 What is an App Clip?

An App Clip is a lightweight version of your app (<10MB) that launches instantly. It’s discoverable via:

• QR codes
• NFC tags
• Safari banners
• Maps
• iMessage
• App Clip Codes (special Apple-designed QR codes)

It’s ideal for on-the-go interactions where installing the full app feels like too much friction.

🎯 Use Case

Let’s build a “QuickCoffee” App Clip that lets users quickly order a coffee from a local shop. The full app allows managing profiles, loyalty points, and order history. The App Clip focuses on one thing: placing an order fast.

🧱 Project Setup

1. Create a New SwiftUI App

Open Xcode and create a new project using App → SwiftUI + Swift.

2. Add an App Clip Target

Go to File > New > Target, and choose App Clip.

• Name: QuickCoffeeClip
• Check Include SwiftUI lifecycle
• Make sure it shares the same bundle ID prefix as your main app.

🔁 Example Bundle IDs:

• Main App: com.yourcompany.QuickCoffee
• App Clip: com.yourcompany.QuickCoffee.Clip

🔗 App Clip Entrypoint

Update the @main App struct in your App Clip target:

@main
struct QuickCoffeeClipApp: App {
    var body: some Scene {
        WindowGroup {
            OrderCoffeeView()
        }
    }
}

Create a lightweight UI for placing a quick order:

struct OrderCoffeeView: View {
    @State private var coffeeType = "Latte"
    
    var body: some View {
        VStack {
            Text("Quick Order")
                .font(.title)
            
            Picker("Coffee Type", selection: $coffeeType) {
                Text("Latte").tag("Latte")
                Text("Espresso").tag("Espresso")
                Text("Cappuccino").tag("Cappuccino")
            }
            .pickerStyle(.segmented)
            .padding()
Button("Order Now") {
                // Trigger order logic
            }
            .buttonStyle(.borderedProminent)
            .padding()
        }
    }
}

🧪 Testing Your App Clip

To simulate an App Clip launch:

1. Go to Product > Scheme > Manage Schemes
2. Select the App Clip scheme
3. In Run > Arguments, pass a URL like:

--url https://quickcoffee.com/order?id=123

Update your OrderCoffeeView to read the URL:

@main
struct QuickCoffeeClipApp: App {
    @Environment(\.openURL) var openURL
    
    var body: some Scene {
        WindowGroup {
            OrderCoffeeView()
                .onOpenURL { url in
                    print("Launched with URL: \(url)")
                    // Parse parameters
                }
        }
    }
}

📦 Sharing Code Between App and Clip

App Clips can use shared code! Move common logic to a Swift Package or a shared module within the same project.

Structure:

📁 Shared
  └── Models, Services, Views
📁 QuickCoffee (Main app)
📁 QuickCoffeeClip (App Clip)

Import the shared code:

import Shared

📋 App Clip Experience File

To define where your App Clip launches from:

1. Go to QuickCoffeeClip > Info.plist
2. Add NSAppClip with key: UIApplicationSceneManifest
3. Add NSUserActivityTypes, App Clip Experience, and your invocation URLs

For testing URLs like:

https://quickcoffee.com/order?id=123

📱 App Clip Code + Deployment

You can generate App Clip Codes in App Store Connect after uploading your build.

• Go to your app → App Clip section
• Create new Experience
• Attach URLs and App Clip target

✅ Best Practices

• Keep your App Clip under 10MB
• Launch in < 3 seconds
• Design for single-action use cases
• Offer a clear “Open Full App” button

Link("Open Full App", destination: URL(string: "yourapp://home")!)

🧠 Final Thoughts

App Clips are a brilliant tool to reduce friction, especially for physical-world use cases. By combining the simplicity of SwiftUI with the speed of App Clips, you can deliver delightful micro-experiences that convert casual users into full app users.