探索 App Clips

（你好 WWDC 2020) 你好 欢迎来到 WWDC （探索 App Clips） 大家好 我叫 James 今天和我的同事 Luming 一起 我要带领大家 进行一场 App Clips 的探索之旅 （App Clips 介绍） 我会在今天的讲座中向大家介绍 一项激动人心的新技术 App Clips 它将帮助更多人与你的 app 建立联系 我们会看一些 App Clips 的实例 有助于大家设想将要创建的体验

我们会介绍使用 Xcode 创建一个 App Clip 的基础内容 并在结尾附上技术概述 来帮助大家有一个好的开端

我们开始设计或构建 App Clip 前 理解 App Clip 是什么非常重要 （App Clip 是什么？） 为此 我想为你介绍三个概念 第一个就是你的 app 这点很重要 因为 App Clips 是一项添加功能 开始用 App Clips 前 你首先需要有一个 app

下一项 我们称之为 App Clip 体验 它们是 URL 在 iOS 14 上打开时 由 App Clip 代替网络浏览器来处理

最后 我们要来谈谈 App Clip 本身 它能够让人们无需安装你的 app 就可以使用你的原生 app 体验 我们现在来详细介绍这两大全新概念…

先说体验 这些体验是人们如何发现 以及启动 App Clips 的基础 你可以认为它们是你的 app 的全新入口

其实在背后 我们使用了 URL 来识别这些体验 如果你之前已经采取了通用链接 就会发现 处理 App Clip URL 的过程非常相似 一个主要区别在于 App Clip URL 不通过 AppleAppSiteAssociation 文件来定义 而是使用 App Store Connect 来注册

有关创建和自定义这些体验的所有信息 都可以从“配置与链接你的 App Clips” 这个讲座中获取 （通过用户操作和 Siri 建议唤出） 当你注册好了一个 App Clip 体验 并且你的 App Clip 在商店中上架后 只要 URL 被打开 它就会被唤出 从二维码到 NFC 标签 Safari 浏览器和信息中的链接 乃至业务详情和地图 无论人们如何使用他们的设备 我们都会确保你的 App Clip 受到瞩目 而发现 App Clips 的最佳方式 是通过 Apple 新设计的 App Clip 码 会在今年下半年推出 当你看到这个码 就知道有 App Clip 等你来使用 App Clip 码 结合了 NFC 和视觉代码的简易性 所以你可以轻点或扫描它们 同时始终确信会获得出色的用户体验 接着 我们来说说 App Clips 我相信你们作为开发者 一定会有一些人非常好奇 我们如何根据需要 只运行你的 app 的一部分 其实没什么玄乎的 你需要在 Xcode 中 创建第二个应用软件目标 这个 App Clip 目标 会包含所有必要的代码和资源 来处理你的 App Clip 体验

虽然 App Clip 目标的构建 和 app 非常相似 但它依然需要一个相应的应用软件 接着在创建好后一并提交审核 你无法单独上传 App Clip 或者它的 app

等你的 app 和它的 App Clip 在 App Store 中上架后 它们就可以分开使用了 如果有人碰到了 你的 App Clip 体验 那就会下载你的 App Clip 而不必安装你的整个 app 反之 则会倾向于下载你的 app 这一点很重要 因为当人们安装了你的 app 后 他们也会期待这些体验可以继续使用

最后 因为 App Clips 注重提供快速及时体验 你应该尽量将它们做小 这样就可以即刻下载并启动了

你的 App Clip 在精简后必须小于 10 MB 你需要找到一个平衡 也就是包含足够的资源 保证启动后可以立即使用 然后让用户只在需要的时候下载其它数据 我说了很多关于体验的内容 现在我们该看一些实例了

我们来看这个流程图 这些方框代表一个 app 中的页面 连线显示了用户在页面之间切换的路径

这张图对应的是许多 app 的结构 左侧是一些高层级选项 比如开始页或标签栏 往右移动 我们就深入了浏览堆栈以达到某个目标 这样的层级结构非常棒 因为它们有助于人们浏览复杂的应用软件 但当你设计 App Clips 体验时 我想给你一个挑战 将这个流程完全重新考虑一番 可以先从你的 app 里找出 最能在 App Clips 中发挥优势的部分

