App Clips for iOS: Getting Started

At Apple’s Worldwide Developers Conference (WWDC) 2020, Apple announced App Clips: smaller, on-demand versions of apps that allow users to perform specific tasks.

App Clips are quite powerful, because they allow users who do not have your app to still use its functionality. From ordering a coffee to parking your car, App Clips have many great uses. Better yet, App Clips offer fantastic ways to discover new apps to try!

In this tutorial, you’ll create an App Clip experience for SwiftyLemonade, a simple app that allows you to buy lemonade using an App Clip. Along the way, you’ll learn:

• What an App Clip is.
• How to add an App Clip target.
• How to share assets and code.
• About App Clip experiences and how to make one.
• How to confirm a user’s location using the Location Confirmation API.
• Working with App Clip notifications.

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial. In the starter project, you’ll find SwiftyLemonade, an app that displays a list of lemonade stands at various Major League Soccer (MLS) stadiums. Build and run to check out the app:

The app shows a list of Swifty’s Lemonade Stands located at various MLS stadiums. You can also mark a stand as a favorite and view a list of your favorites in a separate tab:

To favorite a lemonade stand, long tap an item in the list:

From here, you can select a lemonade stand and order one of Swifty’s famous lemonades. It’s a real hit with soccer fans:

In Xcode, take a look at the main files you will be working on:

• LemonadeStand.swift contains a struct representing a lemonade stand and an array of stands to display in the app.
• Lemonade.swift contains a struct representing lemonade and two menu arrays.
• MenuList.swift displays the lemonade menu for the selected lemonade stand.
• DetailView.swift displays the details of the selected lemonade.
• StandList.swift displays a list of lemonade stands for selection. Here, you can long-press to favorite or unfavorite a stand.
• StandTabView.swift is a TabView for displaying a full list of lemonade stands or lemonade stands marked as a favorite.
• LemonadeStandLocations is a Swift package containing the locations of Swifty Lemonade stands.

In this tutorial, you’ll build an App Clip that brings you to the LA Galaxy menu to buy lemonade.

What Exactly Is an App Clip?

An App Clip is a lightweight version of an app that enables users to perform a specific task without installing the full version of the app. This allows the user to access the right parts of your app right when they need them. To launch an App Clip, you scan an NFC tag, QR code or App Clip code. This flow is called an App Clip experience.

If a user has your app installed, an App Clip experience will act as entry point into the app. For example, a Coffee franchise app might have an App Clip experience that, when scanned, goes to the menu of the coffee shop you are in. Or if the app is not installed, the associated App Clip Card gets downloaded from the App Store. The App Clip Card is then presented to the user launching this flow. As a developer, you can configure App Clip Cards using App Store Connect, but remember: They require a main app.

Adding an App Clip Target

First, add the App Clip target to the project and name it SwiftyLemonadeClip:

Be sure to set Interface to SwiftUI and Life Cycle to SwiftUI App. Then, click Activate when prompted. A new group named SwiftyLemonadeClip gets added to the Project navigator:

Additionally, Xcode sets the name and bundle identifier for your App Clip. You might notice that the bundle identifier has .Clip as an extension:

Now that you have added the App Clip target, it’s time to test it out. Build and run:

Wow! There’s not much going on here. In the next section, you’ll learn how to share code and assets between both the app and App Clip target.

Sharing Assets and Code Between Targets

With the project set up, you can start sharing assets and code from the App to the App Clip — after all sharing is caring!

Sharing Code and Assets

Because App Clips are lightweight versions of main apps, there will be dependencies. Back in Xcode, click the SwiftyLemonadeClip target and add the LemonadeStandLocations Swift package as a dependency in the Frameworks, Libraries, and Embedded Content section. Your App Clip now has access to the locations of the lemonade stands:

Next, share some Swift files. The App Clip will need to know information about lemonade stands. Click LemonadeStand.swift in the Project navigator and update the target membership in the File inspector to include SwiftyLemonadeClip:

After doing this, you should see a bunch of errors:

Worry not! These errors will disappear once you add the remaining dependencies.

Update the target membership of the following files as you did for LemonadeStand.swift:

• Lemonade.swift
• MenuList.swift
• DetailView.swift
• OrderPlacedView.swift
• StandList.swift
• Assets.xcassets in the SwiftyLemonade group

Score! No more errors!

Designing the App Clip Experience

An App Clip experience is an entry point into your app that gets invoked using a URL. An app could have many App Clip experience URLs that lead to specific tasks. In this tutorial, you’ll launch an App Clip experience URL at one of Swifty’s lemonade stands, showing the menu to place an order.

To kick off, create a new Swift File under SwiftyLemonadeClip and name it SwiftyLemonadeClipModel.swift. Disable the SwiftyLemonade target because the new file only needs to be available to your App Clip:

Then, inside SwiftyLemonadeClipModel.swift, add the following code under import Foundation:

class SwiftyLemonadeClipModel: ObservableObject {
  @Published var selectedStand: LemonadeStand?
}

Here you created a SwiftyLemonadeClipModel class that conforms to ObservableObject. You have also added a @Published property to notify your App Clip of a selected stand.

Next, in SwiftyLemonadeClipApp.swift, you must instantiate your model. Add the following property to the struct:

  @StateObject private var model = SwiftyLemonadeClipModel()

You now must supply this property to the child views of the App Clip. Still in SwiftyLemonadeClipApp.swift, replace body with the following:

var body: some Scene {
  WindowGroup {
    //1
    ContentView()
      .environmentObject(model)
  }
}

In the code above, you set model to be an environment object, making it available to the ContentView view sub-hierarchy. Next, you’ll work out which is the right stand for the clip to select.