作者：昊泽，iOS 开发者。喜好是给我女朋友讲 iOS 的底层原理和协助她处理她没有思路的线上溃散。

审核：乐鹰神骑俊，iOS开发者，现在从事智能家居设备衔接控制方向的工作 ：）

【老司机精选】App Clip 新特性

本文根据 Session 10012 – What’s new in App Clips 梳理

引子

【老司机精选】App Clip 新特性

App Clip 是 WWCD20 的一大亮点。作为轻量级运用，它供给了一种“即时运用”的方法，用户无需在 App Store 下载完好的运用程序，根据苹果供给的各种唤醒方法，让用户在特定场景下很方便地体会 App 内的核心功用。

现在一年过去了，世界各地的开发者开发出了各种优异的 App Clip。一起 Apple 供给了一种全新的 App Clip Card 的展现方法，也一并完善和优化了本地体会，并供给了命令行东西来协助开发者们生成轻运用码。 让咱们一起来看看吧。

共享优异的 App Clip

在上一年的 Session Configure and link your App Clips，App Clip 的各种唤醒方法是极其惊艳的。包括但不限于 Safari、iMessage、Map、Spotlight search、Siri suggestion widget、NFC、QR Code、App Clip code。接下来让咱们看看这些比方。

【老司机精选】App Clip 新特性

Phoenix 2

Phoenix 2 是来自 Firi Games 的一款盛行游戏，一起装备了 App Clip。当运用 iOS 设备翻开 Phoenix 2 游戏介绍页，会在 Safari 顶部展现 Safari App Banner。点击 Play 按钮，会调起 App Clip card，在这儿就能够发动游戏。

Safari App Banner 是 App Clip 在 Safari 内的唤醒方法。开发者在网页源代码装备相应的 meta tag，就会在网页顶部展现 Safari App Banner。关于 Banner 的装备，下文会有具体的介绍。

【老司机精选】App Clip 新特性

【老司机精选】App Clip 新特性

当完结游戏的第一关之后，底部会弹起引流到完好 App 的原生浮窗。

【老司机精选】App Clip 新特性

App Clip 供给了快速展现完好 App 下载提示的入口。参阅代码如下

// 在 App Clip 工程内增加如下代码
UIWindowScene *scene = (UIWindowScene *)[[UIApplication sharedApplication].connectedScenes.allObjects firstObject];
SKOverlayAppConfiguration *config = [[SKOverlayAppConfiguration alloc] initWithAppIdentifier:@"Your app ID" position:SKOverlayPositionBottomRaised];
SKOverlay *overlay = [[SKOverlay alloc] initWithConfiguration:config];
overlay.delegate = self; // 增加署理后能够监听弹窗的弹出和消失，能够在署理内增加自己的逻辑。
[overlay presentInScene:scene];

Tips

当我测验 Phoenix 2 的 App Clip 时，发现了一些有趣的点。

  • Phoenix 2 不支撑中国大陆的运用商铺，当我的设备的运用商铺账号归归于中国大陆时，Safari 顶部并不会展现 Safari App Banner，或许仅展现出一个灰底占位底图。灰底占位底图上只要关闭按钮，并无其他信息。推测是苹果的适配问题导致的。
  • 注销运用商铺账号，处于无账号状态下翻开游戏介绍页，依然不会展现 Safari App Banner。
  • 当我将设备的运用商铺的 Apple ID 切换成美区账号，再次翻开游戏介绍页。此刻顶部就会展现出相应的 Safari App Banner。
  • 以上每次切换账号前，都会重启设备来规避 Safari 缓存造成的影响。
  • 假如 Safari 处于无痕浏览形式，那么顶部的 Safari App Banner 就不会展现。
  • 以上测验机型为 iPhone XR (iOS 14.0) / iPhone X (iOS 14.7)

在上一年和本年相关的 Session 中，并未提及对非出售区域账号不展现 Safari App Banner 的叙述。但根据测验成果，笔者做出了一个解说。

在 Safari 展现 banner 前会验证 网站和 App Clip 之间的 domain association。一起也会判断设备上的运用商铺账号是否在 App Clip 出售区域内。

TikTok

TikTok 的 App Clip 让视频共享变得简略又有趣。当我在 iMessage 中收到朋友共享给我的视频，iMessage 会展现 App Clip 的预览。

【老司机精选】App Clip 新特性

点击预览即可展现卡片

【老司机精选】App Clip 新特性