在一些情境下 人们有需要时就会碰到 App Clips 在思考用户在那个时刻需要什么帮助时 基本的 app 功能 比如目录清单 或是个人资料页面也许不再派上什么用场

接下来 想想 如何让你的 App Clip 体验使用的 URL 成为这些流程内的深层链接

App Clips 一般应该杜绝顶级浏览元素 比如标签栏

而应该为每个独特的体验使用单独的 URL

比如 你也许想让一个体验 在人们邮购产品时发挥作用 而不是当他们在店内结账时使用 如果你的业务有多个实体网点 你应该用一个 URL 来识别他们所处的门店 这让你跳过了选择门店这步 而是直接显示他们当下所关注的内容

最终的成品 应该是有针对性的用户流程 能够引导人们直达他们的目标 这不是说一个 App Clip 只能做一件事 恰恰相反 一个设计优秀的 App Clip 可以完成很多事情 只不过它一次只专注一件事 理论我们就讲到这里 接下来我请 Luming 来做一个实践演示 来讲解如何在 Xcode 中 开始构建 App Clips

谢谢 James 关于探索 App Clips 的精彩介绍 我叫 Luming 是 App Clips 团队的一位工程师 今天我会来演示 如何基于你的 app 来创建一个 App Clip

这是我的 app 叫 Fruta Fruta 上可以浏览美味奶昔的全套菜单 下单、随时跟进你最喜爱的奶昔 获取奖励积分以及探索奶昔的制作方法 虽然这些功能 对于完整的 app 来说非常棒 但我们想在 App Clip 中 只注重于提供精简的购买体验 所以这基本上就是菜单栏的所有功能了

现在我们来创建一个 App Clip

我已经打开了奶昔的 Xcode 项目 接着我要创建一个新目标 我会选择创建一个新的 App Clip 目标 然后点击下一步 我将它命名为 Fruta Clip 它会自动嵌入我们完整版的应用软件 你会注意到 Xcode 已经自动帮我们的 App Clip 填充了名称以及捆绑包标识符

现在我们在设备上运行这个 Clip

（构建成功） 很快 App Clip 就能建成并运行 现在我们的 App Clip 已经建成并运行了 当然 这个 App Clip 目前只是一个空的样板 那么 “你好 世界！” 我们这就开始

现在我们为 App Clip 添加一些代码和资源

由于 Fruta app 有一个依赖项 即营养成分表 我们也需要将它添加到我们的 App Clip 我会进入 App Clip 目标 并选择添加一个新依赖项 选择添加营养成分表依赖项

接着 我们来创建一个资源目录 以便在完整的 app 和 App Clip 之间共享资源

现在选择创建一个“新文件” 然后选择创建一个新的“资源目录” 并将它命名为“共享资源”

我会将它添加进 Fruta Clip “目标成员” 现在我们来并排对比一下这两个资源目录

由于我们在 app 和 App Clip 中都需要 app 图标 我会将 app 图标从资源目录中 拖动到共享资源目录里 对于颜色、配料表和奶昔也是同样的道理 所以我会把这些都拖动过来 因为我们的 App Clip 不包括制作方法 所以我把它留在这里

因为我的大部分代码都被整理成了组 所以我们要一组一组地来看 然后只把我们需要的 Swift 源文件 添加到 App Clip 目标中

模型是肯定需要的 所以我会在目标成员里 勾选 App Clip 复选框

商店是用于解锁更多制作方法的 所以我们不选 订单肯定要放进 App Clip 所以也要勾选 但因为我们的 App Clip 不需要标签栏 而且只针对在第一个标签下 也就是完整 app 的主菜单下购买奶昔 所以我们可以去掉浏览代码 奶昔是一定需要的 勾选上

制作方法可以不要 配料表 那是必须的 组件和样式也是 我还会包括 VisualEffectView 包装 然后勾选 Fruta Clip 复选框 这应该就是 Clip 中需要的所有代码了 现在我们来构建 （构建失败） 似乎出现了一个构建错误 怎么回事呢？ 原来是因为 OrderPlacedView.swift 需要引用“商店” 而我们在之前的步骤里 没有把“商店”包含进 App Clip 所以 App Clip 无法构建 我们需要在 OrderPlacedView.swift 中 对商店的引用进行有条件的编译 我现在回到 App Clip 目标的构建设置中

