配置与链接你的 app clips

（你好 WWDC 2020） 你好 欢迎参加全球开发者大会

大家好 我叫 Ada 是 App Clips 工程师 （配置与链接你的 App Clips） 今天 我会和我的同事 Luming 一起 向你展示关于 链接至 app clips 的所有信息

App Clips 为用户提供 轻松体验你的 app 的入口点 当用户需要 app 的功能来执行任务时 会通过深度链接浏览 将你的 app 片段无缝呈现给用户 本课程将介绍 如何处理指向你的 app 片段的链接 并配置链接体验 首先 让我们看一个如何用 app 片段 执行任务的例子 （APP 片段体验 点冰沙） 想象你看到一家冰沙店 你真的很想点一杯好吃的 冰凉爽口的冰沙

你发现一个 NFC 标签上写着 “轻点此处点单”

轻点标签 屏幕底部会弹出一张卡片 简要描述冰沙点单 app 片段

当你轻点“打开”按钮时 app 片段会在你的设备上启动 直接带你进入冰沙点单页面

用 Apple Pay 完成购买 现在你手中有一杯冰沙

链接魔法在这些步骤中发生 NFC 标签对注册了 app 片段体验 的 URL 进行编码 稍后我会在本课程中解释 轻点“打开”后 app 片段将通过一个经由 NSUserActivity 传递的 URL 启动 app 片段将你直接带到点单页面

除 NFC 外 app 片段链接 还可以出现在其它地方 这些 URL 可以被编码在 物理标签或可视代码中 或与地图上的物理位置相关联 让我们看看这些链接方式 （链接方式 NFC） 正如我在前面的例子中提到的 NFC 标签可以对 app 片段 URL 进行编码 用户可以轻点手机 打开 app 片段 （链接方式 二维码） app 片段 URL 也可以被编码在二维码中 人们可以通过扫描打开 app 片段 （-链接方式 - 地图 -PANERA BREAD） app 片段可以显示在 注册企业的地图位置卡片上 也可以显示在 Siri 附近建议中 （SIRI 附近建议） （链接方式 SAFARI 浏览器） 你也可以从 Safari 浏览器 打开 app 片段 如果你的网页配置了用于 app 片段的 智能 app 横幅 则人们可以轻点那个横幅中的 “打开”按钮以打开 app 片段 （链接方式 信息） 当他们发送带有该网页 URL 的 iMessage 信息时 它显示为特别的 app 片段链接泡泡 让用户可以选择在 app 片段 或 Safari 浏览器中打开链接

为了带给你更好的体验 今年晚些时候 Apple 将发布新的 app 片段代码 这是用户发现你的 app 片段的最佳方式 它在视觉上很美观 很清晰 因此人们看到它时 就会知道有一个 app 片段

每个 app 片段代码对一个 URL 进行编码 Apple 将在今年晚些时候发布 能创建这些漂亮的视觉代码的工具

现在我们展示了 人们可以通过链接 进入你的 app 片段的不同方式 让我们来看看 app 片段开发者 设置该链接体验所需的步骤 （链接到你的 app 片段） 首先必须对网络服务器 和 app 片段项目进行更改 以便这些链接可以通过 app 片段处理

接下来必须配置 app 片段卡片 这是向用户介绍 app 片段的卡片 是 app 片段体验的一部分 你可以在 App Store Connect 上 设置默认值和高级 app 片段体验

最后 让我们设置智能 app 横幅 以便在网页上显示你的 app 片段 如果你的网页内容可以作为 更好、更精简的 app 片段体验提供 考虑添加该横幅 以便用户能从该网页访问 app片段

首先从配置你的网络服务器 和 app 片段开始 以便进行链接处理

必须验证你的网站 和 app 片段之间的关联 以便使 app 片段能显示 代替网站 URL 的内容 要将 app 片段与服务器安全关联 你需要网络服务器上的 apple-app-site-association 文件 以及 app 片段上的 相应的关联域权限 然后必须更新 app 片段中的代码 以处理来自 传入 NSUserActivities 的链接

首先 让我们更新网络服务器上的 apple-app-site-association 文件

该文件位于位于服务器根文件夹中的 .well-known 子目录中 如果以前为 app 设置过通用链接 则可能已经在服务器上设置了该文件 并且根字典中已经包含其它条目 例如网络凭证和 app 链接 要在该文件中声明新的 app clips 关联 在根字典中添加另一个 包含密钥“appclips”的条目 和包含单个“apps”密钥的字典的值 该密钥设置为包含 app clips app 标识符的数组

