WWDC 20
Configure and link your app clips
(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'>