在里面找到 SwiftCompilerCustomFlag 部分 我会定义一个新的自定义条件 全部大写 叫做 APPCLIP 给调试 scheme 和发布 scheme 都添加上

现在我们可以回到 OrderPlacedView.swift 对商店的引用进行有条件的编译

最后 我们需要在 App Clip 中显示奶昔菜单

在 App Clip 的 FrutaClip.swift 文件里 我会把一个新的 Fruta 模型实例化 来作为新的数据储存对象

然后加入 ContentView 来作为它的环境变量

在 ContentView 主体中 我会把默认占位符 “你好 世界”去除 然后创建一个新的 NavigationView

在 NavigationView 中 我会加入一个 SmoothieMenu

接着就能构建并运行了

好了 我们的 App Clip 正在运行了 这个 Clip 的外观和功能都很棒 我可以浏览奶昔菜单

找到我最喜爱的一款并下单

（感谢您的订单！） （您的奶昔做好了！） 看来我的奶昔做好了 我要去享用奶昔了 交回给你 James

谢谢 Luming 太精彩了 我非常喜欢这个演示展示出 使用现有的 Xcode 功能 可以让共享代码和资源变得如此简便

共享资源目录和源文件 对于多平台的开发非常有帮助 比如 Apple Watch 和 macOS 而且它特别突出了我下面想说的这个主题 （技术概述） 也就是我们如何重新运用了现有的技术 使构建 App Clips 变得轻而易举

构建 App Clips 所使用的用户界面框架与 app 相同 而且支持 UIKit 或新的 SwiftUI app 的生命周期

启动后 你的 App Clip 或 app 将收到一个 NSUserActivity 而如果你的 App Clip 支持多项 App Clip 体验 你需要将网页 URL 用于这个活动 来获知你处理的是哪项体验 如果你的 app 已经在处理通用链接 那这些对你来说应该很熟悉

与扩展程序不同 App Clip 能够使用 iOS SDK 中的任何 API 这使 app 与 App Clip 之间的代码共享 变得易如反掌 不过 从 App Clip 访问敏感用户数据是受限的 但你不用特别做什么 只需确保在请求前检查数据访问权限

举个例子 你可以共享 使用 HealthKit 框架的源代码 但要做好 HKHealthStore isHealthDataAvailable 在你的 App Clip 中运行时 总是返回假的准备

正因为这样 你找不到任何 isAppClip API 只要遵循你所使用的框架的最佳做法就好 （位置确认） 为了有助于你构建点到点的流畅体验 我们加入了新的位置确认 API 这样在人们还不那么情愿 把位置信息提供给 刚接触到的 App Clip 时 就不会提示要求获取他们的位置信息 而是用这个 API 去确认他们是否在你认为的地方 同时也尊重了他们的隐私

想要了解如何采用 包括这条在内的更多建议 请去查看“简化你的 App Clip”讲座 最后 为了延续这种无缝流畅的体验 我们提供的 API 在人们安装相应的 app 时 可以使你能够将数据从 App Clip 迁移 这是通过使用一个共享数据容器来实现的 我接下来会详细说明

开发 App Clip 应该会即刻感觉非常熟悉 这和开发 app 没什么区别 不过在开发 App Clip 时 有一些特别情况需要记住 首先 App Clip 不需要人们进行管理 App Clip 只在需要的时候运行 如果今后不再需要使用了 iOS 会删除 App Clip 及其数据 此外 App Clips 不会在 iOS 中备份

对于 App Clips 我们想让用户 在按需运行 app 代码时感到安全 因此 我们在 App Clips 的隐私性上 下了更大的功夫 并且完全限制对一些诸如健康 和体质等敏感内容的访问权

如果你的对应 app 会使用这些类别的数据 你可以鼓励人们安装以获取更多功能

