Test and Invoke App Clip Cards with NFC tags

iOS 14 comes with many new features for end-users and developers, and App Clips is one of my favorites. The idea of sharing links or tapping your phone on an NFC tag to instantly launch your app's snippet is fascinating.

A few days back, I started working on the App Clip for Unwind. Unwind is an app consisting of deep breathing exercises to help you wake up fresh, improve focus, and sleep better.

The idea for Unwind's App Clip is to show the best breathing exercise based on the time of the day, and make the user calm and relaxed in just a single tap. To achieve this, I stripped-down all the secondary features like the mindfulness history, journal, stats, etc., as they didn't make much sense in an App Clip.

Although the whole experience of creating and testing the App Clip was (luckily) relatively smooth for me, I did hit a few roadblocks, and I'm hoping this post will help you avoid them.

I'll be assuming you already have your App Clip ready. If not, check out the docs to learn how to create App Clips for your app. Once you've done that, you can proceed with testing the App Clip Cards with NFC tags.

What you'll need:

• Rewritable NFC tags
• iOS device running iOS14 Beta 5 or later
• A working website

Setting up Associated Domains

First of all, make sure that you have set up Associated Domains for your App Clip Target in Xcode.

You'll also have to upload a file called apple-app-site-association on your website's root directory and add the following content.

{
	"appclips": {
		"apps": ["<TEAM_ID>.<APPCLIP_BUNDLE_ID>"]
	}
}

You can read more about Associated Domains here.

Publish the changes to your website, and upload a new build for your app on App Store Connect. After it finishes processing, we can start verifying if everything works correctly.

Verifying the App Clip Experience URL

Head over to App Store Connect and create a new version of your app. You'll notice a new section called App Clip which looks something like this:

Don't bother filling out this form yet. We're only here to verify that our Associated Domain set up is working correctly.

Click on Edit Advanced Experiences and start filling out the details. In the field App Clip Experience URL, type your website's URL that you added in your Associated Domains. If everything is correct, you should be able to complete the setup and submit the App Clip to Apple.

However, if there's anything wrong with your set-up, you might see the following error.

Make sure you've followed all the steps correctly. This might also happen due to the caching of your website, so clearing your cache might help. After you've fixed the App Clip Experience URL issues, finish the setup, and hit Submit.

Setting up Local Experiences

To make the NFC tags work, you'll first have to set up local experiences on a device running iOS14 Beta 5 or later.

To do that, head over to Settings → Developer → Local Experiences  → Register Local Experience. Type in the URL and Bundle ID (same as the one you entered in App Store Connect) and fill out the App Clip Card details. These details will show up in the App Clip Card when you tap your phone on to the NFC tag.

This is what the set up looks like for Unwind.

Testing the App Clip Card with an NFC Tag

Make sure you have the App Clip installed on your test device. It could either be from Xcode or TestFlight. Without this, the App Clip Card won't show up.

Now on to the fun part! First, we need to program our NFC tags to open the invocation URL. To program the NFC tag, I used an app called Smart NFC. It's simple to use and works great. Just scan the empty tag, add your URL, and save.

Finally, tap your phone on the NFC tag, and your beautiful App Clip Card should show up instantly. If not, then there must be an issue with the installation of your App Clip or the set up of local experiences. Go back and verify everything is correct (especially the URL, and bundle ID).

Here's what the Unwind's App Clip Card looks like:

I hope this post helps you successfully test your App Clips with NFC tags. If you run into any issues or need help, feel free to reach out to me on Twitter or Email. Also, don't forget to check out Unwind!

Thanks to Emmanuel Crouvisier for helping me throughout the process. If you'd like to test App Clip Cards using website banners in Safari, then definitely check out his fantastic post.

Thank you for reading!