为其他商户构建 App Clips

Python实战社群

Java实战社群

长按识别下方二维码，按需求添加

扫码关注添加客服

进Python社群▲

扫码关注添加客服

进Java社群▲

作者：林永坚 (Jake Lin)，Mobile Tech Lead，目前就职 realestate.com.au，负责客户产品与体验部门各个移动产品的开发。

来源公众号丨老司机技术周报（LSJCoding）

Session: https://developer.apple.com/videos/play/wwdc2020/10118/

概述

这个主题讲述如何为其他商户构建 App Clips 体验，例如某外卖 App 如何帮各个不同餐饮商户构建基于他们自己品牌的 App Clips 来支持预定餐桌，点餐等服务。只需在一个主 App 中创建唯一的 App Clips 库就可以为不同商户提供各自独特的 App Clip 体验。同时讲述了 App Clips 的最佳实践，包括如何上传独特的商户信息，处理入口链接，路由推送消息，处理存储和恢复会话状态等等。也讲述了各种 App Clips 体验图标类型的差异性，如何呈现和定制这些图标。

应用场景

本主题通过几个例子为我们呈现为什么要为其他商家提供 App Clips 体验。

商户聚合性 App

例子中给了一个叫做 Food Grid 的 App，这有点像某团外卖 App。一旦该 App 为各个商家构建了 App Clips，用户在使用 Siri 查找附近餐厅或者在使用 Apple Maps 的时候会出现这些商家的 App Clips，哪怕该用户没有安装 Food Grid App，这有点像小程序，把线下商户和线上无缝嫁接。

为商户提供增值服务

有些商户没有能力或者资金来开发与维护自己独立的 App，你可以通过 App Clips 来为这些商户提供增值服务，例如积分卡服务。你可以帮商户提供 NFC，QR Code 等手段唤醒 App Clips 来享受增值服务。例如某付宝在买单后扫描自动添加该商户的积分，从而提高用户的粘性。

贴牌 (White Label) 应用

独立开发者的大航海时代再次来临，搞到我都心痒痒再干一场。我们可以为某个行业（例如咖啡店行业）做一个聚合类的 App，然后为各个咖啡店换皮成各个单独的 App Clip。

构建技术

开发 App Clips 和开发普通 App 没什么大区别，我们可以使用 SwiftUI 或者传统的 UIKit 来进行开发。App 原有的代码都可以大幅度地重用，简单到可以把 App 的源码加入到 App Clips Target 就可以了。

唤醒渠道

目前 App Clips 的唤醒渠道包括：

• NFC

• QR Codes

• Apple Maps App

• 附近智能提示

• Safari

• Messages App

• Spotlight （上述 Slide 没有列出）

• App Library （上述 Slide 没有列出）

可以看到除了 NFC 和 QR Code 等线下的入口以外，其他都是 Apple 自己的系统或者 App。可以在 Configure and Link Your App Clips^[4] 找到更多相关信息。

不同 App Clips 应用场景的比较

如果你的 App 是聚合性的 App（例如某团外卖），那么特别适合为其他商户提供 App Clips 体验。这样只需要开发唯一的 App Clip 库就可以为每个商户提供独特品牌形象的支持。

动手开干

简单来说只要以下四步就可以构建出 App Clips 体验

• 有一个主 App

• 基于你的主 App 构建 App Clip 体验

• 上传 App Clips 应用

• 为各个商户定制个性化体验

下面我们详细讲述一下后面三点

构建 App Clips 应用

关于 App Clips 的构建，可以参考其他三个重要的主题：

• Explore app clips^[5]

• Configure and link your app clips^[6]

• Streamline your app clip^[7]

这里重点提醒一下，当我们支持 App Clip 的时候，必须在 NSUserActivity 里面处理好 Universal Links 以保证每个 URL 都能得到处理。因为一旦用户安装了你的主 App，扫码后会直接打开你的主 App，而不是 App Clip。举个简单例子，例如用户扫码订餐，你的主 App 必须支持该商家的订餐信息，否则用户不知道到底这个码是干什么的。

特殊场景 1 - 处理推送消息

推送消息在 App Clips 体验中非常重要，例如用户点的奶茶做好了，可以通过推送消息来提醒用户领取。当你的 App 为各个商家构建了不同的 App Clip 以后，iOS 系统需要根据 targetContentIdentifier 来把推送消息路由特定的 App Clip 体验去。例如在上面的例子中，iOS 系统是在 targetContentIdentifier 中通过匹配最长的前缀 (foodgrid.example/fantastico) 把消息路由到 Fantastico App Clip 体验。这个地方必须注意做好处理，想想用户在各个地摊点点点，消息乱套就麻烦了。更详细信息可以在 Enabling Notifications in App Clips^[8] 查看。

特殊场景 2 - 状态处理

由于 App Clips 体验注重线下体验，这使得处理状态变得尤为重要。这里举个例子：现在全民摆摊，以后某付宝或者某信支付为各个地摊建立特定的 App Clip 体验，用户在后浪串串摊选好了几样菜但还没有确定买单，然后看到同行落魄 iOS 在线炒粉，扫描打开另外一个 App Clip 支持一下，回去后浪串串摊 需要恢复原先的点餐状态来完成一个完整的体验。生命周期处理和状态保存本来就是移动开发的难点，这样我们需要特别注意。