App Clip 注重提供 App Clip 体验 它无法基于其它原因被启动 因此 它不能注册自定义 URL scheme 文档类型或通用链接 如果你正在使用自定义 URL scheme 作为联合登录服务的回调 那么这点就格外重要 这样的话 你应该改用 ASWebAuthenticationSession 它不要求你注册 你用于回调的 URL scheme

而且你也许已经猜到了 这也意味着 App Clips 无法包含捆绑的扩展程序 比如内容拦截器

现在大家知道了 app 和 App Clips 之间 相似和不同的地方… （设备状态和过渡） 我想说明这些在单个设备上如何交互 比如说 有人找到了一个 App Clip 的二维码并扫描了它

因为没有安装相应的 app 来处理这个体验 iOS 会为用户自动寻找 下载并启动这个 App Clip

这个 App Clip 会在使用时运行 然后用户就不再用了

如果过了一定的时间 这个 App Clip 没有被再次访问 iOS 将删除 App Clip 它的数据容器以及相应的钥匙串数据

如果用户再次碰到这个体验 那么整个过程会和之前一样再重复一次 这说明了重要的一点 虽然 App Clips 可以在设备上储存数据 但它更像是临时缓存 因为它会由于系统的判定而被删除

我们倒回去看看如果有人 重复使用 同一个 App Clip 体验会发生什么 这可能是他们 最喜爱的咖啡店的一个订购 App Clip 并且他们每天都用它来买咖啡 （App Clip 被经常使用） 这个情况下 App Clip 的生命周期会延长 而且可能永远不会删除 应为 iOS 会注意到它在被频繁使用

所以 如果这个 App Clip 缓存了最近一次的订单 它会在推荐中显示 让下一次的购买更加快捷 当然 如果有人这么爱用你的 App Clip 他们应该会想安装你的 app 了 当他们这么做时 iOS 会自动迁移相机 麦克风和蓝牙的访问权限 如果你的 App Clip 还有需要迁移的数据 你可以使用新型的集合数据容器 它将自动为你的 App Clip 和相应的 app 提供 为此 你的 App Clip 应该把你想要迁移的数据 储存在这个共享数据容器内 而不是 App Clip 的标准容器内

如果用户随后安装了你的 app iOS 仍然会和上述一样删除 App Clip 但这个集合容器还在 它会在你的 app 有机会复制完所有的数据之后消失

构建一个出色的 App Clip 所使用的最佳做法和技术 与构建一个出色的 app 是一样的 这包括支持 Apple Pay 支付方式 来使人们不用再到处摸索信用卡 即可快速购买 在人们的奶昔做好之后 或者他们的停车收费表即将到时前 能够用通知提醒他们

SwiftUI 非常适合 App Clips 因为它注重小型可重复使用的组件 这同时也很容易在 app 和它的 App Clip 目标之间共享

今年新增的还有 SKOverlay…

或者叫 App Store 叠加修饰符 如果你用的是 SwiftUI 在人们使用你的 App Clip 获得了良好体验后 这个 API 是引导人们 使用你的完整 app 的最佳方式 你可以观看 WWDC20 的“App 内购买项目的新功能” 来进一步了解 最后 如果将用户与账户相关联 能让你的 App Clip 使用起来更有优势 比如在购买时获得奖励积分 你应该使用身份验证服务中的 ASAuthorizationController ASAuthorizationController 允许用户轻松登录 他们现有的使用密码的账户 或者使用“通过 Apple 登录” 来创建一个新账户 要想了解更多信息 请查看 WWDC 19 的“身份验证的新增功能”讲座

总的来说 App Clips 代表了一种新型的用户体验 这些体验可以通过一个 专用的 App Clip 二进制文件按需调用 甚至不需要人们安装你的 app 但是在安装了你的应用软件后 应用软件会取而代之去处理这些体验 （使用熟悉的技术构建） 构建这些 App Clip 二进制文件 和构建 app 使用的是同一种技术 所以你可以直接将编写 app 的知识 转用到编写 App Clips 上 App Clip 体验是简洁线性的 专注于完成一个特定的任务 例如奖励计划之类的功能 应该在人们达成目标后 作为可选步骤呈现 非常感谢观看 希望大家获得愉快的 WWDC 体验

（你好 WWDC 2020）