接着就能够马上享受视频了。

【老司机精选】App Clip 新特性

Panera bread

Panera bread 是一家有着上千家连锁店的面包店。当我在地图中查找其中一家商铺，方位卡片将会展现 order food 按钮。能够在这儿翻开 App Clip。

【老司机精选】App Clip 新特性

几秒内，App Clip 就会发动并展现这家商铺的菜单。 我能够在这儿点单并运用 Apple Pay 付出。

【老司机精选】App Clip 新特性

在 iOS 15 当用户在 Spotlight 查找商铺，例如 Panera。App Clip 会在查找成果中展现。

【老司机精选】App Clip 新特性

借助设备智能化，当用户在 Panera 商铺邻近。设备会在 Siri suggest 小组件中向用户引荐 App Clip。

【老司机精选】App Clip 新特性

Tips:

装备 App Clip 相关的地理方位，只能在 iTunes Connect 上的 Advanced App Clip Experiences 中进行装备。根据笔者上一年的装备经历，苹果并没有敞开中国大陆的地理方位相关且地理方位只能从苹果供给的方位中进行挑选，精确度不高。因而运用地理方位相关会有一些局限性。 Advanced App Clip Experiences 应对较杂乱的唤醒状况，能够根据URL的不同、相关地点的不同来供给不相同的 App Clip card。 想了解更多关于 Advanced App Clip Experiences 的内容请参阅 Configuring Your App Clip’s Launch Experience

Honk

Honk 将 App Clip 用于非接触式付出车费。试想这样一种场景，当我出停车场付出车费的时分，我只需求在车上运用 iPhone 扫描贴在停车场上的二维码，即可引发 App Clip 并付出停车费。是不是很酷？

【老司机精选】App Clip 新特性

Primer AR Home Design

Primer AR Home 将 AR 与 App Clip 进行了结合。Primer AR Home 供给了一个协助用户在 AR 环境中体会墙纸和瓷砖的 App Clip。

【老司机精选】App Clip 新特性

当用户运用 iOS 设备贴近瓷砖上的 App Clip code，就能够在AR环境下体会这种瓷砖在房间中排列的姿态。是的，这张 App Clip code 集成了 NFC 功用。

【老司机精选】App Clip 新特性

App Clip code 是苹果为 App Clip 量身定做的一种专属二维码，有着共同的规划。App Clip code 不仅支撑传统二维码的功用，一起可内置 NFC。下文会介绍怎么运用命令行东西生成 App Clip code。

小结

自此咱们现已看见了各种优异的 App Clip。它们都有着共同的运用场景和唤醒方法，为咱们开发者在以后创立自己的 App Clip 时，供给了优异的思路。 根据笔者的理解，将 App Clip 大致分为两类

  • 一种是功用上是主 App 的子集，将 App 的亮眼功用运用 App Clip 的方法让用户先行进行体会。终究意图是将用户引流到主 App 中，例如上面共享的 Tiktok。
  • 另一种是功用上现已能够成为一个闭环，更像一个轻量级的 App。用户能够在 App Clip 内就能够完结本身的需求。例如上面共享的 Honk，用户能够在 App Clip 内就完结付出车费这一操作。 得益于 Apple 供给的登录和付出功用，开发者能够更好地给用户供给“总线”式服务。

接下来让咱们看看经过一年的开展，App Clip 有什么新玩意儿？本篇内参会包括三个主题：

  • App Clip Card 在 Safari 和 SafariViewController 中的全新展现作用。
  • 运用 local experiences 来更方便的在本地测验 App Clip。
  • 运用命令行东西生成自定义的 App Clip code。

接下来让咱们一起探究吧！

App Clip Card 在 Safari 和 SafariViewController 的全新展现作用

在上一年的 Session 中，咱们能够在网页中装备 meta tag 从而在 Safari 和 Safari View Controller 展现 Safari App Banner。

【老司机精选】App Clip 新特性

在 iOS 15 咱们能够在 meta tag 增加新的装备代码，从而能够展现全尺度的 App Clip card。卡片会在网页的中部弹出。用户能够直接在这儿敞开咱们的 App Clip。可是假如用户点击 “View in Safari”，Safari 会记录他们的挑选。再次翻开次网页就不会展现该卡片，而是会展现本来的 banner 款式。

【老司机精选】App Clip 新特性

集成方法

