App Clip 是 WWCD20 的一大亮点。作为轻量级应用，它提供了一种“即时使用”的方式，用户无需在 App Store 下载完整的应用程序，基于苹果提供的各种唤醒方式，让用户在特定场景下很方便地体验 App 内的核心功能。
App Clip 是 App 的一小部分，因此可以使用 iOS SDK，在与完整 App 相同的 Xcode 项目中创建。每个轻 App 都是轻量级，即便尚未安装到设备上也能快速打开。准备好提交审核时，你可以将轻 App作为完整 App 的一部分在 App Store Connect 中进行管理。
优秀的App Clips
1.Phoenix 2
Phoenix 2 是来自 Firi Games 的一款流行游戏，同时配置了 App Clip。当使用 iOS 设备打开 Phoenix 2 游戏介绍页，会在 Safari 顶部展示 Safari App Banner。点击 Play 按钮，会调起 App Clip card，在这里就可以启动游戏。
Safari App Banner 是 App Clip 在 Safari 内的唤醒方式。开发者在网页源代码配置相应的 meta tag，就会在网页顶部展示 Safari App Banner。关于 Banner 的配置，下文会有详细的介绍。
2.TikTok
TikTok 的 App Clip 让视频分享变得简单又有趣。当我在 iMessage 中收到朋友分享给我的视频，iMessage 会展示 App Clip 的预览。
3. Primer AR Home Design
Primer AR Home 将 AR 与 App Clip 进行了结合。Primer AR Home 提供了一个帮助用户在 AR 环境中体验墙纸和瓷砖的 App Clip。
当用户使用 iOS 设备贴近瓷砖上的 App Clip code，就可以在AR环境下体验这种瓷砖在房间中排列的样子。是的，这张 App Clip code 集成了 NFC 功能。
App Clip Card 在 Safari 和 SafariViewController 的全新展示效果
我们可以在网页中配置 meta tag 从而在 Safari 和 Safari View Controller 展示 Safari App Banner。
集成方式
如果网页已经适配过 App Clip，那么使用卡片模式会很简单。在官网的源代码的
meta tag中查找apple-itunes-app标签，并在其中添加app-clip-displaykey，并将其值设为card。 以下为完整参考代码，在开发过程中需要将app-clip-bundle-id和app-id替换成自己项目对应的信息。
1
2
3
4
<head>
<meta name="apple-itunes-app"
content="app-clip-bundle-id=com.example.fruta.Clip, app-id=123456789, app-clip-display=card">
</head>
- 首先需要用户发现 Banner
- 点击 Banner 上的 Open 按钮唤起 App Clip card
- 点击 App Clip card 的确认按键
- 部分 app clip 是“用完就走”的，但是也有部分 app clip 是为了导流到 main app。可以通过
SKOverlay或SKStoreProductViewController来显示一个指向 main app 的推广窗：
1
2
3
4
5
6
7
func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
// 处理 userActivity ...
if let scene = scene as? UIWindowScene {
let overlay = SKOverlay(configuration: SKOverlay.AppClipConfiguration(position: .bottom))
overlay.present(in: scene)
}
}
本地体验配置
在 Xcode 中打开要添加 App Clip extension 的主工程，并创建一个新的 target，可以在右上侧的输入框输入 App Clip 来查找到我们需要的 target。
在
主工程和 App Clip extension 的 Associated Domain 内添加要映射的链接，格式如下1 2
appclips:yourDomain.com 例如: appclips:testclip.com
在 App Clip extension 的 schema 中添加环境变量
_XCAppClipURL，value 就是上面映射的链接。到这为止，本地配置就已经完成。将 App Clip Extension 运行在测试机上。接下来使用 在线二维码生成器 生成本地测试用的二维码，内容为上面配置的
https://testclip.com。使用控制中心的扫描器进行扫描，即可唤起 App Clip Card，点击打开即可进入 App Clip extension。
此时唤起了 App Clip Card 是空白一片的。因为我们并没有对 App Clip Card 进行任何配置。 在配置卡片前，让我们先了解下什么是 App Clip Card.
关于 App Clip Card
对于普通用户，App Clip 体验源于 App Clip Card。卡片会展示 App Clip 的标题、副标题、介绍 App Clip 的品牌和风格的图像和操作按钮。
本地体验配置
打开设置 » 开发者 » Local Experiences » Register Local Experience，即可开始配置你的专属本地体验。
本地配置的 URL PREFIX 要与 App Clip Extension 的 associated domain 对应，BUNDLE ID 要与 App Clip Extension 的 bundle ID 对应。
识别App Clip
- NFC 标签
- 二维码
- iMessage 中的链接
- Safari 浏览器
- 最近使用的轻 App
- “地图”中的地点卡
- …
App Clip Code
App Clip Code 是专属于 App Clip 的二维码。App Clip Code 提供了让用户发现 App Clip 的最佳方式。独特的设计可以让用户立刻识别出这是一个专属于 App Clip 的二维码，同时也提供了一种快速、安全的方式来开启 App Clip。
如何创建一个 App Clip Code
使用 App Clip Code Generator tool
Mac 的终端工具默认是没有集成 App Clip Code 生成器的。首先要去 Apple Developer website 进行下载。
安装成功后，打开我们的终端，输入 AppClipCodeGenerator templates，就可以浏览所有可用的模板。
使用该路径 /Library/Developer/AppClipCodeGenerator/SampleTemplates 预览所有模板的样式。
请查阅苹果文档 Creating App Clip Codes with the App Clip Code Generator
1
AppClipCodeGenerator generate --url https://testclip.com --foreground FF4500 --background F5FFFA --output testclip.svg
App Clip Code 设计规范
除去基于 Apple 提供的模板生成 App Clip Code。设计师可以自定义 App Clip Code 的样式来满足特定的使用场景。
- 可以选择专属的前景色和背景色。
- 可以隐藏 App Clip logo。但是苹果建议如果有足够的空间的话，尽量显示 App Clip logo。这会给用户一个明确的信息，表明这个 Code 是属于 App Clip。
- 添加简单清晰的指导文案。确保信息简明扼要。
