Hi, welcome WWDC. My name is Yang Jiang. I'm engineer from App Clips team. I'm joined today by my colleague Lu Ming to talk about what's new in App Clips.
An App Clip is a small part of an app that can be launched at the moment when it's needed. It provides fast and focused experience on a specific task. Users can easily upgrade to your app after they completed the task. Since it's launched, we have seen many great app clips from developers all over the world. They were designed easily discoverable with great ways to engage users.
Let me share some examples with you. Fairy Games has an app clip for their popular Phoenix 2 game. I can go to their website in Safari, tap the banner, It will show the app clip card for this game. From there, I can launch the game.
In a couple seconds, the game is ready to play. After I play the first level, I can download the full game right from the app clip. TikTok has an app clip that makes sharing video really fun and easy.
When I receive a video from my friend, iMessage will show the TikTok app clip preview. After the preview shows the cart, there I can open TikTok app clip. I can enjoy the video right away. Panera Bread is a US-based food service with thousands of stores.
If I look up one of the stores in Maps, the place card will show Order Food Action button. I can open the app clip right from there. Within seconds, the app clip launches and shows the menu for this particular store. I can make order and pay with Apple Pay.
In iOS 15, if I search a business in Spotlight, like Panera, the app clip will show up in search results too. With the on-device intelligence, if I live by Panera store, my phone can suggest the app clip to me in Siri suggestion widget. Tap the suggestion, I can open it and order food right away. Honk created app clip for touchless payment for parking.
All I need to do is scan the QR code attached at the parking lot. With one tap, I can open the app clip and pay with Apple Pay. Primer AR Home Design has an app clip for you to try paint, tile, and wallpaper in an AR environment. I can scan or tap the app clip code on a tile to open the app clip.
There I can experience how this beautiful tile would look like in my living room. These are some great example App Clips. There are many, many more.
You can discover them in Safari messages or in the real world by QR code, NFC tag, or App Clip code. I encourage you to try them out and see what App Clips can do. In this session, we will cover three topics. First, App Clip called in Safari and the Safari View Controller.
Then we will talk about testing App Clip with local experiences. Last, we will cover App Clip code. Let's look at a new way to explore App Clips.
Your website can use Apple iTunes app meta tag to display the smart app banner in Safari or Safari View Controller. In iOS 15, you can configure the meta tag to show a full sized App Clip card right in the middle of web page. User can open your App Clip from there. If they choose View in Safari, Safari will remember the choice and not show the card next time the page is loaded again. And it will fall back to the original banner.
To opt in card mode, you just need to add App Clip display key to the meta tag and set it to card. The card mode works great if you like to promote the app clip in the web page. For apps using Safari View Controller to render web content, like Twitter. It can show the card as a part of the app's UI. Now user can launch the app clip directly from the app.
This is the app clip card in Safari and the Safari view controller. Let's talk about test with local experiences. For user, the app clip experience starts with app clip card.
The card shows you app clips title. subtitle, what action can take, and a header image to show your brand and style. You can create an application card in App Store Connect.
Follow the step-by-step guide to configure all the elements. You can also specify locations associated with your App Clip. This could make the App Clip show up in Maps Place Card, Series Suggestion Widget, or Spotlight Search.
To know more about how to customize App Clip card, please refer to WWDC 20 sessions, What's New in App Store Connect, and configure and make your App Clips. Now, when you develop your App Clip, You might not have registered any AppClip experiences yet. Sometimes you do want to test the end-to-end flow and role play the whole experience.
You can do that with local experiences. A local experience is an experience you entered in your own testing device. You can launch it with most of regular AppClip invocation methods.
To create a local experience, go to Develop Settings and select Local Experiences. Specify your app clip's name, title, URL prefix, bundle ID, and select the image in your photo library as a header image. You can then scan a QR code or NFC tag to launch the experience.
Local experiences support QR, NFC, app clip code, Safari, and messages. They don't show up in maps, location suggestions, and spotlight search. These require registered experiences.
Also, you can only specify local experiences for Xcode installed App Clips or App Clips in beta testing. This is how you can test with local experiences. With that, I would like to hand over to Lu Ming to show you a demo. Thanks, Yongjun.
As Yongjun mentioned in the talk, you can now configure the meta tag to show a full-sized App Clip card right in the middle of the webpage in both Safari and Safari View Controller. I'm in the FoodGrid app, a third-party app my friend has built, which helps you discover nearby restaurants and beverage shops. As you can see, my Smoothie Stand Fruta is featured in this FoodGrid app.
Tapping on my Smoothie Stand Fruta in my friend's app opens a Safari View controller showing my Smoothie Stand website. Because my Smoothie Stand website has already adopted the Smart Hat banner meta tag for iOS 14 and iPadOS 14, my customers can open the Fruta app clip. from the Smart App banner. But opening the app clip this way requires the customer discovering the banner, tapping open, then confirming it in the app clip card, which is a multi-step process.
So adopting the new full-sized app clip card for iOS 15 and iPadOS 15 is a great way to promote and elevate discovery of our Fruta Smoothie Stand app clip within the webpage or within third-party apps that embed our website. through Safari View Controller. Let's see how to do just that.
Here, I am on the Fruita web server that hosts our website. Within the Apple iTunes app meta tag, I just need to add AppClip display and set its value to card. Now, if I tap to open the restaurant website again in the FoodGrid app, you will notice the AppClip card shows up immediately within the web page as a part of the FoodGrid app's UI. The user can then launch the Frida app clip directly from this third-party app. Back to you, Yang Zheng.
Thank you, Lu Ming. Now I know how to launch my app clip from the app with the help of Safari View Controller. Now let's talk about app clip code. App clip code is a new Apple-designed visual code. It is the best way to discover app clip experiences in the real world.
It is available from iOS 14.3. So there are almost 1 billion devices ready for your App Clip code. An App Clip code always leads to an App Clip.
When users see such a code, they know there's an App Clip to explore. Each code encodes a unique URL for specific experience. iOS decodes the URL before sending to the App Clip. This means your App Clip doesn't need to do anything special to handle these codes.
Your existing URL handling will just work. There are two types of applicable code, NFC integrated or scan only. Users can interact with NFC integrated code by tapping it or scanning it with the camera. Use this type when customers can easily access the code, for example, on a vending machine or on a restaurant table or on a storefront window. Use scan only if the code may be placed out of reach for the customer or when NFC is not appropriate.
For example, When it is displayed digitally in a marketing email, you can customize the style of AppClip code to fit specific use cases. You can pick your own foreground or background color. You can also hide the AppClip logo.
We suggest to show the logo when there's enough space. This gives new customer a clear message that it is for AppClips. If you have an ARKit AppClip, You can use AppClip code as an anchor, tracking its position in the physical world.
This could bring amazing experiences. For example, a user can scan AppClip code on a package, explore what is inside like this guitar, without opening the package. To know more about AppClip code and ARKit, please check out WWDC 21 session, Explore ARKit 5. There are two ways to create AppClip code. You can use App...
App Clip Code Generator tool available from developer.app.com. Or you can download the code directly from App Store Connect. We recommend to use the command line tool when you're testing or developing an app clip, or you need to automate code generation. Use App Store Connect to create codes for registered URLs. For the best scanning experience, here are some guidelines to keep in mind.
First, keep the code on a flat surface. The code should be placed at the upright position. Make sure you don't rotate the code or the central logo.
Small codes are hard for customers to see and scan, so make sure your code is large enough, at least one inch wide. Ensure good visibility. Make sure your code is not blocked, damaged, or placed too close to other codes.
You can add a text next to the code to inform people how they can use it to launch your AppClip. Make sure the message is concise and with a clear call to action. For more information, please check the human interface guidelines, and this is AppClip code.
I would like to hand over to Lu Min again to show you how to quickly generate AppClip codes. Thanks, Yang Jun. As Yang Jun mentioned, The easiest way to generate an AppClip code is to download it from App Store Connect.
For cases where you need more customization or need to script AppClip code generation in bulk, generating them locally using the AppClip Code Generator command line tool is a great option. I've already downloaded and installed AppClip Code Generator from the Apple developer website onto my Mac, so I can open terminal and interact with the tool. It's really easy to use.
As Yangjuan mentioned, there are a variety of templates available to choose. And I can enter AppClip Code Generator templates to view a list of all available templates. But how do these templates look exactly? Well, you can find a preview of all of these templates at the following location. slash library developer AppClip Code Generator sample templates.
Let's look at these using Quick Look. Number 4 looks really great, so I'm going to generate an AppClip code using this template for our Fruta AppClip. I'll enter AppClip code generator, generate.
We'll generate an NFC AppClip code since I'll place an NFC tag behind the printed AppClip code. I'll pass in the URL that I have registered as an advanced app clip experience on AppStore Connect, which is fruta.example. I'll choose template 4, which we figure looks great from the quick look preview in Finder. Finally, I'll pass in the desired output SVG filename, fruta.svg. SVG graphics are vector-based, so they scale beautifully when you print them.
from a piece of US letter size paper all the way to a 24 by 36 poster. Let's open the generated SVG in Safari to preview it. I have already printed this app clip code on a poster, so let's try scanning it from the code scanner module in Control Center.
And here we are. We're now in the Fruita App Club. And that is a quick demonstration of how to generate AppClip code using the AppClip Code Generator command line tool.
Back to you, Yang Zheng. Thanks, Lu Ming. Now I know how to generate my own codes with different styles. To wrap up, in this session, we looked at some great AppClips.
Then we talked about AppClip card in Safari and Safari View Controller. We also discussed how to test with local experiences. Last, we covered AppClip code, an Apple-designed visual code for AppClips.
Thank you, and I'm looking forward to trying more great AppClips from you. Have a great WWDC.