WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in App Clips

What's new in App Clips

App ClipsApp ServicesSafariiOS 15
观看原视频

Highlight

iOS 15 为 App Clip 带来了三项改进：网页中可展示全尺寸 App Clip Card、开发者可在设备上创建本地体验进行端到端测试、以及 Apple 设计的 App Clip Code 让线下发现体验更自然。

核心内容

从网页到 App Clip，中间隔着几步

想象你经营一家果汁店，顾客在朋友的推荐下打开了你们店的网页。页面上有一个 Smart App Banner，顾客需要发现这个横幅、点击打开、再在弹出的卡片中确认——三步才能进入 App Clip 点单。

这个流程在 iOS 14 已经可用，但转化率受限于用户的注意力。横幅太小，容易被忽略；步骤太多，每一步都在流失用户。

全尺寸 App Clip Card

iOS 15 和 iPadOS 15 允许网页在 apple-itunes-app meta 标签中增加一个 app-clip-display 键，值设为 card。网页加载后，一个全尺寸的 App Clip Card 会直接显示在页面中央。

用户看到标题、副标题、操作按钮和品牌头图，一键就能启动 App Clip。如果用户选择”在 Safari 中查看”，Safari 会记住这个选择，下次加载该页面时恢复为原来的横幅。

更实用的是，第三方 App 内嵌的 SFSafariViewController 也支持这个全尺寸卡片。比如一个美食推荐 App 嵌入了你的果汁店网页，用户在这个 App 里就能直接看到你的 App Clip Card，无需跳转 Safari。

本地测试，不再依赖 App Store Connect

开发 App Clip 时，你可能还没有在 App Store Connect 注册任何体验。以前这意味着无法测试完整的端到端流程——从扫码到卡片展示再到 App Clip 启动。

iOS 15 的”本地体验”（Local Experiences）解决了这个问题。进入设备的”开发者设置”，选择”Local Experiences”，填写 App Clip 名称、标题、URL 前缀、Bundle ID，再从相册选一张头图。配置完成后，你可以用 QR 码、NFC 标签、App Clip Code、Safari 或 Messages 来触发这个本地体验。

本地体验支持大部分常规调用方式，但不会在 Maps、位置建议或 Spotlight 中显示——这些需要注册体验。本地体验仅限 Xcode 安装的 App Clip 或 Beta 测试版本使用。

App Clip Code：为线下场景设计的视觉码

App Clip Code 是 Apple 专门为 App Clip 设计的视觉码，从 iOS 14.3 开始支持。全球近 10 亿设备可以直接识别。

每个 App Clip Code 编码了一个唯一的 URL，iOS 在发送给 App Clip 之前会先解码 URL。这意味着你现有的 URL 处理逻辑完全不需要改动。

有两种类型：

  • NFC 集成型：用户可以用相机扫描，也可以直接轻触 NFC 标签。适合放在用户容易接触到的地方，比如自动售货机、餐厅桌面、商店橱窗。
  • 仅扫描型：适合放在用户无法接触的位置，或者 NFC 不适合的场景，比如营销邮件中的数字展示。

你可以自定义前景色、背景色，也可以隐藏 App Clip Logo。Apple 建议在空间足够时保留 Logo，让新用户一眼就知道这是 App Clip 入口。

如果你有 ARKit App Clip，还可以把 App Clip Code 用作锚点（Anchor），追踪它在物理世界中的位置。比如用户扫描包装上的 App Clip Code，不用拆包装就能在 AR 中查看里面的吉他。

详细内容

Safari 中的 App Clip Card

（03:27）

在 iOS 15 之前，网页通过 apple-itunes-app meta 标签显示 Smart App Banner。这是一个固定在页面顶部的小横幅，用户需要主动发现它。

iOS 15 新增了 app-clip-display 键。将值设为 card，网页就会显示全尺寸 App Clip Card：

<meta name="apple-itunes-app"
      content="app-id=123456789,
               app-clip-bundle-id=com.example.app.clip,
               app-clip-display=card">

关键点：

  • app-id：你的完整 App 的 App Store ID
  • app-clip-bundle-id：App Clip 的 Bundle ID
  • app-clip-display=card：启用全尺寸卡片模式

卡片显示在页面中央，包含标题、副标题、操作按钮和头图。用户点击后直接进入 App Clip。

如果用户点击”在 Safari 中查看”，Safari 会记住这个偏好，下次访问同一页面时恢复为原来的横幅样式。

SFSafariViewController 中的卡片

（04:16）

第三方 App 使用 SFSafariViewController 加载网页时，同样会显示全尺寸 App Clip Card。这意味着你的 App Clip 可以在其他 App 的 UI 中被直接发现和启动。

