为其它企业创建 app clip

（你好 WWDC 2020）

你好 欢迎参加 WWDC （为其它企业创建 App Clips） 我是 Luming App Clips 团队的 一位工程师 在这段视频中 我将讨论为 其它企业创建 App Clip 体验 我们将首先介绍代表其它 企业创建高级 App Clip 体验的概念 然后 我们将讨论如何开始 之后 我将向您展示如何为 每一个高级 App Clip 体验 设置一张 App Clip 卡 从而让你展示的每一个 企业品牌都光芒四射 最后 我将介绍不同类型的图标 它们出现在哪里 以及如何定制它们 那么 什么情况下你应该考虑为 其他企业创建高级 App Clip 体验呢？ 让我们看看几个示例 app （附近的 Food Grid） 如果你现有的 app 将许多商家聚合成一个面向客户的 app 并让用户从目录中发现它们 那么为所有商家创建 App Clip 体验当然是很有意义的 这样 你所代表的企业的客户就可以 体验到你提供的丰富功能 而无需下载你的 app

这个名为“Food Grid”的示例 app 拥有一个庞大的全国受欢迎餐馆的目录 这使得它很适合成为 开始开发 App Clip 的候选 如果没有 App Clip 客户大部分探索只能在你的 app 中进行 通过创建 App Clip 体验 更多用户可以通过系统功能 来发现这些商家 例如基于定位的 App Clip 建议 潜在用户不再需要为了发现附近的餐馆 而安装你的 app （Reward+ 输入收据代码） 许多小商家没有自己的 app 毕竟 他们主要关注的是 交付优秀的产品或服务 而不是自己构建 app 在这种情况下 创建 App Clip 体验非常棒 因为它让像你这样的专业开发人员 能代表那些商家创建类似 app 的体验 这种应用的一个例子是 Reward+ 它让顾客通过输入他们已经从另一个商家 离线获得的促销代码来获得奖励积分 通过 App Clip 你可以 与商家合作创建 NFC 标签 App Clip 编码或打印二维码 为它们从线下获得的客户提供附加价值 最后 如果你的商家专注于构建 某个特定行业的白色标签 app 并且所有这些 app 都非常相似 并且你正在考虑将所有这些模板化 app 整合到一个 app 中 但是你不确定将所有这些 app 整合到一个 app 中 是否能够很好地抓住每个 商家的个性和品牌特征 创建 App Clip 是一个非常好的选择 因为现在 通过将它们结合起来 并构建 App Clip 体验 每个客户仍然可以在 App Clip 体验中 拥有自己独特的品牌 但现在 你只需要构建和维护一个 app 既然我们已经讨论了何时考虑 为其它商家创建多个高级 App Clip 体验 让我们来讨论一下原因 （为什么要创建 App Clip ？） 你可以用 你已经熟悉的技术来构建你的 App Clip 所以你已经知道的技术 比如 SwiftUI 仍然适用

由于 App Clips 被认为是 app 的一部分 所以 App Clip 中的大部分代码 都是来自 app 的代码 你所需要做的就是重用它们 并把它们包含在你的 App Clip 的新的构建目标中

你的用户可以通过数字和 物理调用方法来发现 App Clip 如消息、智能 app 横幅、 基于位置的建议 以及 NFC 和二维码

因为 App Clip 是按需运行的 用户不需要下载你的 app 他们可以轻松用起来 这提供了一个顺畅、快速和集中的体验

最后 App Clip 让你所掌控的 商家的品牌形象大放异彩 每个商家都有自己的 App Clip 卡 上面有漂亮独特的标题图像 以及专门为他们定制的标题和说明 如果你看过我们的其它一些讲座 如“配置和链接你的 App Clip” 你可能会意识到你可以 创建一些不同类型的 App Clip 体验 为自己的商家和其他商家创建 多个 App Clip 体验之间 有许多相似和重叠之处 为其他商家创建 App Clip 体验的 重要区别和最大好处在于 通过构建一个单个 App Clip 二进制文件并创建多个体验 你可以根据自己的喜好展示和推广 尽可能多的独特品牌标识和 App Clip 卡 如果你有一个整合 多个商家的完整 app 这尤其合适 开始为其它商家创建高级 App Clip 体验 需要几个步骤 首先 让我们做一个高层次的概述 确保你建构建了一个现成的 app 并准备好了 然后通过有选择地包含 app 的 某些部分来创建一个 App Clip 之后 在 App Store Connect 中 提交你的 app 以及你的 App Clip 最后 通过 App Store Connect 中的高级部分 为你推广或代表的每个商家 创建 App Clip 体验 让我们从准备好你的 app 开始 更详细地回顾一下每一个步骤 首先 确保你的 app 处理 你代表或推广的每一个商家 如果你已经为每一个客户建立了多个 白色标签的模板 app 这可能是一个很好的机会 将它们整合成一个 app