假如网页现已适配过 App Clip，那么运用卡片形式会很简略。在官网的源代码的 meta tag 中查找 apple-itunes-app 标签，并在其中增加 app-clip-display key，并将其值设为 card。 以下为完好参阅代码，在开发过程中需求将 app-clip-bundle-id 和 app-id 替换成自己项目对应的信息。

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

全新的生态形式

卡片形式并不仅仅展现款式的不同，而是一种全新的生态形式，能够在一个综合类运用内部去引发另一个运用的 App Clip。苹果给出了这样一个比方。 FoodGrid 是一个综合类运用来协助用户发现邻近的餐厅和饮品店，同国内的大众点评这类运用很类似。Fruta 冰沙是饮品中的一个品牌，并在 FoodGrid 中进行推广。

【老司机精选】App Clip 新特性

当用户点击这个品牌的时分，会引发 SafariViewController 来展现该冰沙品牌的官网。由于 Fruta 官网 在 iOS 14 就现已装备了 Smart App Banner，因而顾客在顶部的 banner 就能够引发 App Clip 进行下单等一系列操作。可是这一操作需求以下几个过程

  • 首要需求用户发现 Banner
  • 点击 Banner 上的 Open 按钮引发 App Clip card
  • 点击 App Clip card 的承认按键

以上是在 iOS 14 只集成了 Smart App Banner 的流程，能够看出过程较为繁琐。

因而在 iOS 15，全尺度 App Clip Card 是一种促进和提升用户发现特定 App Clip 的方法。更大的卡片让用户更容易地发现集成在第三方运用中的 App Clip。当在 Fruta 官网源代码的元标签增加 app-clip-display=card 后，重新在 FoodGrid 翻开 Fruta 冰沙的官网，就会注意到 Fruta 的 App Clip Card 马上在网页中展现出来了。

【老司机精选】App Clip 新特性

【老司机精选】App Clip 新特性

用户就能够直接在第三方运用内翻开 Fruta 的 App Clip，并享受甘旨的冰沙了。

【老司机精选】App Clip 新特性

我想现在各位应该知道怎么装备全尺度卡片形式了，而且也理解了这种款式所带来的优点。

更方便的本地体会

开发者能够在 App Store Connect 上创立 App Clip Card，还能够指定 App Clip 相关的方位。有了相关方位，就能够让 App Clip 展现在地图方位卡片、Siri 主张小组件、Spotlight 查找中。

【老司机精选】App Clip 新特性

想了解更多关于怎么自定义 App Clip Card，请参阅 WWDC20 相关 session 和上一年小专栏相关的内参。

Session – 10146 What’s new in App Store Connect Session – 10146 Configure and link your App Clips WWDC20 10174 – App Clips 探究之旅

本地体会装备

作为开发者，仅仅想体会下新技术，又不想真正的去上架一款运用。这个时分本地体会（local experience）就来了。 本地体会能够协助开发者运用自己的测验设备对 App Clip 进行一个先行的体会。有可能部分同学是第一次接触到 App Clip，我会从装备 App Clip 开始叙述。老司机能够直接略过这部分。

– 创立一个本地 App Clip

在 Xcode 中翻开要增加 App Clip extension 的主工程，并创立一个新的 target，能够在右上侧的输入框输入 App Clip 来查找到咱们需求的 target。

【老司机精选】App Clip 新特性

在主工程和 App Clip extension 的 Associated Domain 内增加要映射的链接，格局如下

appclips:yourDomain.com

【老司机精选】App Clip 新特性

【老司机精选】App Clip 新特性

在 App Clip extension 的 schema 中增加环境变量 _XCAppClipURL，value 就是上面映射的链接。

【老司机精选】App Clip 新特性

到这停止，本地装备就现已完结。将 App Clip Extension 运行在测验机上。接下来运用 在线二维码生成器 生成本地测验用的二维码，内容为上面装备的 https://wwdc21.com。运用控制中心的扫描器进行扫描，即可引发 App Clip Card，点击翻开即可进入 App Clip extension。

【老司机精选】App Clip 新特性

咱们发现，引发了 App Clip Card 是空白一片的。由于咱们并没有对 App Clip Card 进行任何装备。 在装备卡片前，让咱们先了解下什么是 App Clip Card.

关于 App Clip Card

关于普通用户，他们的 App Clip 体会源于 App Clip Card。卡片会展现 App Clip 的标题、副标题、介绍 App Clip 的品牌和风格的图像和操作按钮。

