3
头图

公众号名片
作者名片

前言

App Clip (Apple 官方称之为「轻应用」)是你已有 App 的一个轻量级版本,它拥有你 App 的部分功能,可以把它看做已有 App 的 lite 版本。

App Clip 体积非常小,压缩前包体积最大不超过 10 M,且无需经 App Store 下载,因此它能保证及时性,显示 App Clip 卡片的同时它几乎就已经安装在了设备上,响应迅速,如果你迫切希望用户访问某些功能也许 App Clip 能满足你的需求。

本文涉及到的名词含义约定如下:

App:App 指具有完整功能的应用程序,即上架 App Store 的那个应用程序。

App Clip:指本文要研究的轻应用。

阅读本文你将学到

  1. 什么是 App Clip?
  2. App Clip 能做什么?
  3. App Clip 不能做什么?
  4. 如何让用户发现你的 App Clip?
  5. 如何开发一个 App Clip?

可前往 GitHub 获取本文配套 Demo(https://github.com/yaoming88/...)

什么是 APP Clip?

App Clip 要注意的点很多,为了完整准确表述,同时避免挂出太多官方文档使读者精力分散,笔者翻译了部分官方文档,如你已经了解可跳过「什么是 APP Clip?」部分直接看编码部分。

App Clip 是用户快速访问和体验 App 功能的绝佳方式。App Clip 是 App 功能的一小部分,可以在需要时随取随用。App Clip 采用轻量级文件,运行速度快,方便用户快速地打开使用。不论是从餐厅叫外卖、租辆车还是首次设置新的联网电器,用户在几秒之间就能开始并完成对你 App 的体验。在他们体验过后,你可以提供从 App Store 下载完整 App 的机会。

App 的一部分

App Clip 是 App 的一小部分,因此你可以使用 iOS SDK,在与完整 App 相同的 Xcode 项目中进行开发。另外,由于 App Clip 很小,即便尚未安装到设备上,也能快速打开。准备好提交审核时,你可以将它作为完整 App 的一部分在 App Store Connect 中进行管理。

下载完整 App

App Clip 提供了快速展示 App 价值的机会。要让用户更轻松地获取完整 App,你可以适时在 App Clip 中显示下载选项。你甚至还能保留用户提供的任何信息,并且无缝转移到完整 App 中。

精简设计

App Clip 专注于快速完成一项任务。在理想的 App Clip 体验中,用户可以在几秒之间开始和完成某项任务。你可以通过以下方式进一步精简体验:

支持 Apple Pay

不要求用户提供信用卡信息,而选择通过 Apple Pay 完成收款。

与「通过 Apple 登录」配合使用

为了更加便捷地提供个性化体验,App Clip 可以使用「通过 Apple 登录」来登录你的 App 服务,不要求用户填写表单或设置新帐户。

在需要时随取随用

App Clip 体验的一个关键部分是发现途径:

App Clip 码

用户发现 App Clip 的最佳方式。App Clip 码外形美观而独特,用户一看见就知道有 App Clip 等着他们探索。每个 App Clip 码均编入一个 URL,还能加入 NFC 标签,用户可以用手机靠近读取,或是用摄像头扫描。

NFC 标签

用户只需将 iPhone 靠近你放置在特定位置的 NFC 标签,即使是在锁屏状态,也可启动 App Clip。

二维码

将二维码放置在特定的位置,让用户使用条形码读取器或「相机」App 扫描这个码来启动 App Clip。

Safari 浏览器 App 横幅广告

如果你的网页配置了适用于 App Clip 的智能 App 横幅广告,用户只需轻点该横幅,就能打开 App Clip。

「信息」中的链接

如果你在 App Clip 中启用了共享功能,用户可以通过 iMessage 信息发送链接,收到链接的人可以直接从「信息」中打开它。

「地图」中的地点信息卡

如果你的 App Clip 关联了特定的位置,你可以在「地图」的对应地点信息卡为其登记,以便用户能在相应位置看到并打开 App Clip。

最近使用的 App Clip

App Clip 不会杂乱地显示在主屏幕上,但用户可以在全新 App 资源库的「最近添加」类别中找到并启动 App Clip。

8 小时通知

App Clip 可以采用一种新的通知类型,在用户启动你的 App Clip 后 8 小时内面向用户显示。用户轻点一个通知,即可直接返回到你的 App Clip。

位置验证

Apple 推出了专门配合 App Clip 使用的位置验证 API,帮助你确认用户扫描的 App Clip 码、NFC 标签或二维码的实际位置与显示的位置是否相符,你只需验证一次即可。

多种 App Clip 体验

一些 App 提供多种体验,你可以对 App Clip 进行配置,以特别的方式支持每一种体验。例如,一个餐厅 App 可以支持多家餐厅。App Clip 支持通过单个 App Clip 为每家餐厅打造独特的体验。

完整 App 体验

如果用户已在设备上安装你的 App,App Clip 码和 App Clip 链接会打开这个 App,而非对应的 App Clip。你的 App 应处理这个链接,为用户提供与 App Clip 同样的体验。

App Clip 的限制

App Clip 是 App 的轻量级版本,在需要时随时随地提供其部分功能。它提供了一个重点突出的功能集,旨在立即启动,保护用户隐私并保护资源。因此,App Clip 有一些限制。在创建 App Clip 之前,请先查看 App Clip 可用的技术(https://developer.apple.com/d...)。

确保你要使用的框架能在 App Clip 上正常工作

App Clip 使用 SwiftUI 和 UIKit 开发,并可以访问与你的完整应用程序相同的框架。然而,以下框架在运行时提供的功能有限或无法提供功能:Assets LibraryBackground TasksCallKitCareKitCloudKitContactsContacts UICore MotionEventKitEventKit UIFile ProviderFile Provider UIHealthKitHomeKitMedia PlayerMessagesMessage UIPhotoKitResearchKitSensorKit, 和 Speech

保护用户隐私

App Clip 为保护用户隐私对一些权限进行了限制,防止用户跨应用程序和 App Clip 进行跟踪,例如:

App Clip 还附带有助于保护用户数据的限制。他们无法访问:

  • Apple Music 和媒体
  • 来自日历、通讯录、文件、健康、信息、提醒事项和照片等应用程序的数据
  • 运动和健身数据

此外,你不能在你的 App Clip 中使用 FaceID,因为 NSFaceIDUsageDescription 授权对 App Clip 不可用。但是,你可以使用本地身份验证框架来使用 Touch ID 对用户进行身份验证。

注意:

你的完整应用程序只能有一个 App Clip,完整应用程序必须支持 App Clip 的所有功能。

编码

相信阅读完以上内容,你应该对 App Clip 是什么能干什么十分清楚了,接下来一起看下 App Clip 的代码部分。

创建一个 Demo 工程

创建工程:

create-project

添加一个登录模块:

create-login-page

运行效果:

start

创建一个 App Clip target

App Clip 其实就是你原有工程里新增的一个 target

create-clip-step1

create-clip-step2

create-clip-step3

create-clip-step4

create-clip-step5

简直一模一样

project-folder-structure

简单写几句代码

code-snippet-page-main

code-snippet-clip-page-main

code-snippet-page-login

观察效果

主工程运行效果:

choose-scheme-billion-bottle

billion-bottle-start

App Clip 运行效果:

choose-scheme-clip

clip-start

我们看到登录页面没有经过任何修改被 App Clip 完美复用,实际场景会稍微复杂些,需要隐藏三方登录入口。

App Clip Target 基本配置

配置环境变量

在 App Clip 这个 Target 上添加环境变量 APPCLIP,用以区分共享代码所处的当前环境

config-environment-variables

根据环境变量做适配

共享代码根据环境变量 APPCLIP 做适配:

code-snippet-environment-variables

将 App Clip 与你的网站关联(Associated Domains

配置方面和支持 Universal Link 和 Web Credentials 相似,步骤如下:

  • 为 App 和 App Clip 的 target 添加 Associated Domain appclips:domain.com

config-associated-domain

  • 在 Server 的 App Site Association (通常是在网站 .well-known 下的 apple-app-site-association 文件) 中添加这个域名对应的 appclips 条目:
{
  ...
  "appclips": {
    // App Clip 的  Bundle Identifier
    "apps": ["ABCED12345.com.example.MyApp.Clip"]
  }
}

如果你正在使用 Universal Link 则只需下载该文件(domain/apple-app-site-association),并添加以上配置后让运维同学帮你放到 Server 的指定位置即可。

注意: 当用户为 App Clip 安装相应的 App 时,完整的 App 将替换 App Clip。从那一刻起,每次调用都会启动完整的应用程序,而不是 App Clip。因此,你必须将完整的应用程序与你的网站相关联。此外,完整的应用程序必须处理所有调用并提供与 App Clip 提供的相同功能。

分析你要用 App Clip 实现的业务

App Clip 的设计初衷是免安装,快速启动,所以包大小非常有限,请把有限的功能留给能快速吸引用户的功能或及时性的关键业务。

模块划分(App 与 App Clip 共享代码提取)

如果你没有分模块开发,则只需在共享源文件处勾选 Clip 这个 target 即可

config-reused-code-target-membership

如果你使用 CocoaPods 分模块开发则更简单,你只需在 Podfile 文件里 Clip 下依赖该模块即可。

config-reused-code-cocoapods

编写功能代码

获取 URL 携带的信息

与 Universal Link 一样,当 App Clip 被唤醒,App Clip 的 UserActivity 生命周期方法将被调用,基于你所使用的技术它将回调:

基于 SwiftUI:onContinueUserActivity(_:perform:))

基于 Scene:scene(_:willContinueUserActivityWithType:)

基于 App Delegate:application(_:continue:restorationHandler:)

获取到 NSUserActivity 后,就可以通过 webpageURL 获取唤起的 URL 了。

代码里区分是 APP 环境还是 App Clip 环境

参考上文「配置环境变量」和「根据环境变量做适配」。

开发阶段调试

在开发阶段,可以通过设置 _XCAppClipURL 这个环境变量,运行 App Clip 这个 target 来模拟通过特定 URL 唤起的情况。当 Associated Domain 设置正确后,在 Xcode 中运行 App Clip,就可以拿到包含这个环境值的 NSUserActivity。这样就可以模拟真实场景调试了。

debug-environment-variables

与原生 APP 开发几乎完全一样,需要注意的是唤起时如何获取 URL 携带的信息。

真机测试

开发测试阶段可以通过配置 Local Experiences(本地体验)来测试你的 App Clip。

真机配置 App Clip 体验

Setting -> Developer -> APP CLIPS TESTING -> Local Experiences -> Register Local Experiences -> 填写测试信息

create-local-experiences-step1

create-local-experiences-step2

create-local-experiences-step3

生成 App Clip Code

你可以使用 App Clip Code Generator 命令行工具或 App Store Connect 生成 App Clip Code

1、下载 App Clip Code Generator 并安装

2、执行以下命令生成 App Clip Code

AppClipCodeGenerator generate --url https://appclip.example.com --index 9 --output ~/Desktop/filename.svg

app-clip-code-generator

我们可以看到生成了一个 svg 文件,更多样式请 移步官方文档

app-clip-code

提示:

要使用 App Store Connect 创建 App Clip Code,你首先需要上传包含 App Clip 的 App 版本并创建高级 App Clip 体验。如果你尚未这样做 - 例如,在开发期间 - 请改用 App Clip Code Generator 命令行工具。

测试真机体验

以上设置完成后就可以真机体验你的 App Clip 了。

  • 摄像头扫描
  • 手机靠近 NFC 标签

数据迁移

当用户下载完 App 时,App Clip 数据会自动迁移到完整 APP。

发布

随主应用提交到 App Store Connect,并按引导正确配置 App Clip 体验即可。

总结

App Clip 开发属于 iOS 原生开发,可以使用 SwiftUI 和 UIKit,Swift 和 Objective-C,开发过程几乎跟原生开发完全一致,对 iOS 开发者来说学习成本很小。

在微信小程序盛行的当下 App Clip 在国内的发展前景还并不明朗,庆幸的是开发一个 App Clip 并不会占用你过多资源,要知道重点是代码复用

最后推荐大家一款 App Clip Shazam,体验方式:控制中心打开「音乐识别」,当周围有音乐播放时会弹出通知横幅,点击该通知横幅即可打开该 App Clip 并定位到识别到的歌曲,实用又有科技感。

参考

1[[app-clips]](https://developer.apple.com/a...)(https://developer.apple.com/a...)

更多精彩请关注我们的公众号「百瓶技术」,有不定期福利呦!


  1. 1

百瓶技术
127 声望18 粉丝

「百瓶」App 技术团队官方账号。