BAM

iOS App Clips: a faster, smoother user experience

86% of American adults have dinner delivered to their home at least once a month (Gloria Food, 2023). And Yelp is determined to help them get there faster and easier. Picture this. You've just come out of a hard day of meetings, your belly is screaming for food. You open your fridge, full of hope... except it's empty. Despair. Your eyes light up: what a great opportunity to order! Except that it's already the third time this week ... A restaurant then? You haven't been for ages. You obviously want something good, but you also want something that's close to home. You open Maps and search for restaurants. Joe's Shanghai looks very good. You open the restaurant's details on Maps to find out its opening hours, except that surprise, you're offered to order from this restaurant directly via Yelp. You click on "Order". Another surprise: the Yelp application, which you haven't even downloaded, opens up, allowing you to order and pay for your meal. In just 2-3 clicks, it's done - you don't even need to create an account! Without realizing it, you've just used your first App Clip.

What are App Clips?

Apple's App Clips are a feature introduced with iOS 14, allowing users to quickly access a specific part of an app, without having to install it in its entirety on their device. These lighter versions of apps focus on a specific functionality, such as ordering a meal, renting a bike or paying for parking. They are designed to be used on a one-off or occasional basis.

Thanks to their reduced size (between 10 and 50MB), App Clips ensure fast loading and fluid use. They are tightly integrated with Apple services such as Apple Pay, enabling fast, secure transactions and a simplified user experience.

App Clips can be discovered and accessed in a variety of ways, including via QR codes or App Clips codes, NFC tags, links shared via iMessage or Safari. They can even appear in Siri's suggestions based on your location!

When the App Clip is installed, it is also possible for the developer to send notifications to the user within 8 hours without additional authorization - to warn you that it's time to free up your parking space, for example!

App Clips provide an excellent opportunity to highlight the value of your application and encourage users to download it for a more complete experience!

Testing App Clips in real life

If you want to test the fluidity and speed of an App Clip yourself, you can :

  • ask someone you know to share a TikTok video with you via iMessage. The App Clip is automatically suggested for video playback.
  • go to the Meetup website via Safari and try to book an event. The App Clip is automatically suggested when you try to register.

2 precautions before performing the test:

  • ask someone you know to share a TikTok video with you via iMessage. The App Clip is automatically suggested for video playback.
  • make sure your OS is up to date (iOS 14 minimum)
  • uninstall the application in question, otherwise it will open instead of the App Clip!

Finally, you can click on this link to watch the magic happen on video, thanks to the Exxon Mobile demo (payment at a petrol pump).

Tiktok & Meet-Up

Côté Tech: how do you configure an App Clip on your project?

Creation

To create an App Clip, you need to add a new App Clip target to your Xcode project. This target shares certain resources with your parent application, such as asset catalogs and Swift files.

Association with parent application

Entitlements must be defined to ensure that the App Clip and the parent application communicate securely.‍

  • ‍++code>com.apple.developer.associated-appclip-app-identifiers++/code> is a parent application entitlement used to specify the bundle identifier(s) of associated App Clips that are authorized to communicate with our application. This entitlement is required so that the App Clip can access certain APIs, such as the Keychain, that are shared with the parent application. It is added by Xcode during the archiving process.‍
  • ++code>com.apple.developer.parent-application-identifiers++/code> is an App Clip entitlement used to specify the bundle identifier(s) of the parent applications with which the App Clip is associated.‍
  • ++code>com.apple.developer.on-demand-install-capable++/code> is an entitlement in our App Clip that identifies the bundle as an App Clip. It is added at signature time, which is why it does not appear in the App Clip's ++code>.entitlements++/code> file.

At this stage, you can create and deploy your App Clip. However, it is not yet ready for production.

Related areas

To enable your App Clip to be invoked from different sources, such as QR codes, NFC tags or Safari application banners, you need to use universal links. To make these links functional, your website needs to provide the right metadata so that Safari can validate the URL and open the correct associated App Clip. You'll need to set up domains associated with your application, by hosting the ++code>apple-app-site-association++/code> file on your server.