演示中，FoodGrid App（一个第三方美食推荐 App）嵌入了 Fruta 果汁店的网页。用户点击 Fruta 的店铺信息后，SFSafariViewController 弹出，全尺寸 App Clip Card 直接显示在页面中。用户一键就能启动 Fruta 的 App Clip 下单。

本地体验的配置步骤

（04:42）

在设备上进入”设置 > 开发者 > Local Experiences”，填写以下信息：

字段说明
App Clip 名称显示在卡片上的名称
标题卡片的标题文本
URL 前缀触发该体验的 URL 前缀
Bundle IDApp Clip 的 Bundle Identifier
头图从相册选择一张图片作为卡片头图

配置完成后，你可以用以下方式测试：

  • 扫描 QR 码
  • 读取 NFC 标签
  • 扫描 App Clip Code
  • 在 Safari 中访问匹配的 URL
  • 在 Messages 中打开链接

本地体验不会在 Maps、Siri 建议或 Spotlight 中显示。这些渠道需要已在 App Store Connect 中注册的体验。

App Clip Code 的生成

（08:45）

有两种方式创建 App Clip Code：

方式一：App Store Connect

适合已注册 URL 的生产环境。直接在 App Store Connect 中下载生成的代码。

方式二：App Clip Code Generator 命令行工具

适合开发和测试阶段，或需要批量生成、自动化生成的场景。

工具从 Apple Developer 网站下载安装后，在 Terminal 中使用：

# 查看所有可用模板
AppClipCodeGenerator templates

# 生成 NFC 集成型 App Clip Code
AppClipCodeGenerator generate \
  --url https://fruta.example.com/order \
  --template 4 \
  --style nfc \
  --output fruta.svg

# 生成仅扫描型
AppClipCodeGenerator generate \
  --url https://fruta.example.com/order \
  --template 2 \
  --style scan \
  --output fruta-scan.svg

关键点：

  • templates：列出所有可用视觉模板，模板预览位于 /Library/Developer/AppClipCodeGenerator/SampleTemplates
  • --url：App Clip 体验的 URL，必须在 App Store Connect 中注册为高级体验
  • --template：选择视觉风格模板编号
  • --style nfc|scan：选择 NFC 集成型或仅扫描型
  • --output：输出 SVG 文件路径

输出的是 SVG 矢量图，可以从美国信纸大小缩放到 24x36 英寸的海报，不会失真。

App Clip Code 的使用规范

（11:20）

Apple 给出了以下设计指南：

  • 将代码放在平面上，保持直立，不要旋转
  • 代码宽度至少 1 英寸，太小会影响扫描
  • 确保代码不被遮挡、损坏，也不要和其他代码贴得太近
  • 在代码旁边添加简短文字，告诉用户如何操作

ARKit 集成

（10:24）

如果你的 App Clip 使用了 ARKit，可以把 App Clip Code 用作 AR 锚点。ARKit 会追踪代码在物理世界中的位置，让虚拟内容精准叠加在代码附近。

具体实现参考 WWDC21 session “Explore ARKit 5”。

核心启发

1. 餐厅/咖啡店扫码点餐

在每张餐桌上贴一个 NFC 集成型 App Clip Code。顾客入座后轻触即可打开点餐 App Clip，选餐、支付、叫号，全程无需下载完整 App。

入口：在 Xcode 中创建 App Clip target，配置 Associated Domains，在网页 meta 标签中添加 app-clip-display=card。

2. 零售店 AR 试妆/试戴

在化妆品柜台或眼镜展示架旁放置 App Clip Code。顾客扫描后打开 AR App Clip，虚拟试妆或试戴眼镜，满意后直接跳转到购买页面。

入口：结合 ARKit 的 ARAnchor 和 App Clip Code 追踪能力，参考 “Explore ARKit 5”。

3. 停车场无感支付

在停车位或缴费机旁贴 App Clip Code。车主扫描后打开停车缴费 App Clip，自动识别车位号，Apple Pay 一键支付。

入口：使用 Core Location 获取位置，CLLocationButton 获取精确位置授权，配合本地体验在开发阶段测试完整流程。

4. 活动/展会快速签到

在签到处放置 App Clip Code。参会者扫描后打开签到 App Clip，自动填充报名信息，完成签到。

入口：使用 App Clip Code Generator 批量生成不同活动/不同日期的代码，每个代码对应不同的 URL 参数。

5. 共享内容预览

在社交媒体分享链接中嵌入 App Clip 预览。接收方点击后直接进入 App Clip 查看内容，无需先下载完整 App。

入口：配置 Messages 中的 App Clip 预览，在 App Store Connect 中设置分享卡片样式。

关联 Session

评论

GitHub Issues · utterances