872e9f8605e684b309df2ee82c563bbf
WWDC20 10146 - App Clips 的配置及链接处理

本篇梳理基于: WWDC 2020 - Configure and link your app clips

本篇内容结构:

1.前言

本篇介绍了 App Clips 链接处理所需要知道的所有内容。 App Clips通过最简化的方式,为你的用户提供了一个体验应用程序的入口。当你的用户需要 App 的具体功能来处理某项操作时,App Clips 会通过 deep-linked 的方式无缝将 App 的具体模块呈现给用户。本课程介绍了App Clip 内链接的处理和配置链接所需的操作。首先,让我们通过一个示例,来看下如何通过一个 App Clip 来完成一个具体的功能处理。

2.App Clip 应用示例 - 订购冰沙🍧

[00:49]

想象着你现在在经过一个冰沙摊。你想要来一份冷冰沙。这时,你发现了一个带有标语的 NFC 标签,上面写着“贴近此处订购”。你按照提示将手机贴近了 NFC 标签,之后在你的 iPhone 屏幕的底部会弹出一个卡片,上面写着购买沙冰的一些简短说明,而这个卡片即是我们要介绍的 App Clip。当你按照卡片的提示,点击了上面的“打开”按钮后,将在手机上启动 App Clip 的订购处理,这个处理会将你直接带到冰沙的订购页面。之后,你通过 Apple Pay 完成支付,成功买到了冰沙。

上述购买冰沙的这一过程,即发生了购买的关联处理。 我们从程序的角度来看下这一过程是怎样的。NFC标签实际上是一个编码的 URL,对应注册了一个 App Clip 体验,关于如何注册将在后面部分进行详细展开。NFC 触发弹出 App Clip,当你点击 App Clip 上的“打开”按钮后,App Clip 将启动带有通过 NSUserActivity 传递的URL,之后 App Clip 将你直接带到订购页面。

除了 NFC,活动链接也可以出现在其他地方。你的 URL,可以编码在物理标签中;也可以与地图上的实际位置相关联。下面,让我们逐一介绍这些链接的处理方法。

3. 链接方式

[02:03]

正如在前面的示例中提到的那样,NFC 标签可以编码入一个 App Clip URL,用户可以通过手机放到 NFC 上来打开 App Clip

App Clip URL 也可以编码入一个二维码中,人们可以通过扫描二维码来触发 App Clip


App Clip可以显示在已注册商家的地图位置卡上,也可以显示在 Siri 附近建议中。

如果你的网页配置了 App Clip 对应的智能应用横幅,则你也可以从 Safari 打开 App Clip。用户可以通过点击该横幅中的打开按钮以打开 App Clip

当用户在 Messages app 中发送该站点的 URL 时,它会以特殊的 App Clip 链接气泡显示,该气泡让用​​户可以选择在 App Clip 或在 Safari 中打开链接。

此外,为了给大家带来更好的体验,苹果将于今年晚些时候发布新的 App Clip 码,这是让你的用户发现你的 App Clip 的最佳方式。它在视觉上是美观而独特的,因此当用户看到它时,便知道有一个 App Clip 在等待他们去使用。每个 App Clip 码都对应编码了一个 URL。苹果将​​于今年晚些时候发布可以创建这些独特 App Clip 码的工具。

现在我们已经知道了可以让用户进入到你的 App Clip 的不同方法。接下来,让我们逐步了解 App Clip 开发人员在设置链接体验过程中所需要做的步骤。

4. 链接到你的 App Clip

[03:38]

首先,你必须对 Web 服务器App Clip 项目进行更改。以让这些链接可以由 App Clip 处理。接下来,你必须配置 App Clip 卡片,该卡片用于向用户介绍 App Clip 的信息,也是 App Clip 体验的一部分。你可以在 App Store Connect 上设置默认和高级 App Clip 体验。下面,让我们配置一个智能应用横幅,以在网页上显示你的 App Clip。如果你可以通过更好和更简化的 App Clip 体验来交付网页内容,可以考虑添加此标语,以此来为你的用户提供一种可以从该网页访问 App Clip 的方法。首先,让我们开始配置 Web服务器App Clip 以进行链接处理。