然后考虑提供一个定制的体验 来适应每一类商家 例如 从视觉和功能的角度来看 你应该考虑在你的 app 中 以不同的的方式来表现零售店和餐馆 为了确保你的完整 app 为你的用户提供最大的功能和可用性 请提供一种浏览、搜索或浏览 商家目录的方式 最后 你应该在你的 完整 app 中处理通用链接 通用链接允许你将用户从一个 URL 链接到你的 app 的一部分 这是一个伟大的技术 甚至可以独立于 App Clip 而采用 虽然链接在 App Clip 中的处理方式 与 NS用户活动略有不同 但在 app 中处理好通用链接 会让你在 App Clip 中 获得出色的链接体验 要了解更多关于通用链接的信息 请参考“通用链接的新增内容” 准备好现有 app 后 是时候根据你的 app 创建一个 App Clip 了 为此 请在 Xcode 中创建新的 App Clip 目标 以嵌入到完整 app 中 然后有选择地将代码、资产和框架依赖项 包含在 App Clip 中 要了解有关调出 App Clip 目标的更多信息 请参考“探索 App Clip”

之后 你需要确保你的用户 可以链接到你的 App Clip 为此 你需要设置相关的域 处理 NS用户活动 并通过 App Store Connect 的 高级部分配置 App Clip 卡 这使你的用户可以通过 物理调用方法访问你的 App Clip 例如扫描一个 NFC 标签 二维码或 App Clip 编码 要了解更多信息 请参考“配置和链接你的 App Clip” 最后 为了提供更好的用户体验 你应该考虑使用特定于 App Clip 的技术 简化 App Clip 中的事务 例如临时通知、位置确认 以及使用安全的共享组容器将 App Clip 与完整 app 之间的无缝数据迁移 要了解更多信息 请参考“简化你的 App Clip” 在这些讲座中 你将了解到基于你的 app 构建 App Clip 所需的一切 学习路上 你可能还会看到 一个非常熟悉的演示者 如果你已经看了讲座 你基本上准备好了 在为其它商家而不仅仅是你自己的商家 创建 App Clip 体验时 有几个重要的考虑事项需要记住 从通知启动 并直接启动 App Clip 体验 让我们先看看从通知启动 Food Grid App Clip 我的设备提供了一些 App Clip 体验 Metatop+、Mandy & Jason、Fantastico 由于通知会发送到你的应用包 而不是特定的 App Clip 体验 因此 iOS 需要额外的信息 来将通知发送到正确的 App Clip 为此 你应该在通知负载的 targetContentIdentifier 符字段中 填写一个描述你的 通知内容的 URL iOS 然后执行最长的前缀匹配 并且由于 targetContentIdentifier 具有前缀 foodgrid.example/fantastico 所以它被转到 Fantastico App Clip 体验 有关更多信息 请参考开发人员文档 “在 App Clip 中启用通知” 在以下 URL 有

每个 App Clip 调用都带有一个 浏览网页类型的 NS用户活动 自然地 你可能会想要 总是用来自用户活动的网址 把用户推到一个新的会话 然而 重要的是要确保 如果该 URL 对应于同一个会话 你不会将用户推出或弹走 这是为什么？考虑以下情况

