App Clips- Fragment of your application

With the release of iOS 14, Apple added an innovative feature called App Clip. It is a small part of an app that gives access and experience to your app.

Let’s start with App Clip

Basic introduction of App Clip

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.

The configuration of your App Clip experiences happens when you upload the first build that contains an App Clip to App Store Connect.

Why App Clips?

App Clip gives a tour of your application. If your app provides an in-the-moment experience that helps people perform a task over a finite amount of time, and users can download your app from the App Store.

How user invokes an App Clip?

Users can launch the App Clip by performing one of the following.

Smart App Banner may have on a website in Safari or an app that uses SFSafariView Controller.

Configuring App Clip’s Launch Experience:

1. Advanced (by scanning an App Clip code, NFC tag, QR code, physical location, siri suggestions, maps app).

2. Default (tapping a Smart App Banner on a website or sharing App Clip card using text message).

The App Clip receives an invocation URL that determines what information appears on the App Clip card on launch.

When to use advanced App Clip?

Invocation Flow

App Clip starts when a user interacts with an invocation.

An app can only have one App Clip but a developer can create several cards for a different experience.

App Clip Card contains header image, title, subtitle, and call to action like the “open” button of App Clip.

Keynotes before you start

App Clip cannot be packaged separately from your app.

App Clips don’t work in the private mode of safari. Once you open the App Clip of a particular app, it will be added to App Library. App Clip banner will not work on third-party browsers.

App Clip experience methods

(Image is from Apple)

The Invocation URL always starts with ‘https://simform.com/’. ‘https’ is the scheme and ‘simform.com’ is the host or domain.

Let take a detailed look 👀

Default App Clip Experience (Associating your App Clip with your website):

With each invocation,

1. The system verifies if the invocation’s URL domain matches with the URL used to associated the App Clip on your website.
2. After it verifies the invocation, the system uses the invocation URL to determine which App Clip experience to use for launching your App Clip.
3. It then uses the App Clip experience’s metadata to populate the App Clip card and passes it to the App Clip-on launch.

“When users install an App Clip’s corresponding app, the app replaces the App Clip. Every invocation from that moment on launches the app, as a result, you must also associate the app with your website. The app must handle all invocations and offer the App Clip’s functionality.”

How does safari understand the smart banner is App Clip?

Configure a Default App Clip Experience

An App Clip always requires a corresponding app, and you submit your App Clip’s binary together with your app’s binary to App Store Connect. On the app version page, expand the App Clip section, and provide the following metadata for the App Clip card:

(Screenshot from AppStore Connect)

For your default App Clip experience, the invocation URL that’s available to the App Clip-on launch is the URL of the website you associated with the App Clip and that displays the Smart App Banner.

You also need some changes on the server-side

App side: 📱

Using Associated Domains entitlement, you can set up domains. To set up, open the project’s Signing & Capabilities > Associated Domains Entitlement to the project.

To add the domain to the entitlement, click + button of the Domains tab. Add the appropriate prefix for the service your app will support and your site’s domain. Only include the desired subdomain and the top-level domain. Don’t include path and query components or trailing slash (/).

You can’t specify a wildcard for an App Clip.

For domain, specify uses the following format.

<service>:<fully qualified domain>

Pinpoint: 📓

You just need to enable an alternate mode by adding a query string to your associated domain’s entitlement if you are featuring to bypass the CDN as follows:

<service>:<fully qualified domain>?mode=<alternate mode>

Add an App Clip to your project

You can add App Clip to your existing project by following the steps,

1. Add a new target using the App Clip template.
2. Fill in the details and click Finish.

XCode creates all required files for the options you choose and adds a target for your App Clip like this

Scheme

Capability

Device Support

Environment Variable

Bundle Identifier

For device support, the app does not include macOS.

Now, how to share code between App Clip and app?

It’s possible by using Active Compilations Conditions we can share code & assets between App Clip and app.

Under Build settings > Swift Compiler > Custom Flags settings.

You can share code/files to maintain App Clip by clicking your App Clip target membership.

Responding Invocations:

To respond to an invocation and access the URL, query the NSUserActivity.

To access the NSUserActivity object on launch, the followings are the way to access:

• SwiftUI lifecycle: onContinueUserActivity(_:perform:) .
• Scene-based lifecycle: On the first launch, the system calls the scene(_:willConnectTo:options:) callback. If the app or App Clip is suspended in memory and the user launches it, the system calls scene(_:willContinueUserActivityWithType:).
• UIApplication lifecycle: application(_:continue:restorationHandler:) callback. Note that you don’t have access to the NSUserActivity object in application(_:didFinishLaunchingWithOptions:).

Customize metadata using Advanced App Clip experiences:

You can also take advantage of the advanced App Clip experience. On the App store got to the iOS app versions > click Advanced App Clip experiences.

To support additional invocations, create an advanced App Clip experience in App Store Connect.

Then you need to specify the following details to configure Advanced App Clip:

1. App Clip’s invocation URL.
2. Add metadata header image, title subtitle.
3. Is your App Clip experience associated with a place? Yes or No.
4. Set map actions which is associate with this App Clip experience.
5. After the setup of the place, the app store will ask you a few questions about the relationship between place and your app and it will show your configurations on the App Clip experiences page.

Testing:

To configure an invocation URL for debugging using Local Experience,

1. In XCode, choose Product > Scheme > Edit Scheme, select your App Clip’s scheme, and select the Run action.
2. Check the _XCAppClipURL environment variable is present. If it’s missing then add the environment variable with invocation URL and enable it by checking the checkbox

You don’t need to associate your App Clip with your website or upload a build to TestFlight.

Build and run your App Clip’s scheme on your test device to make sure the App Clip is cached on the test device

On your test device, open the Settings > Developer > Local Experiences, and select Register Local Experience.

(screenshot from the iOS device)

Enter the invocation URL you want to test.

Launch the App Clip using any App Clip invocation method.

Local Experiences override the Advanced Experiences in App Store Connect.

Once you scan your QR code or NFC code, after configuration of local experience it will show your App Clip Card like this

• Local experiences only launch an App Clip that’s signed for Development, Ad Hoc, or TestFlight distribution.
• Remember to remove the local experience before testing the App Clip experiences you configure in App Store Connect.
• The Smart banner only works after your app is published or enabled Pre-order on App Store.

Beta testing (TestFlight):

On AppStore > TestFlight > Build detail > Add App Clip invocation (you can add up to 3 invocation).

Creating an App Clip experience for testers in TestFlight requires you to associate your App Clip with your website.

Testers can also configure a local experience to launch the App Clip you distribute with TestFlight.

Testers must launch the App Clip from an App Clip experience for testing to ensure that the App Clip is cached on the device which are configured in App Store Connect .

Check the Validation Status of Your App Clip

You can verify the configuration of your App Clip’s AASA(Apple App Site Association) file after you’ve uploaded a build. To check the verification status:

1. Open App Store Connect in your browser and navigate to a build’s details page.
2. Click View Status in the App Clip section to show the domain validation status.

(Screenshot from AppStore Connect)

Note: Keep the text that appears on the App Clip card short: use up to 30 characters for the title and up to 56 characters for the subtitle.

App Clips Limitations:

Apple has imposed several limitations on App Clips for users with maximum privacy and transparency.

The App Clip by Apple provides easy advertising and an easy user experience for your business. It makes your product more reliable.

Conclusions:

The App Clip by Apple provides easy advertising and an easy user experience for your application. Choose your App Clip type and it makes your product or service more reliable.

Hope these helped you out and you learned something new today, if you enjoyed reading this article be sure to throw me a couple of claps.👏