Setting Up and Testing App Clips in iOS 14

With iOS 14 fast approaching a public release, one of the big new features is undoubtedly App Clips, but until this week, it was not possible to submit any apps to TestFlight with App Clips included, nor really test them.

Thanks to the release of Beta 5, that has all changed, but testing App Clips is a bit, to say the least, precarious at the moment. Below are a few tips and tricks to be able to test your App Clip experience locally, as well as a few caveats.

To begin, Apple’s guide on creating App Clips is solid, so be sure to follow these steps first:

https://developer.apple.com/documentation/app_clips/creating_an_app_clip

Testing App Clips Locally

After creating the App Clip target per Apple’s instructions above, you’ll need to first select that target and build it to your test device so that the App Clip is cached on there. Without this step, you’ll never be able to get the App Clip to show on the device.

Image for post
Image for post
Running the App Clip extension on a test device
  • Set up a Local Experience by going into the Settings app on your test device, tap on the Developer menu, and under APP CLIPS TESTING you’ll see a Local Experiences menu.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Configure the Local Experience (in live apps, this would be configured in App Store Connect)
Image for post
Image for post
Smart App Banner in action, showing the new App Clip design and prompt

You’ll now see the Smart App Banner at the top of the page with the title you configured in the Local Experience. Tapping on the Open button here will immediately launch you to your App Clip, but you probably wanted to see the fancy new App Clip Card, right? Read on…

Display App Clip Card

The magic to getting the App Clip Card experience requires you to actually remove the App Clip from your device’s cache, but not reload the website with the Smart App Banner as the OS would then not be able to find the App Clip itself. Tricky little bit of timing, but follow these steps after the ones above and you’ll be all set:

  • Go back into the Settings app and scroll down to the very top of the section with all of your apps, where you’ll find a new entry titled App Clips
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Remove the App Clip from the cache, then tap on the OPEN button again to see your configured App Clip Card

Note that the Open button in the App Clip Card seems to be disabled right now, and tapping on the App Store link at the bottom of the App Clip Card just dismisses the card during this development phase.

Caveats

There are a few problems that you might run into:

  • If you change any of the data in your Local Experience, and immediately switch back to Safari to try to open it again, you’ll likely get this screen:
Image for post
Image for post
Broken App Clip Card following a Local Experience change
  • To fix this, you’ll need to start this whole testing process over by reinstalling the App Clip target onto your device, open your activation URL in Safari (note that you might need to add on an extra query parameter to prevent a cache issue which I’ve run into a few times, eg, I used https://getcardpointers.com/?t2 to get the smart app banner to load again). Leave that window open, open the Settings appand remove it from the App Clips menu in Settings, then switch back to Safari and tap on OPEN again and you should see the revised Local Experience.

There is one other caveat to mention, which is an issue that many folks have run into when submitting an app with an App Clip extension to TestFlight, it gets stuck indefinitely in the “Processing” stage, even days later. If you submit an empty App Clip, it seems to get through just fine. I’ve yet to figure out a solution to this problem, so if you have a way to get it through TestFlight with Beta 5, please DM me @emcro on Twitter.

Undoubtedly this process will improve in future betas, but hopefully this helps get some more App Clip work moving along. I’d love to see what you’ve been working on, so please do get in touch.

CardPointers was made to make credit cards easy by knowing which card to use for every purchase to maximize your points and cash back, help you track the various monthly and yearly credits offered by your cards, and to guide you around the complex world of when to sign up for your next card and how to get the best welcome bonuses available, often worth hundreds of dollars.

If you want to see everything that I’ve been working on for iOS 14, including a number of different widgets and (I think) the world’s first finance app with interactive gaming light bar support (yep, really!), you can join the CardPointers beta on TestFlight and the Airport App, or download the iOS 13 version from the App Store.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store