App Clips — From Business Narration to Development
Imagine you are going to your favorite coffee shop, and you have a long queue in front of you so naturally to speed up the process a bit you would download the app and order to pick it up later, but if you are like me, you don’t want to have so many apps in your phone. Or if you are into startups and angel investors then you know how vital it is to have a good elevator pitch, a 2-minutes pitch that decides if you are worthy or not, pretty brutal, and you can’t waste time and ask the potential investor to download the app.
Two unrelated problems at first glance, but App Clips here for the rescue.
With App Clips, you can let the investor scan a QR code or an NFC tag, and the investor will be able to experience your app first hand, or if you are in your favorite coffee shop you just go to Maps or again scan and order your favorite drink, all without installing the app at all.
Now, What is “App Clips” exactly, from Apple documentation they introduce Apple Clips like this:
App Clips are a great way for users to quickly access and experience what your app has to offer. An App Clip is a small part of your app that’s discoverable at the moment it’s needed. App Clips are fast and lightweight so a user can open them quickly. Whether they’re ordering take-out from a restaurant, renting a scooter, or setting up a new connected appliance for the first time, users will be able to start and finish an experience from your app in seconds. And when they’re done, you can offer the opportunity to download your full app from the App Store.
App Clip is meant to do one task that to represent your full app capabilities,
For example, let’s say a conference that is backed by Twitter, so naturally, Twitter wants people to tweet and share hashtags and whatnot, so App Clips could help them by having a QR code that will allow users to tweet instantly without the need to install the full app, here Twitter encouraged people to try out their platform by showing one task without the hustle of downloading the full app.
App Clip Experiences
An App Clip Experience is the core of App Clips, it is the action that you want your users to use/experience. It’s the answer to what do I want my user to identify with my app. Like a shipping app can use a link to invoke their app experience and the user would see the shipping tracking details. that’s a concise experience that your potential user can identify and appreciate the service.
You can have multiple experiences for multiple purposes continuing with the shipping example you can have the tracking experience and another experience to send a shipment.
Now, your experience must be streamlined as Apple likes to say it which means that your experience is concise, fast, and it does one task, and to do so they added Apple Pay experience, so instead of asking for credit cards information, you can use Apple Pay button directly. And if your experience is fitted for signed-in users you can use the “Sign in with Apple” button instead of creating a login and/or a signup form.
App Clips Invocations
App Clips are heavily based on being easy to invoke using:
1. App Clip Codes:
Using apple provided code tags that can be distinctly identified as an App Clip
2. NFC Tags:
would invoke your App Clip even when your app is locked.
3. QR Code:
using your camera app or Apple’s native QR scanner would invoke your code
4. Safari:
using metadata in your website that would launch your App Clip
using a tag as provided to inform the browser to show your app
5. Messages:
When a user receives a message associate with App Clip, it will appear as a card with a title, description, header image, and a button to let the user open and experience your app.
6. Maps:
If your app is associated with a location, you can configure it to show on the Maps app when clicking on a place.
App Clip Development
Creating an App Clip is fairly simple, after planning what your App Clip would do, in your App project just add a new App Clip target, you may use…
File -> New -> Target... -> App ClipYou will be prompted with the standard target form to add the product name, and if you want to use SwiftUI or Storyboards, and the lifecycle of the target would be SwiftUI or UIKit.
then you may need to Activate the target and voila you officially have an App Clip in your project.
Now, you just need to code your idea.
The invocation
When a user interacts with an invocation method like an NFC Tag or a QR code Apple device would detect the invocation URL, after it has resolved the invocation URL, it will validate it against Apple-App-Site-Association (AASA) file from the Invocation URL domain.
Once Validated, the App Clip would appear and the invocation URL is passed to the App Clip.
Universal links & Associated Domains
Universal links are used to link content in your app or your website. Allowing the user to follow the content of your app or website seamlessly.
Same with App Clips you need to create an associated domain in your App Clip target that from it Apple would know which app to navigate to and it would look something like “appClips:awesomeretnal.com” and as you can pass the link to your app the app would handle arguments so, for example, a real example would be something like “appClips:awesomeretnal.com/rent?scooter_id=id1234” here you can get the scooter id and handle the query in your app using
func handleUserActivity(_ userActivity: NSUserActivity)Keep in mind that you can launch different experiences using different links.
Safari banner
To show a banner on your website that can link to your app clip you must add the meta tag that would look like
<meta name="apple-itunes-app" content="app-clip-bundle-id=com.awesome.app.Clip, app-id=12345ABCD">App Clip Code Generator
You may take the advantage of App Clip Code
First, you need to install App Code Generator tool from Apple App Code Resources
Then by running the command you can generate your App Clip Code
AppClipCodeGenerator generate --url https://appclip.example.com --index 9 --output ~/path/to/filename.svg there are 3 parameters that you pass
--url and you set the URL for your app clip--index and that’s to choose your App Clip color foreground and background colors--output to choose the location and the name of your output file
App Clip Code colors
if you ran AppClipCodeGenerator template you will get an output of 18 colors you can choose from to use as your index
Index: 0 Foreground: FFFFFF Background: 000000
Index: 1 Foreground: 000000 Background: FFFFFF
Index: 2 Foreground: FFFFFF Background: 777777
Index: 3 Foreground: 777777 Background: FFFFFF
Index: 4 Foreground: FFFFFF Background: FF3B30
Index: 5 Foreground: FF3B30 Background: FFFFFF
Index: 6 Foreground: FFFFFF Background: EE7733
Index: 7 Foreground: EE7733 Background: FFFFFF
Index: 8 Foreground: FFFFFF Background: 33AA22
Index: 9 Foreground: 33AA22 Background: FFFFFF
Index: 10 Foreground: FFFFFF Background: 00A6A1
Index: 11 Foreground: 00A6A1 Background: FFFFFF
Index: 12 Foreground: FFFFFF Background: 007AFF
Index: 13 Foreground: 007AFF Background: FFFFFF
Index: 14 Foreground: FFFFFF Background: 5856D6
Index: 15 Foreground: 5856D6 Background: FFFFFF
Index: 16 Foreground: FFFFFF Background: CC73E1
Index: 17 Foreground: CC73E1 Background: FFFFFFAlso, you can experiment with your color running the command
AppClipCodeGenerator suggest --foreground $foregroundColor --background $backgroundColorwhere $foregroundColor and $backgroundColor is your RGB color presented in hex format
The output will be the same colors as your input but if the colors you inputted weren’t valid e.g. the colors don’t have enough contrast the output will be a list of other suggested color
App Clip Code Generator other parameters
There are other parameters that you can use to extend your customization--logo none append to generate command to generate a code without App Clip logo
--type nfc append to generate command to generate a code for NFC tag
--foreground $foregroundColor --background $backgroundColor replace --index with this to add your custom colors
and to see all available commands and options you simply run AppClipCodeGenerator --help
The experience
To this point, you have an app, app clip, and an invocation, but we need one more step on how Apple will handle the App Clip card.
Default App Clip Experience
This is a mandatory step, from AppStore Connect you must configure your default experience by filling:
- Header image: the default image that would show to the user.
- Subtitle: to provide more information about your App Clip.
- Call-to-Action: which is the title of the button that the user will interact with. eg “Open”, “Order”, etc…
Now, your app clip can be invoked from Smart App Banners and links that are shared with users without defining any invocation URL.
Advanced App Clip Experience
We can configure the App clip even further by defining different invocation URL for different experiences, specify you App Clip on Map place, add localization
App Clip limitations
There are limitations (advantages) on App Clip, mainly to ensure user privacy:
- To ensure seamless experience the maximum size of App Clip is 10MB
- App Clips cannot perform background tasks
- App Clips cannot access personal info like motion, music, calls, messages, photos, etc…
- LimitAppTracking is always on App Clips, and both IdentifierForAdvertisers (IDFA) and IdentifierForVendor (IDFV) always return all zeros string.
