앱 클립의 새로운 기능

Hi! Welcome to WWDC. My name's Yongjun. I'm an engineer from App Clips team. I'm joined today by my colleague, Luming, 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. User can easily upgrade to your app after they complete the task. Since it's launched, we have seen many great App Clips from developers all over the world. They are well designed, easily discoverable, with great ways to engage users. Let me share some examples with you. Firi Games has an App Clip for their popular Phoenix 2 game. I can go to their web site 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's 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 to make sharing video really fun and easy. When I receive a video from my friend, iMessage will show the TikTok App Clip preview. Tap of the preview shows the card. There I can open TikTok App Clip. I can enjoy the video right away. Panera bread is a U.S.-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 their 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 on-device intelligence, if I'm nearby 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 an App Clip for touchless payment for parking. All I need to do is scan their 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 discovered them in Safari, Messages, or in the real world by a 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 Card in Safari and SafariViewController. 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 your App Clip in the web page. For apps using SafariViewController 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 SafariViewController. Let's talk about test with local experiences. For users, their App Clip experience starts with the App Clip Card. The card shows your App Clip's title, subtitle, what action can take, and a header image to show your brand and style. You can create an App Clip 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, Siri suggestion widget, or Spotlight search. To know about how to customize App Clip Card, please refer to WWDC20 sessions, "What's new in App Store Connect" and "Configure and link your App Clips." Now, when you develop your App Clip, you might not have registered any App Clip 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 enter in your own testing device. You can launch it with most of regular App Clip invocation methods. To create a local experience, go to Developer Settings and select Local Experiences. Specify your App Clip's name, title, URL prefix, bundleID, and select an image in your photo library as the 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 Luming 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 web page in both Safari and SafariViewController.

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 SafariViewController showing my smoothie stand website. Because my smoothie stand website has already adopted Smart App 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 web page or within third-party apps that embed our website through SafariViewController. Let's see how to do just that. Here, I am on the Fruta web server that hosts our website. Within the apple-itunes-app meta tag, I just need to add "app-clip-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 App Clip Card shows up immediately within the web page as a part of the FoodGrid app's UI. The user can then launch the Fruta App Clip directly from this third-party app. Back to you, Yongjun. Thank you, Luming. Now, I know how to launch my App Clip from the app with the help of SFSafariViewController. 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 the user sees 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 App Clip code: NFC integrated or Scan only. User can interact with NFC-integrated code by tap it or scanning it with the camera. Use this type when customer can easily access the code. For example, on a vending machine, or on a restaurant table, or on 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 App Clip code to fit specific use cases. You can pick you own foreground or background color. You can also hide the App Clip logo. We suggest to show the logo when there is enough space. This gives new customer a clear message that it is for App Clips. If you have an ARKit App Clip, you can use App Clip code as an anchor, tracking its position in the physical world. This could bring amazing experiences. For example, a user can scan an App Clip code on a package, exploring what is inside, like this guitar, without opening the package. To know more about App Clip code and ARKit, please check out WWDC21 session, "Explore ARKit 5." There are two ways to create an App Clip code. You can use the App Clip Code Generator tool, available from developer.apple.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 upright position. Make sure you don't rotate the code or the central logo. Small codes are harder for customers to see and scan, so make sure your code is large enough, at least 1 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 App Clip. 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 App Clip Code. I would like to hand over to Luming, again, to show you how to quickly generate App Clip Codes. Thanks, Yongjun! As Yongjun mentioned, the easiest way to generate an App Clip Code is to download it from App Store Connect. For cases where you need more customization, or need to script App Clip Code generation in bulk, generating them locally using the App Clip Code Generator command-line tool is a great option. I've already downloaded and installed App Clip 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 Yongjun mentioned, there are a variety of templates available to choose. And I can enter "App Clip 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 template at the following location: /Library/Developer/AppClipCode Generator/SampleTemplates. Let's look at these using Quick Look.

Number 4 looks really great, so I'm going to generate an App Clip Code using this template for our Fruta App Clip. I'll enter "AppClipCodeGenerator generate." We'll generate an NFC App Clip Code since I'll place an NFC tag behind the printed App Clip Code. I'll pass in a URL that I have registered as an advanced App Clip experience on App Store 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 file name fruta.svg.

SVG graphics are vector based, so they scale beautifully when you print them from a piece of U.S.-letter-sized paper, all the way to a 24-by-36 poster. Let's open a 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 are now in the Fruta App Clip. And that is a quick demonstration of how to generate App Clip Code using the App Clip Code Generator command-line tool. Back to you, Yongjun. Thanks, Luming. Now, I know how to generate my own codes with different styles. To wrap up, in this session, we looked at some great App Clips. Then, we talked about App Clip card in Safari and SafariViewController. We also discussed how to test with local experiences. Last, we covered App Clip Code, an Apple-designed visual code for App Clips. Thank you, and I'm looking forward to trying more great App Clips from you. Have a great WWDC. [music]