落魄 iOS 在线炒粉

上传 App Clips 应用

App Clips 需要和主 App 一起打包提交并进行审批。更多信息可以看 What's new in App Store Connect^[9]

为每个商户配置 App Clip 体验

完成 App Clip 应用上传以后，去到 App Store Connect，选择包含 App Clip 体验的 App 进行配置。由于需要支持不同商户，所以要为每个商户进行不同的个性化配置。

当你为其他商户（不是你自己的主 App）创造 App Clip 时，需要选择 A different business, service, or brand powered by *** 的选项。

注意：但是从目前（2020 年 6 月 25 日）来看还是有些限制，例如目前需要登陆到 App Store Connect 进行手工配置，无法自动批量地配置每个 App Clip 体验。在 Apple 的论坛有人提问该问题 Submitting multiple app clip cards for businesses^[10]。估计 Apple 会快速跟进这个问题。如果每次都是手工上传和配置，为每个特定的商户上传和配置 App Clip 的工作量会变得异常巨大，想想有个多少个后浪滩就知道了。

App Clip 卡片

在配置 App Clip 体验时，App Clip 卡片的作用尤为重要，我们下面重点讲一下如何配置 App Clip 卡片。

我们可以在 App Store Connect 里面为各个单独的商户建立不同的 App Clip 卡片，该卡片包括：

• 主题图片

• 主题

• 副题

• 相对应的地理位置信息

• 动作

更多信息可以参考 Design great app clips^[11]

下面我们展开讲述一下。

主题图片

当设置主题图片的时候需要注意以下几点：

1. 该图片应该代表正在推广的商户，而不是你的主 App

2. 要使用商户相关主题的图片，而不是文字或者广告

3. 该图片会呈现在 App Clip 卡片和加载页面中（注意：App Clips 没有其他 App 那样可配置的启动页面）

4. 图片需要 3:2 aspect fill 的模式

5. 推荐使用 2000px * 3000px 的尺寸

6. 使用 PNG 或者 JPG 格式

7. 图片不能有透明度

主题和副题文本

在设置主题和副题文本时候，需要注意以下几点：

1. 由于你的主 App 信息已经在 App Clip 卡片底部呈现，所以主题和副题文本要呈现商户信息，而不是你的 App 的信息

2. 可以考虑做本地化来支持不同语言

动作 (Action)

当前支持的动作包括：Open（打开）， View (查看) 以及 Play（播放），这些 Action 的文本都自动本地化，所以我们不需要做任何额外工作。同时 Apple 还在优化这一部分，如果你有任何建议，可以联系他们。

App Clip 图标 (Icon) 类型

这里有两种不同的图标：App Clip 图标和 App Clip 体验图标

App Clip 图标

• 该图标应该代表你的主 App，而不是特定的商户。

• 该图标和你的主 App 图标一样出现在各种系统的 UI 里面，例如 Spotlight 搜索，App Library，但是 App Clip 会有一个虚线的圈围住。

• 我们可以像做主 App 图标那样制作 App Clips 图标，系统会自动加那个虚线圈圈。

App Clip 体验图标

App Clip 体验图标是与各个特定的商户关联的，一个体验对于一个 URL（代表一个特定的商户）

这个图标会在以下系统 UI 中呈现

• App Library

• Spotlight 搜索

• 主动推荐信息，例如根据地理或者用户喜欢相关的推荐信息

• Messages，Apple Maps 和 Safari 等系统的 Apps 里面

下面探讨一下这些 App Clip 体验图标到底怎样呈现的。

当我们通过 Maps Connect 上传了图标以后，该图标就会出现在兴趣点(Point of Interest)里面，如果我们不上传图标，系统会自动呈现一个通用的 POI 图标。

总结

• 应该考虑为你的其他商户构建 App Clip 体验

• 构建 App Clip 体验非常简单，只需要把相关的代码加进 App Clip target 即可

• 通过不同技术例如 NFC，QR Codes，推送消息，Apple Pay 来提供流畅体验

• 还有为每个商户提供独特的描述信息和图标

参考资料

[4]

Configure and Link Your App Clips: https://developer.apple.com/videos/play/wwdc2020/10146/

[5]

Explore app clips: https://developer.apple.com/videos/play/wwdc2020/10174/

[6]

Configure and link your app clips: https://developer.apple.com/videos/play/wwdc2020/10146/

[7]

Streamline your app clip: https://developer.apple.com/videos/play/wwdc2020/10120/

[8]

Enabling Notifications in App Clips: https://developer.apple.com/documentation/app_clips/enabling_notifications_in_app_clips

[9]

What's new in App Store Connect: https://developer.apple.com/videos/play/wwdc2020/10651/

[10]

Submitting multiple app clip cards for businesses: https://developer.apple.com/forums/thread/650786

[11]

Design great app clips: https://developer.apple.com/videos/play/wwdc2020/10172/

程序员专栏 扫码关注填加客服 长按识别下方二维码进群

近期精彩内容推荐：  

 10号和20号发工资的公司，区别竟然这么大？

 美女裸聊一时爽，裸聊结束火葬场!

 使用IntelliJ IDEA查看类图，内容极度舒适

 Pycharm IDEA破解汉化插件带你一文打尽！

在看点这里好文分享给更多人↓↓