App Clips in iOS 14

Apple has announced a new feature for iOS 14 called “App Clips,” which surfaces information from relevant apps throughout the ‌iOS 14‌ interface, without needing to download an entire app. Apple described App Clips as a “small part” of an app designed to be discovered the moment it is needed.

An App Clip launches instantly and offers some of its associated app’s functionality to users who don’t have the full app installed. It is a lightweight version of your app that offers some of its functionality where and when people need it. They can be used by multiple businesses.

Basically, it provides a generic interface for a quick and seamless transition of apps into useful on-the-spot utilities. It’s a way to use a special part of an app on demand. Through a special app clip code, NFC, or a QR code, an App Clip can be summoned. As per an example given in WWDC, let’s say that you’re parking your car at a meter. Using NFC, only the part of a particular app that you need to pay for the parking spot will show up in a box on the bottom of your iPhone. There is support for Apple Pay so you can have your spot paid for in the blink of an eye without tapping in a credit card number, and using “Sign in with Apple,” there is no need to type in an account number.

Creating an App Clip

With Xcode, you can add an app clip target to your app’s Xcode project and share code and assets between the app clip and app. Like you do with other targets in your project, you use Xcode to build, run, and debug your app clip in a simulator or on a device. In addition, you must configure your web server to enable the system to verify your app clip’s authenticity.

Dimensions of an App Clip are -

Add an App Clip Target

App clips require a corresponding app that offers at least the same functionality as the app clip, and you typically use the same Xcode project for both your full app and your app clip. If you’re starting a new app project, first create a new iOS project with Xcode. If you want to add an app clip to your existing app, open its Xcode project. Then, add an app clip target to the Xcode project:

1. Add a new target using the App Clip template.
2. Choose a product name, select applicable options for your app clip, and click Finish.

Xcode creates all required files for the options you choose, and adds a target for your app clip with:

• A scheme to build and run your app clip and its tests. To build and run your full app, continue using your existing schemes.
• A new capability named On Demand Install Capable.
• The Parent Application Identifiers Entitlement.
• An app identifier for the app clip, using the full app’s app identifier as its prefix, followed by a string. For example, if your full app’s app identifier is $(AppIdentifierPrefix)com.example.MyApp, the app clip’s app identifier would be $(AppIdentifierPrefix)com.example.MyApp.Clip.
• The _XCAppClipURL environment variable as part of the app clip’s scheme that allows you to test invocations.
• Support for the same devices as the full app, not including macOS.

In addition, Xcode creates a new build phase for the app target that embeds the app clip in the app.

Before you add your own code to the app clip target, run the app clip in the simulator or on a device. At this point, the app clip shows an empty white screen because you haven’t added any code and assets yet.

Add the Associated Domains Entitlement

Users launch app clips from invocations that pass an invocation URL to the app clip or, if the user installs the app to replace the app clip, to the full app. No matter which invocations you choose to support, you must add the Associated Domains Entitlement to the app and the app clip targets:

1. Open your project in Xcode; then, in your project settings, enable the Associated Domains capability to add the Associated Domains Entitlement.
2. For each URL that launches your app clip or full app, add its domain to the Associated Domains capability using this pattern: appclips:<fully qualified domain>. For example, add appclips:example.com.

In addition to adding the Associated Domains Entitlement, you must make changes to your server to allow the system to validate your app clip before launch. For more information, see Configuring Your App Clip’s Launch Experience.

Add Code and Assets

App clips make use of the same frameworks as full apps, and adding code or assets to an app clip’s target works just like it does for any other target. Create new source files and assets, or use existing source files and assets as members of the app clip’s target. To ensure the project’s maintainability, both the full app and the app clip should share as much code as possible:

• If you create a new app, build it with creating an app clip in mind, and follow best practices that promote a modular code base. For example, create reusable components, bundle them as Swift Packages, and use the packages in both the full app and the app clip.
• If you add an app clip to an existing app, set aside time to refactor its code base to be modular and share code between the app clip and the full app to avoid duplicating code.
• Add shared assets to a new asset catalog, and use the catalog in both the full app and the app clip.

Use Active Compilation Conditions

When you share code between the app clip and the full app, you may encounter cases where you can’t use some of your app’s code in the app clip. In these cases, take advantage of the Active Compilation Conditions build setting, where you can declare a condition to exclude code.

Start by navigating to your app clip target’s build settings and creating a new value for the Active Compilation Condition build setting; for example, APPCLIP. Then add a check in your shared code, where needed, to exclude code you don’t want to use in your app clip.

The following code checks for the APPCLIP value you added to the Active Compilation Conditions build setting.

#if !APPCLIP// Code you don't want to use in your app clip.#else// Code your app clip may access.#endif

Now build, run, and debug your app clip in the simulator or on a device.

Make Changes to Your Server and Your Xcode Project

Before the system presents the app clip card or allows the invocation of an app clip, it verifies the app clip’s configuration and the invocation URL. If it’s unable to perform the verification, it doesn’t show the app clip card and the app clip doesn’t launch. To enable the system to verify your app clip, you need to make changes to your web server and your Xcode project.

First, add an Apple App Site Association file to your server as described in Supporting Associated Domains in Your App. Next, include an entry for the app clip with the appclips key. If you previously added an Apple App Site Association file to your server, add the entry for the appclips key to your existing file.

The following code shows the content to add. Note how the value for the apps key is an array with just one entry—the app clip’s app identifier.

{ "appclips": { "apps": ["ABCED12345.com.example.MyApp.Clip"] } ...}

Finally, in Xcode, add your website’s domain to the Associated Domains Entitlement of both app and app clip.

Configure and Respond to Invocations

The system uses URLs you configure in App Store Connect to launch your app clip. Therefore, identifying URLs that launch your app clip, responding to them on launch, and registering them in App Store Connect is essential to creating an app clip. For more information, see Configuring Your App Clip’s Launch Experience and Responding to Invocations.

Publish Your App Clip

App clips require a corresponding app. When you’re ready to publish your app clip, submit it as part of your app’s archive. Note that your app clip must pass the App Store review process after you submit it for review.

For details you can refer to a the Sample App Clip code .

Thanks for going through the article !