接下来 让我们更新 app 片段项目 以添加关联域权限

在 Xcode 中 前往项目设置 并添加关联域功能

在域下 添加新字符串 “appclips:your-website-domain”

现在你的网站和 app 片段 均已用关联域设置 让我们添加代码 来处理 NSUserActivity 其中包含传入你的 app 片段的 URL

如果你的 app 片段采用了 新的 SwiftUI app 生命周期 则这是为 web-browsing userActivity 添加处理程序的方式 在该方式中 可以从 NSUserActivity 获取网页 URL 属性 然后可以解析该 URL 并将用户指向链接内容

请记住 用户从 app 片段升级到 app 后 前往该 app 链接会打开 app 而不是 app 片段 因此要确保你的 app 也有类似的代码 来为通用链接处理 URL

如果你的 app 片段使用 UIKit 的 SceneDelegate 生命周期 以下是一些类似代码 用于处理 UISceneDelegate 中的 传入用户活动

（-设置关联域 -“通用链接的新功能”） 要了解如何设置关联域 和处理 NSUserActivities 请参阅“通用链接的新功能”课程

要在 Xcode 中测试 app 片段中的 URL 处理代码 你可以指定要 传递到 app 片段的测试 URL 在 Xcode 中打开 scheme editor 选择 “参数” 标签

（环境变量） 在“环境变量”下 指定 _XCAppClipURL 变量 现在 当你从 Xcode 运行 app 片段时 它会用该 URL 启动

现在我们配置好网络服务器 和 app 片段了 让我们配置 app 片段体验

每个 app 片段体验 都从 app 片段卡片开始 用户在轻点 app 片段链接时 会看到该卡片 它显示关于 app 片段的信息 并请求用户同意打开它

在生成 用于配置 app 片段卡片的元数据时 请遵循对标题和副标题的长度要求 以获得最佳卡片布局 对图像的尺寸、高宽比和格式也有要求 以便在所有设备上提供最佳用户体验 选择的图像应与 该 app 片段动作提供的体验相符 （标题：最多18个字符 副标题：最多43个字符） 现在让我们在 App Store Connect 上 设置 app 片段卡片

在将包含 app 和 app 片段的版本交付到 App Store Connect 之后 app 片段应该 在 App Store Connect 上可见 并带有一个新的 app 片段配置部分 你可以在这里开始设置 默认值和高级 app 片段体验

默认 app 片段体验的元数据 包括 app 片段卡片的图像 副标题和动作的动词 有一个预定义动作列表 可以从中选择 该元数据将用于 Safari 浏览器中的 智能 app 横幅 以及信息中的 app 片段链接泡泡 当显示 app 片段卡片时 也用于 app 片段卡片

如果你希望 app 片段不仅仅 可通过 Safari 浏览器和信息访问 则必须通过点击此处的“开始”链接 设置高级 app 片段体验 每个高级 app 片段体验 均绑定到一个 URL 可被编码到一个物理标签中 例如 NFC 标签或二维码 以便你的 app 片段 可通过这些物理调用方法启动

在点击一些简介屏幕后 会来到本页 你可以在这里 指定高级 app 片段体验的 URL 你可以为同一个 app 片段 设置多个高级 app 片段体验 每个都有不同的 URL 我接下来会举一些 多个 app 片段体验的例子

在下一页 你可以设置图像、标题、副标题 并为该体验选择 app 片段卡片的动作动词 你还可以选择将该 app 片段体验 与一个物理位置相关联

现在让我们来看看 高级 app 片段体验的一些用例 以及为这些体验注册 URL 的最佳做法

一个 app 片段可处理不同类型的任务 因此 可以为同一个 app 片段 定制不同的 app 片段体验 例如 这个餐厅 app 片段为顾客提供 两种类型的体验： 点餐体验 用户可以在其中查看菜单并下单 以及预订体验 顾客可以在这里订桌

在这种情况下 可以设置两个高级 app 片段体验 一个用于 melamela.example/order 图像可以是菜单的图片 副标题为“查看菜单并点餐” 另一个用于 melamela.example/reservation 图像可以是餐厅环境的图片 副标题为“订桌”

关于 URL 映射到 app 片段的方式 需要记住的一点是 它基于与注册 app 片段体验 URL 匹配程度最高的前缀匹配 这意味着你不需要为企业注册所有可能的 app 片段 URL