【老司机精选】App Clip 新特性
上面空白一片的 App Clip Card 无法在测验期间展现上线后的款式，也无法对细节进行微调。因而苹果供给了本地体会功用，协助开发者在本地开发期间对 App Clip Card 进行本地装备。

本地体会装备

翻开设置 >> 开发者 >> Local Experiences >> Register Local Experience，即可开始装备你的专属本地体会。

【老司机精选】App Clip 新特性

本地装备的 URL PREFIX 要与 App Clip Extension 的 associated domain 对应，BUNDLE ID 要与 App Clip Extension 的 bundle ID 对应。

【老司机精选】App Clip 新特性

再次运用设备扫描刚才生成的二维码，就会发现弹出的 App Clip Card 同装备一致了。

【老司机精选】App Clip 新特性

本地体会也是有局限性的，仅支撑以下几种唤醒方法。能够看出这几种唤醒方法都是同链接有关。

【老司机精选】App Clip 新特性

至于 Map、Spotlight search、Siri suggestion widget，这三种唤醒方法要对 Connect 上的 Advanced App Clip Experiences 进行装备后才可运用。

Advanced App Clip Experiences

App Clip 有两种体会方法 Default App Clip Experience 和 Advanced App Clip Experiences。 App Clip 经过 Safari App Banner 或许 iMessage app 中的符合domain 要求的 URL 下载和发动。这种方法称为 Default App Clip Experience。关于更杂乱的唤醒状况，能够根据 URL 的不同、地理方位的不同，来供给不相同的 App Clip Card。这部分需求在 App Store Connect 进行装备。这类发动方法被称为 Advanced App Clip Experiences。以下几种状况需求装备 Advanced App Clip Experiences

  • App Clip 支撑一切的唤醒方法，包括 Map、Spotlight search、App Clip Codes 等。
  • 需求将 App Clip 与一个物理方位进行绑定。
  • 需求在不同的域名或子域名上展现 Safari App Banner。

一些关于 App Clips 的笔记 Configuring Your App Clip’s Launch Experience

五光十色的 App Clip Code

App Clip Code 是专归于 App Clip 的二维码。App Clip Code 供给了让用户发现 App Clip 的最佳方法。共同的规划能够让用户马上识别出这是一个专归于 App Clip 的二维码，一起也供给了一种快速、安全的方法来敞开 App Clip。

【老司机精选】App Clip 新特性

每一个 App Clip Code 都会对与之绑定的仅有 URL 进行编码，iOS 在运用 App Clip Code 唤醒 App Clip 时，会对其绑定的 URL 进行解码。所以开发者无需对与 App Clip Code 绑定的链接做额外的编解码处理。

【老司机精选】App Clip 新特性

App Clip Code 的款式

苹果支撑两种功用款式的轻运用码，内置 NFC 功用的和仅支撑扫描的轻运用码。 内置 NFC 功用的 Code，中心运用了 iPhone 的 icon，引导用户将手机贴近 Code 来读取它的内容，或许是经过相机或控制中心的的二维码扫描器来扫描这类内置 NFC 的二维码。仅用于扫描的 Code，中心运用了相机的 icon，让用户知道能够运用相机和控制中心的二维码扫描器来扫描。

【老司机精选】App Clip 新特性

咱们能够看出来 App Clip Code 的特征是很鲜明的，与传统的二维码款式差别较大。好像微信小程序码相同，一眼就能够让用户知道这个二维码包括的内容源于哪里。

怎么创立一个 App Clip Code

在上一年的 session 中，苹果就说会推出命令行东西来协助开发者生成 App Clip Code。现在它来了。Apple 供给了两种方法来获取 App Clip code。

  • 假如 App Clip 现已在 App Store Connect 装备完结，那么能够直接在 App Store Connect 上进行下载。
  • 也能够运用 App Clip Code 生成器来生成 App Clip code。Apple 主张开发者在测验和开发 App Clip 过程中运用这一方法来生成 App Clip code。 接下来让咱们看看，假如运用这个 App Clip code 生成器。

运用 App Clip Code Generator tool

Mac 的终端东西默许是没有集成 App Clip Code 生成器的。首要要去 Apple Developer website 进行下载。

【老司机精选】App Clip 新特性

装置成功后，翻开咱们的终端，输入 AppClipCodeGenerator templates，就能够浏览一切可用的模板。

【老司机精选】App Clip 新特性

