App Clips - Users Redemption, Developers Nightmare

I remember once I was listening to a podcast named StackTrace, the guy there (@_inside) had a very interesting idea of apps. He believed that apps could do better than being only icons in our phones Home Screen. At that time I just enjoyed the idea but now with having App Clips around, I can imagine how great user experiences could be implemented with adding App Clips to our Apps and make them available whenever they are needed.

App Clips must be available and discoverable for users at the time that they are needed.

Imagine that you are a big scooter fan and you use scooters every day or so. Depending on how many scooters brand are out there you need to go to Appstore find they apps, download and install them, and at the time that you see an scooter you have to go to your home screen and find that specific scooter app and if it happens to be a new brand that you don’t have the app for, then in the middle of the street you need to go to Appstore and find the app and install it :) By now you can imagine how difficult it could be in some cases just to be reliable on an app. The better experience in this case could be, no matter what kind of scooters you want to ride, you just get to the scooter, scan a QR Code or NFC Tag and you are ready to go. That is the power of App Clip.

Create an App Clip

Let’s have a look on how to build an AppClip for your existing project. By following the next 5 steps you can have a basic App Clip and the idea of how App Clips work.

Step 1: Add an App Clip target to an existing project

An App Clip is basically another target in your project. So all you need to start creating an App Clip is to add an App Clip target to your existing project and share relevant code and assets with your App Clip target. This could be either the easiest part in the process or a nightmare depending on your project structure. If you already have a modular code base it should be an easy task but if you don’t then you need to set time aside to refactor your code base.

The Organization Identifier in this case is your full app Bundle Identifier. App Clips by default get your full app bundle Id as prefix.
If you have more than one App target in your project, make sure the right App is selected in the “Embed in Application”.

Step 2: Configure your App Clip Launch Experience

When you create an App Clip you need to associate both your App Clip and your full app to your web server. It enables the system to verify an App Clip. To enable the system to verify your App Clip you need to follow the 2 following steps.

  • Add the Associated Domain File to Your Website:
    In this part you need to go to your web server and add the “apple-app-site-association” Json file(without extension) to the “.well-known” folder. Next step is to add the following entry to your AASA file:
    {“appclips”: { “apps”: [“ABCD12345.com.example.clip”] }}
    where “ABCD12345” is your Apple Developer Account team id and “com.example.clip” is your App Clip bundle id.
    If you already support Universal Link, then the file is there, you just need to add the “appclips” entry.
  • Add the Associated Domains Entitlement to Your App:
    In this step you need to add the “Associated Domain” entitlement both to your App and your App Clip. you can do that by adding the “Associated Domain” capability. Here is where you set your domain url which is a valid Url and part of your invocation url. Make sure that the entry has the following pattern:
    appclips:yourdomain


Step 3: Configure App Clip card

Now that you have associated your App Clip and your full app to your web server the system is enable to verify your app clip, now it’s time to config the App Clip card.
After you upload a build to Appstore Connect that has an App Clip, the App Clip section becomes active, that’s where you can configure either the default experience or Advanced experience based on the Invocation type that you have decided to support. In case of App banner and Messages support you only need to config the default Experience, for the rest you have to go through Advance App Clip experience.

Step 4: Responding to invocations

If you have reached to this step it means that you have an App Clip that the system has managed to verify it and launch the App Clip card, now as soon as the user presses the action button on App Clip card, the Invocation URL will be passed to your code. It’s time to react based on the received Invocation URL. It is very well explained in developer.apple.com

Step 5: Testing your App Clip experience

As it is usually not a good idea to test your code in Production, Apple has provided two ways to test your App Clip locally.

  •  Via Xcode
    As soon as you create an App Clip target, Xcode adds a new Environment Variable to your App Clip scheme. You can put your invocation URL there and receive it as NSUserActivity in your code. In this way you won’t see the App Clip card. If you want to see the App Clip card you can Register a local Experience.

  • Register a local experience
    In iOS 14 there is a new section in Settings->Developer named Local Experiences

Here you can configure a local experience:

The “URL Prefix” is your domain url.
The “Bundle ID” is your App Clip bundle id.
And the last part is about the App Clip card.
By Registering a Local Experience you don’t need to go through Step 2 and Step 3.

Good to knows

1- You can persist user data in a shared storage, your full app can access that data as soon as it is installed.

2- As soon as the user installs your app, all invocations will be sent to your full app not the App Clip. It is very important that your app can respond to invocations the same as your App Clip.

3- If the user grant Camera, Microphone, … permissions to your App Clip, your full app can inherit those, so you don’t need to ask for them again.

4- Your App Clip size cannot be more than 10 megabytes after App thining.

5- You cannot access user’s Health data in your App Clip.

Resources:

Leave a Reply