The next time you want to order food or book a cab on your iOS device, you may not have to download an entire application, thanks to iOS 14 App Clips.
With an explosive growth of apps in App Store, it has been increasingly difficult to engage a user with your application especially if the application does multiple things. Downloading time, understanding the feature and size of the application are also major factors for a user to decide on downloading an application. The answer to this problem is App Clips which loads a small portion of an app when required, offers an app-like experience and disappears after the task is done.
App Clips are small in size and not more than 10MB. You can discover App Clips through QR codes, NFC Tags, scan them with iPhone's camera. App clips can also be launched from Safari, Maps, and Messages.
App Clip use cases
The main purpose of the App Clip is to increase user engagement, making it as easy for users to interact with any app. Any company providing a mechanism for quick goods or services orders can use App Clips.
Below are some use cases for App Clips:
- Cafe order payments
- Cars parking spot rental
- Hotel self-check-in
- Electronic queue management (like at banks)
- Bicycle/Vehicle rental payments
- Discount coupons validation
When you order food from a restaurant, you need to download the full app first and submit personal details to register. With the App clip, the user need only load the App clip with the invocation URL (using any invocation method as mentioned above) select the menu and pay the bill. The demo project for the App Clip is attached here.
Create an App Clip target in Xcode
As App Clip is a small part of an app, it’s developed in the same Xcode project as the full app using the iOS SDK.
To add App Clip target in Xcode: Click on the project in the Project Navigator to show the project settings, then click the "+" button at bottom of the target list to add a new target.
Select the App Clip for the new target.
After selection enter the target details and create an App Clip.
After you create our first App Clip target in Xcode, you are likely going to notice that it’s basically just a regular iOS app target. Now it is required for every App Clip out there to share code between the main app and its embedded App Clip. This can be done in two ways, such as by adding source files and resources to both targets in Xcode, or by using shared frameworks. App Clips will use the same frameworks as the normal app; adding code or resources to an App Clip’s target works just like it does for any other target.
To ensure the project's maintainability, both App Clip and the full app should share same code and resources.
While creating a new app, keep in mind that you are also creating an App Clip and that you need to follow best practices that promote a modular codebase. Creating reusable components and bundling them as swift packages can be helpful in using them in both App and App Clip. This will be helpful for us in easy coding and maintainability of our project.
If you want to add an App Clip to an existing app, the code should be refactored in a such a way that it is both modular and reusable so that duplicate code can be avoided. Do keep in mind that the App Clip size should not exceed 10MB size. With the App Clip target selected, you can now run it directly from Xcode.
For making the code reusable you may encounter cases where you can’t use some of the app’s code in the App Clip but creating separate modules for app and App Clip code won’t be feasible. In such cases, make use of the Active Compilation Conditions in the build settings, where you can declare a condition to exclude or include code.
Active Compilation code
Below is the code for writing the logic for using the active compile condition.
How to test App Clip
When you create App Clip, it is important to test the possible invocations and the App Clip launch experience to make sure that App Clip responds as expected. You can test the App Clip launch experience in different ways as mentioned below.
- Configure an invocation URL for debugging in Xcode
- Create a local experience on a device and test invocation from visual codes or NFC tags during development
- Test it by creating an App Clip experience in TestFlight for testers
Debug in Xcode with invocation URL
Using Xcode you can build, run, and debug an App Clip on the device or a simulator. For debugging App Clip invocations provide an invocation URL for testing.
To configure an invocation URL for debugging:
- In Xcode, select Product -> Scheme -> Edit Scheme and select App Clip’s scheme. Then select Run action.
- Next in the Arguments tab, check if the "_XCAppClipURL" environment variable is present. When you add an App Clip target to your project, Xcode adds this environment variable for us. Add the environment variable if it’s missing.
- Then, set its value to the invocation URL that you want to test. Make sure you enable the variable by checking the checkbox next to it.
Then build and run the App Clip to access the test URL you configured from a NSUserActivity object.
Invocation URL
When you debug App Clip with Xcode, the App Clip launches the same as our main app and the phone doesn’t display the App Clip card. To view the App Clip card on invocation when testing, you need to create a local experience.
How to create a local experience
When you develop an App Clip, you need to test invocations with visual codes and NFC tags. To do that we need to create a local experience on our test device.
For the App Clip card, you need to configure some card details like choose image, title, subtitle, a call-to-action. This is an important task because the App Clip card is the user’s first interaction when they launch the App Clip.
For creating a local experience first, add the App Clip to a testing device using any of the following methods:
- Build and run the App Clip on a device.
- Archive the app to which the required App Clip is added, select that archive and export the App Clip’s binary for development or Ad Hoc.
- Then add the App Clip to a device by dragging the App Clip’s exported .ipa file to a connected device in Xcode’s devices and simulators window.
- Then we need to distribute our App Clips to testers using TestFlight. The system caches the App Clip on the device when a tester launches the App Clip using the TestFlight app.
For registering local experience on the device, open the Settings app, navigate to Developer -> Local Experiences -> Register Local Experience.
Next, configure a local experience and enter the card details. The App Clip card details are:
- A URL prefix that invokes the App Clip
- A call-to-action verb
- App Clip card’s title and the subtitle
- Header image
- App Clip’s bundle identifier
To launch the App Clip with the local experience and display the App Clip card, use any favourite tool to print a QR code or write a NFC tag, then scan the QR code or NFC tag we created.
Local experiences only launch an App Clip that’s signed for Development, TestFlight distribution, or Ad Hoc. They don’t launch an App Clip for the full app that is published on the App Store. Make sure to remove the local experience before testing App Clip experiences configured in App Store Connect.
Invoke an App Clip
You can't get the App Clip directly in the App Store. Instead, you could discover it when and where they are needed and launch the App Clip by performing one of the following invocations:
- On scanning an NFC tag or visual code at a physical location
- Tapping a location-based suggestion from Siri Suggestions
- Tapping a Smart App Banner on a website
- Tapping a link in the Maps app
- Tapping a link that someone shared in the Messages app as a text message.
NFC tag or visual codes
App Clip can be invoked by a tap on an NFC tag or by scanning the QR code(visual code), which encodes an invocation URL associated with an App Clip. An invocation URL is configured inside the tag. These NFC tags can be created using any infrastructure or tool capable of creating NFC tags readable by Apple devices. NFC tag can be read even when the screen is locked.
The QR code must be scanned using the Camera app or Apple’s native Barcode reader for invoking App Clip.
Smart app banner
Tap onsmart app banner to invoke App Clip. Metadata can be added to the header of a website i.e. to create a smart app banner that will be shown in Safari. Here is a sample code snippet that is required to add:
The app-id is included in cases where the device is running on iOS 13 or earlier. Now the banner will redirect the user to the full app within the App Store. The URL that displays the banner is the Invocation URL.
iMessages
The Invocation URL here is configured in the site’s URL. The app clip invocation URL is to be configured in the metadata of the website.
Maps app
On tapping a link in the Maps app invokes App Clip. Tags on a map may include a tag that has the invocation URL.
How to find App Clip on iPhone
Go to App Library in the device, then check recently added.
How to delete App Clip from iPhone
If you don't use an App Clip for 30 days, it is automatically deleted from your device. You can also delete App Clips in Settings.
Go to Settings of iPhone -> App Clips, then tap Remove All App Clips or selected app clip.
App Clip limitations:
- App Clips are limited to 10MB in size.
- Except for its corresponding full app, App Clips cannot share data with any other app.
Conclusion
App clips are lightweight, fast, and very efficient way for users to easily load and experience the functionality an app offers. They are very useful in our day to day activities like ordering food from restaurants, renting vehicles, at parking places, and many more. When the app clip experience is finished user can download the full app from the App Store.
