MacKuba

Kuba Suder's blog on Mac & iOS development

Configure and link your app clips

Categories: App Clips, UIKit, WWDC 20 0 comments Watch the video

(Watch the “Explore app clips” video before.)

App Clips provide an entry point for your users with minimal friction

Touching a physical NFC tag  ⭢  NFC tag encodes a URL  ⭢  your app’s clip configured for that URL shows up as a popup  ⭢  when user presses Open, it’s open in full screen

App clips can also be accessed from: QR codes, Maps, Safari (Smart App Banners), Messages, Siri suggestions

Tools will be available later this year that can create special circular app clip QR codes

Steps to configure:

Configure your web server

Set up the apple-app-site-association file (in .well-known folder)

Add an appclips key:

“appclips”: {
    “apps”: [“ABDE12345.com.example.app”]
}

Configure the app clip for handling links

  • add an associated domains entitlement to the app clip target
  • add a domain prefixed with appclips:, e.g. appclips:example.com
  • handle opening the app with NSUserActivity containing a given URL
  • in SwiftUI: .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { … }
  • in UIKit: scene(_: continue userActivity:)

Once the user has the full app installed, opening the same URL opens the full app instead of the clip – so the app needs to be able to handle the same URLs and show the same content

When testing in Xcode, you can set up a scheme that sets the environment variable _XCAppClipURL to the given URL

Configure app clip experiences on App Store Connect

Prepare metadata for the app clip:

  • Title up to 18 chars
  • Subtitle up to 43 chars
  • Header image: 3000×2000, aspect ratio 3:2, jpeg or png with no transparency

Set up on App Store Connect in a new section that appears once you upload a build with an app clip

If you want the clip to be accessible from more than Safari or Messages (e.g. QR codes), you need to set up “Advanced App Clip Experiences”

One app can set up multiple advanced app clip experiences matching different URLs

URL is matched based on the most specific prefix, so you can have one general catch-all URL and other more specific ones

App Clips can also be accessed by TestFlight testers – configure in “App Clip Invocations” sections in TestFlight on App Store Connect

Configure the Smart App Banner

Standard app banner:

<meta name='apple-itunes-app' content='app-id=12345678'>

For an app clip, add app-clip-bundle-id inside:

<meta name='apple-itunes-app' content='app-clip-bundle-id=com.example.fruta.clip, app-id=12345678'>


Leave a comment

*

*
This will only be used to display your Gravatar image.

*

What property can you use on iOS to get a unique device ID that the user can reset in Settings?

*