你的用户已经点击了 app 资源库中的 Fantastico App Clip Food Grid 获取用户活动 解析用户活动中的 URL 并导航到 Fantastico 我真的很饿 所以让我们看看菜单 现在我已经在购物车里 放了一些煎饼和开胃菜 想象一下 我被一条重要信息打断 切换到信息 app 回到主屏幕 现在 我已经从 app 资源库中 再次启动了 Fantastico App Clip Food Grid 从后台恢复 然后一个带有 Fantastico URL 的 新的用户活动 被传送到 Food Grid 所以 Food Grid 在导航叠放上 推了一个新的屏幕 在没有检查当前状态的情况下 Food Grid 从用户活动中的 URL 开始了一个新的会话

这意味着我在上一个会话中丢失了订单 尽管两个会话的 URL 是相同的 因此 在将用户推出或弹出之前 你应该检查新用户活动中的 URL 是否对应于当前正在运行的会话 而不是鲁莽开始新会话

最后 虽然 App Clips 代表 并宣传了多个商家 但它们不支持多个窗口 因此 如果你得到一个新的用户活动 其 URL 对应于一个不同的商家 你应该考虑在移动到新的、不同的会话前 保存状态或用户数据

这样 如果你的用户稍后返回到 已保存状态的 App Clip 体验 你可以无缝地将用户恢复到该状态 你所代表的每个拥有 App Clip 的商家 它们的期望都得到了满足 从用户的角度来看 他们只是在使用多个 App Clip 尽管它们是由一个二进制文件支持的 存档完整 app 时 Xcode 会自动将 App Clip 嵌入到完整 app 的存档中 要提交它以供审查 请使用 Xcode 或 Transporter 将带有嵌入 App Clip 的 完整 app 作为单个提交上传 要了解有关向 App Store 提交 App Clip 的更多信息 请参阅 “App Store Connect 中的新增功能” 在你将 app 和 App Clip 提交到 App Store Connect 后 是时候为你在 App Store Connect 中 推广的每个商家 创建 App Clip 体验了 为此 请在 App Store Connect 中 创建一个 新的高级 App Clip 体验 指定一个 App Clip 体验 URL 选择推广不同的商家 并将其发送给 Apple 进行审查 今年秋季 你将了解更多 关于创建高级 App Clip 体验的信息 但今天 我将快速向你介绍如何设置 在 App Clip 的 “App Store Connect”页面上 如果你向下滚动 会看到“高级 App Clip 体验”部分 其中有一个“开始”按钮 点击它 你将获得高级 App Clip 体验

创建新的 App Clip 体验时 请指定一个 App Clip 体验 URL 然后单击“下一步”

当被问及 App Clip 体验中呈现了什么时 你可以选择推广由你的 app 支持的不同商家、服务或品牌 选择正确的单选 radio 按钮 并发送你的 App Clip 体验以供查看 就是这样

当然 App Clip 卡是你的用户 发现你创建的 App Clip 的方式 这也是你推销或代表的商家 真正应该让人眼前一亮的地方 因此 不仅给人留下良好的 第一印象非常重要 而且这也是一个绝佳的机会 可以用你的 App Clip 建立商家强大的品牌形象

让我们来看看如何设置 App Clip 卡 你可以在 App Store Connect 中 为每个商家单独设置 App Clip 卡 并可以自定义每个商家的 标题图像、显示标题 副标题、位置关联和操作 如需更多详细信息 请参考“设计了不起的 App Clip 视频” 接下来 我将简单介绍一下 如何设置 App Clip 卡

在 App Store Connect 中 创建新的高级 App Clip 体验时 你可以选择自定义 App Clip 卡 首先 标题图像 标题图像应该代表你的 App Clip 所推广的商家 它应该使用丰富的图像和图形 尽可能用最好的方式代表 你正在推广的商家 所以你不应该在标题图像中 显示文字或广告 标题图像显示在 App Clip 卡 且加载屏幕上 并具有鲜明的背景效果 需要记住一些额外的格式要求 标题图像在纵横比填充模式下 以 3:2 显示 你应该尽量上传最高质量的图像 推荐的图像尺寸是三千像素乘两千像素 Apple 将在显示 App Clip 卡时 自动缩小图像 以便在各种网络条件下快速加载 为了确保图像在自动缩小后 保持清晰和清晰 上传最高质量的原件也很重要

