BAM

iOS App Clips: a faster and smoother user experience

86% of American adults get their dinner delivered to their home at least once a month (Gloria Food, 2023). And Yelp is committed to helping them get there faster and easier. Imagine yourself. You are coming out of a hard day of meetings, your belly is screaming hungry. You open your fridge, full of hope... except that it's empty. Hopelessness. Your eyes light up: what a good opportunity to order! Except it's already the third time this week... A restaurant then? You haven't been there in ages. You obviously want something good, but also something that's close to home. You open Maps and search for restaurants. Joe's Shanghai looks very good. You open the restaurant details on Maps to find out the hours, except that surprise, you are offered to order at this restaurant directly via Yelp. You click on “Order”. As yet another surprise, the Yelp app, which you didn't even download, opens and allows you to order and pay for your meal. In 2-3 clicks, you're done, no need to create an account! Without knowing it, you've just used your first Clip App.

What are App Clips?

Apple App Clips is a feature introduced with iOS 14 that allows users to quickly access a specific part of an application without having to install it completely on their device. These lightweight versions of apps focus on a specific feature, such as ordering a meal, renting a bike, or paying for parking. They are designed to be used on an ad hoc or occasional basis.

Thanks to their reduced size (between 10 and 50MB), App Clips ensure fast loading and smooth use. They are tightly integrated with Apple services, such as Apple Pay which allows for fast and 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 may even appear in Siri 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 is time to free up your parking space for example!

App Clips are a great opportunity to highlight the value of your app and encourage users to download it for a more complete experience!

Test the App Clips in real life

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

  • Ask a loved one to share a video with you TikTok via iMessage. The App Clip is automatically offered to play the video.
  • go to the site of Meetup via Safari and try to book an event. The App Clip is automatically offered when you try to register.

2 precautions before doing the test:

  • Ask a loved one to share a video with you TikTok via iMessage. The App Clip is automatically offered to play the video.
  • 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 This link to see the magic happen on video, thanks to the Exxon Mobile demo (payment at a gas pump).

Tiktok & Meet-Up

Tech side: how to 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 some assets with your parent application, such as asset catalogs and Swift files.

Association with the parent application

Entitlements should 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 permission is required for the App Clip to 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-identifier++/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-request-install-capable++/code> is an entitlement of our App Clip that identifies the bundle as an App Clip. It is added at the time of signing, which is why it does not appear in the file ++code>.entitlements++/code> from the Clip App.

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

Related domains

To enable your App Clip to be invoked from a variety of sources, such as QR codes, NFC tags, or Safari app banners, you need to use Universal Links. To make these links functional, your website needs to provide the right metadata for Safari to validate the URL and open the correct associated App Clip. So you will need to configure associated domains with your application, by hosting the file ++code>apple-app-site-association++/code> 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 the previous configuration.

Setting up the experience

To customize the App Clip user interface and behavior, and any custom actions or intentions associated with it, you can set up an App Clip experience on App Store Connect.

Test

App Clips can be tested locally using Xcode. A schema is created when you generate the App Clip target. Use this schema 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 download it on TestFlight.

Opening an App Clip from TestFlight

Validation

However, App Clips come with some limitations. 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 Clip App is invoked from a digital link (iMessage, Siri, link in the notes application...)
  • Not all native frameworks and APIs are available.
  • Your App Clip and app should support the same device types. (For example, your app can't 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 highly recommended to share 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 article by Adadaptor.

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

  • Add your iOS React Native dependencies to your target within your ++code>Podfile++/code>
  • Make sure that your ++code>AppDelegate++/code> implements ++code>RCTappDelegate++/code>. This will initialize and configure the React Native environment, including setting the ModuleName for the core React Native component, providing initial properties, and determining the JavaScript bundle URL.
  • Add new generation phases in your target to start the packager and group the JavaScript code of your App Clip
  • Optionally, create a new JavaScript entry point to have a different behavior between your App and your App Clip

And that should work! However, this has a few drawbacks:

  • La waistline of an empty App Clip generated from the react-native @0 .71.7 cli is already around 7MB out of the 10MB limit for iOS 15. One possible optimization is to deactivate Hermes on the App Clip, which can reduce the size by around 3MB. However, you should always pay attention to the size of your App Clip if you want to support older versions of iOS.
  • All of React Native's native dependencies are built in by default. However, you can select them manually to further reduce the size.
  • Any new native dependencies used in your main application and in your App Clip should 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 official documentation. However, there is a major downside to this approach: Flutter dependencies are too cumbersome. Even an empty App Clip takes up around 12MB, which exceeds the 10MB limit. More information on this issue can be found here: https://github.com/flutter/flutter/issues/71098. The new 50MB limit for digital summons will, however, make it possible to unblock the situation as iPhone owners migrate to iOS 17.

Towards a 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 allow for a faster, smoother, and less cumbersome user experience by removing the need to download a complete application to complete a specific task. Their applications are vast, ranging from ordering meals to reserving concert seats to paying for parking.

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

Product Owner ?

Rejoins nos équipes