不过要记住 即便注册体验 URL 仅用作前缀 app 片段也必须能用 确切的注册 URL 处理启动 在通过 Siri 附近建议和地图 调用 app 片段时 可能会发生这种情况 （例子 - 租自行车） 以下是一个例子 说明如何注册一个 app 片段体验 URL 来处理多个调用 URL 一家自行车店有一个在线自行车租赁系统 它有数百辆自行车供出租 由 ID 号识别

用于预订这些自行车的 URL 将在查询字符串参数中指定该 ID

幸好 这家自行车店不需要为每个 URL 注册 高级 app 片段体验 因为 URL 是基于前缀匹配来匹配的 只需要注册一个 app 片段体验 URL https://bikesrental.example/rent 这足以为所有这些 带有该前缀和不同查询字符串参数的 自行车 URL 提供 app 片段体验 （例子 - 咖啡馆） 下面是另一个例子 说明为高级 app 片段体验 选择要注册的 URL 的策略 本例中的咖啡馆是 一家有多个销售点的大型连锁店 每个销售点基本上 都为顾客提供相似的体验

由于所有销售点的 URL 格式相同 都以 https://brighteggcafe.example/store/ 开头 我们可以为该 URL 前缀注册 app 片段体验 当顾客点击链接 来到他们的任何一家店时 他们都会得到相同的 app 片段卡片

但假设这家咖啡店想为 位于库比蒂诺市的 旗舰店提供更特别的 app 片段体验 要处理这种情况 你可以用不同的图像和副标题文本 为库比蒂诺店 URL 注册不同的 app 片段体验 主要应对方法是 你可以注册一个涵盖大多数情况的 较短、较通用的 URL 前缀 并仅在需要提供不同的 app 片段体验时 才注册更具体的 URL （配置 APP 片段体验） 有关在 App Store Connect 设置 默认值和高级 app 片段体验 的更多信息 请参阅“App Store Connect的新功能” 课程 有关 app 片段卡片设计的最佳做法 请参阅“设计优秀的 APP Clips”课程

现在是处理指向 app 片段的链接 的最后一步 设置智能 app 横幅以打开 app 片段

以下是发送 配置该横幅的网页 URL 后 人们在 Safari 浏览器或信息中 打开来自网页的 app 片段的方法 （FRUTA 菜单） 如果你以前为 app 设置过智能 app 横幅 那你一定熟悉添加到网页 HTML 用来指定 app 唯一标识符的 Apple iTunes App Meta 标签 要为 app 片段配置该横幅 将 app 片段的 bundle identifier 设置为 app-clip-bundle-id 内容属性 你也应该继续设置 app ID 属性 这样对于系统版本 低于 iOS 14 的用户而言 它会退回到完整的 app-linking 行为

Safari 浏览器会在显示横幅之前 验证网站和 app 片段之间的域关联

默认情况下 当用户 轻点智能 app 横幅的“打开”按钮时 他们会看到为该 app 片段配置的 默认 app 片段卡片

但如果你用高级 app 片段体验 注册该 URL 则可以为该体验自定义元数据 以便用户可以在横幅中看到 更具描述性的标题 并获得为该 app 片段执行的任务 定制的 app 片段卡片 （-默认 app 片段体验 -高级 app 片段体验） 为了演示我们谈到的 处理 app 片段链接方面的内容 我将请我的同事 Luming 给我们演示一下 Luming Ada 感谢你对链接到 app clips 的精彩介绍 我叫 Luming 是来自 App Clips 团队的工程师 今天 我会向你展示 如何链接到你的 app 片段 要通过物理或数字调用 将用户链接到 app 片段 你首先需要设置关联域 正如我的同事 Ada 在前面的谈话中提到的 我们需要配置网络服务器 和 app 片段项目 以处理链接 让我们先从网络服务器开始

这里是网络服务器的源代码 这是一个非常简单的静态网站 在网络服务器的根目录下 我已经创建了一个 .well-known 文件夹 其中有一个 apple-app-site-association 文件 我的 AASA 文件已经为通用链接、接力 和带密码自动填充的网络凭证进行配置 现在只需要更新 AASA 文件 以链接到我们的 app 片段

好了

既然我们已经配置了网络服务器 让我们回到 Fruta Xcode 项目