Starting with iOS 16.4, you can also invoke your default App Clip Experience from a default link generated by Apple. This link does not require any previous configuration.

Experiment setup

To customize the App Clip's user interface and behavior, as well as any associated personalized actions or intentions, you can set up an App Clip experience on App Store Connect.

Test

App Clips can be tested locally using Xcode. A schematic is created when you generate the App Clip target. Use this schematic to create and test your App Clip locally.

Deployment

However, not all distribution platforms support App Clips. To test your App Clip in an iso-production environment, you need to upload it to TestFlight.

Opening an App Clip from TestFlight

Validation

App Clips do, however, come with certain constraints. Here are 3 limitations that could have a significant impact on your plans:

  • The size of the App Clip must be less than
    - 10 MB for iOS 15 and earlier
    - 15 MB for iOS 16
    - 15 MB for iOS 17 when the App Clip is invoked from a physical link (QRCode, NFC)
    - 50 MB for iOS 17 when the App Clip is invoked from a digital link (iMessage, Siri, link in the notes app...)
    ‍‍‍
  • ‍Not allnative frameworks and APIs are available.
  • Your App Clip and your application must support the same device types. (For example, your application cannot support both iPhones and iPads if your App Clip only supports iPads).

App Clip in the multiplatform world

App Clips can be integrated into a Flutter or React Native application and implemented natively. However, it is strongly recommended to share the code between the application and the App Clip to avoid re-implementing all the application logic and user interface in Swift.

React Native

The React Native rendering system can be used in an App Clip. In 2021, Shopify experimented with this and summarized it in this article. If you're looking for a detailed article on how to set up an App Clip in React Native, you can check out this Addaptor article.

In short, for this to work, you need to :

  • Add your iOS React Native dependencies to your target inside your ++code>Podfile++/code>‍
  • Make your ++code>AppDelegate++/code> implement ++code>RCTAppDelegate++/code>. This will initialize and configure the React Native environment, including setting the moduleName for the main React Native component, providing initial properties and determining the JavaScript bundle URL.
  • Add new generation phases in your target to start the packager and bundle the JavaScript code of your App Clip
  • Optionally, create a new JavaScript entry point for different behavior between your App and your App Clip

And it should work! However, there are a few drawbacks:

  • The size of an empty App Clip generated from cli react-native@0.71.7 is already around 7 MB of the 10 MB limit for iOS 15. A possible optimization is to deactivate Hermes on the App Clip, which can reduce the size by around 3 MB. Nevertheless, you'll need to continually pay attention to the size of your App Clip if you wish to support older versions of iOS.
  • All native React Native dependencies are integrated by default. You can, however, select them manually to further reduce size.
  • All new native dependencies used in your main application and in your App Clip must be added to both targets. If you forget to add one, it can lead to bugs.

Flutter

The Flutter rendering system can be used in an App Clip, as explained in the official documentation. However, this approach has one major drawback: Flutter dependencies are too heavy. Even an empty App Clip takes around 12 MB, which exceeds the 10 MB limit. More information on this problem can be found here: https: //github.com/flutter/flutter/issues/71098. The new 50MB limit for digital invocations will, however, unblock the situation as iPhone owners migrate to iOS 17.

Towards wider adoption of App Clips in France

In short, App Clips have the potential to revolutionize the way we interact with our mobile applications. They enable a faster, smoother and less cluttered user experience by removing the need to download a complete app to accomplish a specific task. Their applications are vast, ranging from ordering meals to booking concert tickets to paying for parking.

However, despite their undeniable potential, App Clips are still not widely used in France. As the technology continues to develop and improve, there's no doubt that their adoption and use will become increasingly commonplace. So now is the perfect time to start exploring the potential of App Clips.

Product Owner ?

Join our teams