那么这些模板都长什么姿态呢？咱们能够运用该途径 /Library/Developer/AppClipCodeGenerator/SampleTemplates 预览一切模板的款式。

【老司机精选】App Clip 新特性

Template_ID_16 看起来不错，所以我预备运用这个模板来生成 WWDC20 内参小专栏的 App Clip Code。

【老司机精选】App Clip 新特性

在终端输入

AppClipCodeGenerator generate --type nfc --url https://xiaozhuanlan.com/wwdc20 --index 16 --output wwdc20.svg
  • –type 后的参数能够填写 cam 或许 nfc，来挑选生成只支撑扫描或内置 NFC 的 Code。区别是生成的 Code 中心的 Logo 是相机或 iPhone。默许为 cam。
  • –url 后的参数填写绑定到 Code 的链接。
  • –index 后的参数可填写 0 – 17 的数字，来挑选 Apple 已有的模板生成 Code。我这儿挑选的是 16 号的紫色模板。
  • –output 后的参数标明轻运用码的名字和格局。Apple 主张咱们运用 SVG 格局，SVG 是矢量图形，在扩大后仍会保持清晰。

只需一行命令，咱们的轻运用码就生成成功了，是不是十分简略？让咱们看看咱们生成的轻运用码吧。现在能够用 iPhone 扫描器来感受下这个轻运用码了。

更多轻运用码的自定义装备，请查阅苹果文档 Creating App Clip Codes with the App Clip Code Generator

Tips：

  • 运用控制中心的二维码扫描器对这个轻运用码进行扫描，会展现相关的动画。可是由于该 Code 没有相关上架的 App Clip，所以并不会触发完好的体会流程。
  • 轻运用码唤醒 App Clip 仅支撑 iOS 14.3 及以上设备。

App Clip Code 规划规范

除去根据 Apple 供给的模板生成 App Clip Code。规划师能够自定义 App Clip Code 的款式来满足特定的运用场景。

  • 能够挑选专属的前景色和背景色。
  • 能够躲藏 App Clip logo。可是苹果主张假如有满足的空间的话，尽量显现 App Clip logo。这会给用户一个清晰的信息，标明这个 Code 是归于 App Clip。
  • 增加简略清晰的指导案牍。保证信息简明扼要。

【老司机精选】App Clip 新特性

【老司机精选】App Clip 新特性

为了轻运用码的最佳浏览体会，要遵守以下的规划规范

  • 轻运用码应放置在平坦的外表上。 避免将 App Clip Code 印在曲面上或许可变形的资料上，比方衣服外表。
  • 轻运用码应该笔直放置。 保证不要旋转 App Clip Code 和中心的 logo。
  • 保证杰出的可见度。 用户很难去发现太小的 App Clip Code，请保证 Code 至少一英寸宽。保证 App Clip Code 没有被遮挡、损坏或与其它的 Code 靠的太近。

【老司机精选】App Clip 新特性

【老司机精选】App Clip 新特性

【老司机精选】App Clip 新特性

获取更多规划规范的信息，请参阅 Human Interface Guidelines。

总结

在本年的 session 中，咱们看见了来自世界各地优异的 App Clip。 咱们探讨了 App Clip card 在 Safari 和 SafariViewController 的全新展现作用。一起也演示了怎么运用本地体会来测验 App Clip card。 最终，介绍了 App Clip Code 和怎么运用终端东西进行生成。

本年 session 的标题虽然是 What's new in App Clips，可是大多的篇幅都是根据上一年 session 的延伸和补充。经过一年的开展，App Clip 的各项装备和环境都愈加的完善和成熟。 希望国内能够有有更多优异的 App Clip 的出现。

Have a great WWDC！

重视咱们

咱们是「老司机技术周报」，一个继续追求精品 iOS 内容的技术公众号。欢迎重视。

重视有礼，重视【老司机技术周报】，回复「2021」，领取 2017/2018/2019/2020 内参

支撑作者

在这儿给我们引荐一下 《WWDC21 内参》 这个专栏，一共有 102 篇关于 WWDC21 的内容，本文的内容也来历于此。假如对其余内容感兴趣，欢迎戳链接阅览更多 ~

WWDC 内参 系列是由老司机牵头组织的精品原创内容系列。 现已做了几年了，口碑一直不错。 主要是针对每年的 WWDC 的内容，做一次精选，并召唤一群一线互联网的 iOS 开发者，结合自己的实践开发经历、苹果文档和视频内容做二次创造。