要链接 app 片段 你需要注册以处理 NSUserActivityTypeBrowsingWeb 类型的 userActivity 在 app 片段的 WindowGroup 声明中 我会添加一个新的 TypeBrowsingWeb 的 onContinueUserActivity 处理程序

在其中 我会解析传入的 URL 并获取 URL 中的查询项

此后 我会获得第一个 名为“冰沙”的查询项 如果有的话 将数据存储上的 selectedSmoothieID 设置为该 URL 参数 这是我们的冰沙标识符

回到 Fruta Xcode 项目 我会前往 “签署和功能”标签 在其中 我会添加一个新功能 我会选择添加“关联域”

我会扩展该功能 并点击加号按钮以添加新的关联域 下面我会进入“appclips:Fruta.example” 现在 我们已经设置了关联域 让我们配置一个启动 URL 以便用其调试我们的 app 片段 为此 我会点击“Target Popup”按钮 并点击“Edit Scheme” 你会看到环境变量部分已经预填充 值“example.com”

我们只需要勾选 name _XCAppClipURL 环境变量前面的复选框

在其中 我会输入一个 app 片段 能解析的 URL app 片段会获取 smoothie=BerryBlue 参数 正如我们之前设置的那样

我会关闭编辑程序 并在设备上构建并运行片段

（构建成功）

好了 （浆果蓝） 我们的 app 自动解析了 app 启动 URL 并将我们带到浆果蓝冰沙 我会下单 用 Apple Pay 支付… （感谢下单！） …等待我的订单准备就绪 （你的冰沙准备好了） 看来我的冰沙准备好了

我很想亲自享用冰沙 但还有更多东西要演示 因为我已经将 Fruta app 提交到 App Store Connect 并用 Ada 之前在谈话中谈到的流程 在 App Store Connect 上 配置了 app 片段卡片体验 现在 如果我在手机上轻点这个 NFC 标签 就会显示一个 app 片段卡片 而且我可以在此处通过物理调用启动片段

正如我的同事 Ada 之前在谈话中谈到的 另一种方式是 通过 Safari 浏览器中的 智能 app 横幅

现在我回到了网站资源 在 index.html 文件中 我们只需要为 app 片段添加新的元标签

我指定了名称为“apple-iTunes-app” 以及“app-clip-bundle-ID”作为它的内容 请注意 我保留了 app-ID 参数 这样运行 iOS 14 以下版本的用户 就仍然可以看到智能 app 横幅 指示他们从 App Store 下载 app

好的 将更改推送到服务器后 我又回到手机上 并已前往 Safari 浏览器中的 Fruta.example

如你所料 尽管 Fruta.example 是一个 .example 域 但它不供出售 我们今年有很多生产预算 你真的应该参加激动人心的 14 小时域拍卖马拉松 当然 你仍然可以像以前一样浏览网页上的菜单 但在页面顶部 有一个新的智能 app 横幅 轻点“打开”时 我会看到与之前经由 NFC 进行物理调用时 看到的相同的 app 片段卡片

在轻点“打开”后 我们又被带到 app 片段

这是一个关于 链接到 app 片段的快速演示 谢谢 交回给你 Ada Luming 感谢你向我们展示 如何在 app clips 中设置链接 那杯浆果蓝冰沙看起来真的很清爽

还有一件事我想简单谈谈 那就是 app clips 的 beta 测试

在你将包含 app 和 app 片段的版本 交付到 App Store Connect 后 你应该会在 TestFlight 中 找到一个新的 app 片段部分 这时你能为 app 片段添加测试调用点 以便 beta 测试人员能 为不同的 app 片段体验 测试打开 URL 点击“添加App片段调用”

并设置希望 beta 测试人员试用的 app 片段体验的标题和 URL

有关在 App Store Connect 中 测试和提交 app clips 的详细信息 请参阅 “App Store Connect的新功能”课程

总结一下 在本课程中 我们向你展示了 如何通过为新的 app 片段服务类型 设置关联域 并处理 app 片段中的 web-browsing NSUserActivity 以处理指向 app 片段的链接

如何在 App Store Connect 上 配置默认值和高级 app 片段体验 包括注册 app 片段体验时 使用哪些 URL 的最佳做法…

如何设置智能 app 横幅 以便在网页上打开 app 片段 最后是 TestFlight 中 用于测试 app clips 的新功能

感谢你观看本课程 我迫不及待地想看到 你将创建的酷炫 app clips

（全球开发者大会 20） 你好 （全球开发者大会 2020）