4.1 配置Web服务器和 App Clip 以进行链接处理

[04:28]

你的网站和你的 App Clip 之间的关联必须经过验证,以便 App Clip 能够显示内容来代替网站的 URL。为了将你的 App Clip 与服务器安全地关联,你将需要 Web 服务器上的 apple-app-site-association 文件,以及 App Clip 上适当的关联域权限。之后,你必须更新 App Clip 中的代码以处理传入 NSUserActivity 的链接。首先,让我们更新 Web 服务器上的 apple-app-site-association 文件。

4.1.1 更新 apple-app-site-association 文件

[05:06]

该文件位于服务器的根文件夹中的 ./well-known 的子目录中。如果你之前已经为应用程序设置了通用链接(Universal Links),则可能已经在服务器上设置了该文件。根字典已经具有其他条目,例如 Web 凭据和应用程序链接。要在此文件中声明新的 App Clip 关联,请在根字典中添加另一个项,其键为 “appclips” ,并且该值包含一个字典,该字典包含单个 apps 键,该键设置为包含 App Clip 的应用标识符的数组。

4.1.2 添加关联的域权限

[05:45]

接下来,让我们更新 App Clip 项目以添加关联的域权利。在 Xcode 中,进入你的项目设置并添加 Associated Domains 功能。在 Domains 下,添加一个新的字符串 appclips:。现在,你的网站和 App Clip 均已设置了相关的域,让我们添加代码来处理 NSUserActivity,其中包含传递到你的 App Clip中的 URL。

4.1.3 处理 NSUserActivity

[06:15]

如果你的 App Clip 采用了新的 SwiftUI 应用程序生命周期,则可以通过上图中的方法为网络浏览用户活动添加处理程序。在该方法中,你可以从 NSUserActivity 获取 webpageURL 属性。然后,你可以解析该 URL 并将用户定向到链接的内容。请记住,当用户升级或下载了主 App 以后,App Clip 会直接打开主 App。因此,请确保你的应用程序也具有类似的代码来处理通用链接(Universal Links)的网址。

如果你的 App Clip 使用 UIKit SceneDelegate 生命周期,则上图是一些类似的处理代码,用于处理 UIScene 委托中传入的用户活动。要了解有关如何设置关联域和处理 NSUserActivities 的信息,请参阅会话:What's New in Universal Link

如果你需要在 Xcode 中调试 App Clip 中 URL 处理相关的代码,可以指定要传递到 App Clip 的测试 URL。在 Xcode 中打开 Scheme 编辑器。选择 Arguments 选项卡。在 Environment Variables 下,指定 _XCAppClipURL 变量。现在,当你从 Xcode 运行你的 App Clip 时,它将使用此 URL 启动。现在,我们已经完成了 Web 服务器和 App Clip 的配置,接下来,我们来配置 App Clip 体验。

4.2 在 App Store Connect 上配置 App Clip 体验

[07:51]

每次 App Clip 体验都是从用户触发看到的 App Clip 卡片(App Clip 链接)开始的。它展示了有关 App Clip 的信息,并征得用户的同意以打开它。

4.2.1 App Clip 设计规则

[08:04]

当你在提交用于配置 App Clip 卡的元数据时,请遵循标题和副标题长度上的这些要求,以实现卡片的最佳布局。为了满足所有设备上的最佳用户体验,还有图片大小,宽高比和格式上的要求。你所选择的图片需要遵循此 App Clip 操作所提供的准则。现在,让我们在 App Store Connect 上设置 App Clip 卡片。

4.2.2 在 App Store Connect 上设置 App Clip 卡片

top Created with Sketch.