图像应该是 PNG 或 JPG 格式 由于不支持透明度 图像应该完全不透明 让我们把 Fantastico.png 拖到 App Store Connect 来更新标题图像

接下来 让我们看看标题和副标题 因为你的 app 的属性已经 显示在 App Clip 卡的底部 所以这里的标题和副标题应该始终 代表你的 App Clip 正在推广的商家 而不是你的 app 本身

如果你正在推广的商家 在多个地区或地区都存在 你应该考虑将显示的标题和副标题 语言本地化 这样 App Clip 卡上的信息 能够被全球用户看懂 现在 让我们给 App Clip 卡 一个默认的显示标题和副标题 （Fantastico 煎饼解你燃眉之急） 最后 对于动作 你可以从一个预先定义的动作列表中 选择诸如打开、查看和播放等动作 在地图 app 的环境中 还可以执行其它操作 前提是你的 App Clip 与物理位置相关联

这些动作指令会自动得到翻译 我们期待听到各位的反馈 希望今后 App Clip 卡中 显示哪些其它操作 让我们配置一个动作 我将在这里选择“打开（订购食物）” App Clip 卡预览已相应更新 这就是设置 App Clip 卡的步骤 你的 App Clip 品牌和身份的 另一个核心部分是图标 在 App Clip 的环境中 有几种不同类型的图标 首先 app 图标 这在 iOS 14 和 App Clip 之前就已经存在了 它是新出现在 App Clip 卡中的 因为 App Clip 体验是 由整个 app 中的技术提供的 它会显示在 App Clip 中的 app 横幅中 因为 app 横幅会建议 用户下载你的完整 app

这新增的是 App Clip 图标 和 App Clip 体验图标 让我们更详细地讨论这两个问题

当 iOS 调用你的 App Clip 时 会显示 App Clip 图标 而不是调用 App Clip 所代表 或推广的特定商家 换句话说 它代表一个 App Clip 但不代表特定的 App Clip 体验

它在 iOS 系统用户界面中显示 就像你的 app 图标一样 例如在多任务切换器、通知和设置中

iOS 会自动为你的 app 图标 进行漂亮的处理 因此 你应该继续创建 方形、不透明的图标 你的图标被缩小了 边框经过特色处理 向用户显示这是一个 App Clip 最与众不同的图标类型是 App Clip 体验图标 有时也称为商家图标 图标始终代表一种特定的 App Clip 体验 即使你的 App Clip 支持多种 App Clip 体验 每种体验都会有自己的图标 在系统用户界面中脱颖而出

从技术角度来看 App Clip 体验图标 总是与一个 URL 相关联 轻点 App Clip 体验图标 总是会启动带体验 URL 的 App Clip App Clip 体验图标 在整个系统用户界面体验中都是可见的 你可以在 app 资源库中 的“最近添加”文件夹、Spotlight Search 基于位置和使用情况的主动建议 以及内置 app 如信息、地图和 Safari 浏览器中看到它 我知道你们在想什么 这些 App Clip 体验图标来自哪里？ App Clip 体验图标 与地图上兴趣点的图标一致 前提是该商家拥有实体店面 所以它是可定制的 商家可以将图标上传到 Maps Connect 以获得 App Clip 体验 如果商家或 App Clip 体验没有图标 iOS 将自动回到通用类别图标 如剧院、购物、食品和停车场

总而言之 如果你的 app 代表或推广了多个商家 你应该考虑为所有商家 创建高级 App Clip 体验 要创建 App Clip 你可以使用与构建 app 相同的技术 App Clip 很容易构建 只需根据需要在 App Clip 构建目标中 选择性地包含 app 的部分内容 无论是代码、资产还是框架依赖项 你应该考虑使用 专门用于 App Clip 的技术 例如一次性位置确认或短暂通知 以进一步简化体验 将数据和凭据存储在安全的 共享组容器中 以便当你的用户从 App Clip 升级到完整 app 时 可以自动迁移用户数据 最后 你应该上传你创建的 每个 App Clip 体验的唯一元数据和图标 以便你推广的每个商家的品牌标识 通过 App Clip 卡 和整个系统用户界面大放光彩 这就是“为其它商家创建 App Clip” 感谢观看 祝你 WWDC 愉快