Introducing App Clips in iOS 14

Tram Ho

Apple has announced a new feature of iOS14 called “App Clips” to display information from the application without necessarily downloading the entire application. They also describe App Clips as a small part of an app designed for users to preview before downloading.

An App Clips will launch immediately and provide some of its associated functions to users who have not fully installed it. This is a lightweight version of the application, can use for many services.

Basically, it provides a common interface for quickly converting applications into utilities. Through some App clips, NFC or QR Code, the App Clips are formed. According to the WWDC example, when you park, you will use NFC to replace the parking fee that will appear at the bottom of the iphone screen. This is support for Apple Pay to replace payments without entering an account number.

Initialize App Clips.

Along with Xcode you create an additional target for App clips and share the code between the main app and the app clips. Next you can run, debug the newly created app clips on the virtual machine or real device.

You also need to configure it with your web server to allow the system to authenticate your app clips.

Size of App Clips:

Add App Clips Target.

App Clips require a corresponding application that provides at least the same functionality as the App clips and you need to use the same project for the corresponding App clips and app.

If you start with a new project, create a normal iOS application and then create a target for App Clips.

Add Associated Domains Entitlement.

The user runs App Clips from the url navigating to the app clips or if the user has installed the full app. However, you need to add Associated Domains Entitlement to both apps and app clips:

  • Open the project in Xcode and in the project Settings enable Associated Domains capability to add Associated Domains Entitlement.
  • For each URL to run the App or App clips, add the domain to the Associated Domains capability using the syntax: appclips:<fully qualified domain> . For example: appclips:

But you also need config with your server, see more here!

Add Code and Assets.

App Clips have the same structure as other normal apps with additional code and assets. To ensure maintenance, try to share code between the main app and the app clips as much as possible.

  • If you create a new application, build it, execute the code in a modular way. For example create common components into modules and just import them.
  • If you add App Clips to an existing application, consider sharing code between the main application and App Clips to avoid code duplication.
  • Add asset sharing between 2 targets together.

Use Active Compilation Conditions.

When you share code between the main app and the app clips, you may often encounter the situation where you can’t use some app code in the app clips.

In these cases, configure Active Compilation Conditions in the build settings to declare code exclusion conditions.

Now build and run it!

Change server and project side in XCode.

Before the system displays or allows App clips to be called, it will verify the App clips and call the URL. If not verified it will not do that. To be able we need to change the server and XCode projects.

First, add the Apple App Site Association file to your server. Next, you get the appclips key. If you have previously added to the server, then add the appclips key to the existing file. With the following format: { "appclips": { "apps": [""] } ...}

The value of 1 array is the bundle id of the app. Finally in the project, you add the domain to the Associated Domains Entitlemen in both targets.

Configure and Respond.

The system uses the configured URLs in Appstore Connect to launch your App clips. Therefore configuration on AppStore Connect is essential. You can see more here!

Publish Your App Clip.

App clips require an App that corresponds to it, and you will send it as your app’s archive. And note that app clips also need to be censored by Apple.

Project reference: Simle app clips

Reference source:


Share the news now

Source : Viblo