AppClips介绍及使用流程

一.简介

在 2020 年 6 月 23 日的 WWDC 大会中,苹果预告了 App Clips 。

App Clip(官方翻译:轻 App;民间翻译:「苹果」小程序),是主 app 轻量级的版本,旨在在特定场景为用户提供快速便捷的体验。

如果你在上班路上经过一家咖啡店想购买一杯咖啡,但发现排队下单付款的人很多,此刻你只需要使用 iPhone 自带的扫码工具扫描咖啡商店的 App Clip 二维码或 NFC 标签,就可以购买一杯咖啡,无需下载安装咖啡商店的 app。
App Clip的启动需要由一个调用方调起,在iOS开发中,更专业点的术语叫invocation,invocation可以是多种形态的,例如通过点击基于位置信息的推荐Banner,点击Sari的推荐或者通过扫描二维码或NFC等。App Clip被invocation调起后,用户可以通过它完成一件专注的任务,当用户不再需要使用它时,它会自动的被iPhone移除,这个过程对用户来说是无感知的,因此App Clip也不会占用用户的桌面空间。

8350971-e9df5d600ec7760e.png

前面说过,App Clip的启动需要由invocation来触发,invocation包括如下5中场景:

通过NFC扫描来唤起
通过点击Sari提供的基于地理位置的推荐
在地图App上点击指定的链接
点击网页上的智能推荐横幅
通过Messages App分享的链接

20201203160053.jpg
20201203160107.jpg
20201203160123.jpg
20201203160315.jpg
20201203160330.jpg

如上图,当某个invocation触发了App Clip时,系统首先会检查invocation关联的URL,通过URL获取用来展示预览信息的数据,预览信息包括一个背景图案,描述标题与启动按钮,用户点击启动按钮后会打开App Clip。我们可以在App Clip启动时拿到传递进来的URL,通过URL的参数进行不同的逻辑处理。

了解了App Clips的启动过程,我们知道实际上在启动App Clip之前,系统会先弹出一个预览卡片,这个卡片上的信息可以由开发者在iTunes Connect上自行定义。

在着手开发App Clips之前,还有一些事情我们需要考虑。

A. 提供畅快的用户体验

App Clips不会像通常的App那样展示一个图标在主屏幕上,用户不需要对App Clips进行管理,不用下载也无需删除,当指定的App Clip一段时间不活跃后,系统会自动对它们进行清除。因此,官方建议,App Clips提供的功能应该是线性的,让用户一次性的完成任务。

B. App Clips需要足够小巧

App Clips应该足够的小巧,官方限定不可超过10M大小,只有足够小,在用户需要使用的时候才能以更短的时间加载与展示。

C. 检查可用的框架

在开发之前,首先要确认下App Clips可用的框架,大部分主App可用的框架在App Clips中都可以使用,但并不是所有,Assets Library, CallKit, CareKit, CloudKit, Contacts, Contacts UI, Core Motion, File Provider, File Provider UI, HealthKit, HomeKit, Media, Player, Messages, Message UI, PhotoKit, ResearchKit, SensorKit, Speech中是不被支持的,若使用了在编译时不会报错,而是在运行时报错或者返回错误的结果。

D. ?;び没б?/h5>

由于App Clips会以推荐或其他广告的方式触发,因此?;び没У囊椒浅V匾T贏pp Clips中,隐私?;せ嵋恢北黄粲茫缍院筇ǘㄎ蝗ㄏ薜纳昵?,当用户同意后,次日的凌晨4点,这个权限会被重新关闭,如果再次启用了App Clips,需要重新向用户申请。当然,还有一些权限在App Clips中是禁止获取的,其中有:运动和健身数据,音乐和多媒体文件,通讯录/信息/照片等文件。除了其宿主App意外,App Clips也不可以和其他应用共享数据。

App Clips 的消息推送

微信小程序不能通过 Push 的方式触达用户曾让开发者忧心忡忡。而手机厂商推出的系统级应用在这方便可以给开发者更多的底气,不管是苹果的 App Clips 还是国产手机生态的快应用,服务的消息推送能力都是吸引开发者的重要能力。

消息推送在 App Clip 的应用分两种场景:短时间内推送和长时间内的推送。(官方文档)

短时间内推送

用户在启动 App Clip 后,8 小时内可以收到消息推送。比如用户在 App Clip 购买了一杯咖啡后就退出了 App Clip,当咖啡准备好了,用户就会收到一个「咖啡已准备好」的推送。这方式只需要在 Info.plist 属性文件中添加 NSAppClip Key,并将 NSAppClipRequestEphemeralUserNotification 设置为 true,就能默认获取消息推送的权限。

长时间内推送

用户在 App Clip 完成一个任务后,可能过了几天才会收到推送。比如用户在 App Clip 租了辆车,租期为 3 天,到期后会用户收到「该还车了」的推送。这种方式和普通 app 的消息推送一样,都需要获取用户的推送授权。

二.实战开发

前面讲了很多开发App Clips的介绍,现在就让我们上手创建一个App Clip体验一下。创建App Clip非常简单,首先其需要一个宿主App,如果为已经存在的一个完全应用程序添加App Clip,就更加容易,我们只需要新建一个Target,选择App Clip即可,通过File->New->target,选择AppClip


截屏2020-12-03 上午9.39.57.png

,Xcode接下来会自动给我们创建号一系列必须的文件,并做好配置,这个时候我们可以直接选择Clip的target进行运行,只不过是一片空白。

前面说过,App Clip的运行需要invocation进行调用,对于invocation的调用,如果用户安装了完全的主App,则会唤起主App来处理用户任务,如果用户没有安装主App,则自动调起App Clip。无论通过哪种invocation来调起App Clip,我们都需要在App Clip的target中配置指定的域权限。在target工程的设置页面,找到Associated Domains选项,在其中添加要调起App Clip的域名,需要找到这样的格式:appclips:xxx.com。这种配置方式与Deep link的逻辑基本一致。

20201203095555.jpg

服务器配置,在系统弹出 app clip 或允许 app clip 调用之前,系统会验证 app clip 的配置和调用的URL。如果无法执行验证,则不会显示app clip,也不会启动。配置方法跟UniversalLink一样,在 server 的 App Site Association (通常是在网站 .well-known 下的 apple-app-site-association 文件) 中添加这个域名对应的 appclips 条目:新增一个键值对,key为appclips,value为一个对象 "apps": ["bundle id.Clip"]

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "37PVRFWV9E.com.aihuishou.OPTapp.P",
                "paths": [ "*"]
            },
            {
                "appID": "889ZY53ZAF.com.aihuishou.OPTapp.J",
                "paths": [ "*" ]
            }
        ]
    },
    "appclips": {
        "apps": [ "37PVRFWV9E.com.aihuishou.OPTapp.P.Clip" ]
    }
}

一个能够启动appClip的AppBanner形式如下:

<meta 
  name="apple-itunes-app" 
  content="app-id=myAppStoreID, app-clip-bundle-id=appClipBundleID
>

App clip card 显示时,你的 app clip 就已经开始下载了。App clip 的体积必须在 10MB 以内。这样,大概率在用户选择打开你的 app clip 之前,就能下载完成,以提供良好体验。

用户点击 banner 或者 iMessage 链接,且继续点击打开按钮后,app clip 的 user activity 关联的生命周期函数将被调用,swift中是

func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
        print(userActivity.webpageURL)
    }

上面webpageURL就是获取到调用的链接。也可以通过这个来区分不同的应用场景。

在开发时,可以通过设置 _XCAppClipURL 这个环境变量,并运行 app clip target 来“模拟”通过特定 URL 点击后的情况。当 Associated Domain 设置正确后,在 Xcode 中运行 app clip,就可以拿到包含这个环境值的 NSUserActivity。这样在 Beta 期间的本地开发就不需要依赖外部 server 环境了。
首先配置一下_XCAppClipURL:


20201203101704.jpg

特别说明一下,这个地址一般为了测试,是需要与你domain中设置的是一样的,但是我们真正使用的时候不可能只是一个固定的地址,后面是可以跟参数,因为调起链接的时候只会拿这个地址前缀部分,比如url是www.paijitang.com?orderNo=123456都是可以识别的。
如果在本地测试的话还需要配置一下 Launch Experience,即给 App Clip 配置一个 URL 和 App Clip Card 信息。在开发阶段可以直接配置 Local Experience 或者在 testflight 上进行配置。App Clip 准备发布时,需要在 app store connect 上进行配置。

1.首先将MyClip通过Xcode运行起来
2.打开手机【设置】-【开发者】-【Local Experience】-【Register Local Experience】
3.填入 URL PREFIX,打开任何以 URL PREFIX 为前缀的 URL,都会被当 做打开 App Clip 来处理。
填入 Clip Bundle Id。
填入 Title、Subtitle,选择一张图片,这些信息将会显示在 App Clip Card 上。


WechatIMG1.jpeg

特别说明,上面action有三个,Open,View,Play的区别就是打开卡片的时候,下面的按钮分别是打开,查看,打开游戏,可以自己体验一下。
4.用步骤3中的URL PREFIX生成一个二维码。
5.使用控制面板的二维码扫描器扫描,将会弹出APP Clip Card.不过前提是你的Clip已经配置好真机运行的证书文件,关于配置看下一步。

WechatIMG2.jpg

配置证书

你可以切换到MyClip的target下查看,它的bundle id其实就是它的宿主target的id后面加了一个.Clip。
1.首先创建一个Identifiers:


截屏2020-12-03 上午10.38.26.png
截屏2020-12-03 上午10.38.36.png
截屏2020-12-03 上午10.38.46.png

接下来就是正常的配置Identifies的流程。但是比较重要的一点是必须要把Associated Domains这个给勾选上,不然真机运行会报错。


截屏2020-12-03 上午10.43.03.jpg

上面配置完成之后,下面就需要创建对应的描述文件即Profiles文件,分别创建开发可发布证书。此过程不再详细描述。


20201203104724.jpg

之后回到项目里配置上相应证书文件就行了。

真机体验

1.运行MyClip
2.扫描上面的二维码
3.弹出卡片,点击打开进入。

WechatIMG3.jpg

这个时候可以查看我们上面那个func scene(_ scene: UIScene, continue userActivity: NSUserActivity)回调方法已经被调用了,这个就是为了平时测试使用。

发布App Clip

1.首先为MyClip配置一个icon,不然会上传失败。
2.以下几个位置需要与发布的target保持一致。


20201203111445.jpg

3.这个Display Name需要选一个跟项目名不一致的名字,比如你的项目名是中华龙,你用中华龙轻应用这个是不行的,提交appStore的时候会告诉你displayName or bundle Name已存在,所以需要起一个不一样的名字。多试几次就可以了。
4.当你提交版本成功之后,那就需要在你的App store connnct中配置一下你的轻应用,前提是你必须有一个包含轻应用的包提交通过。然后你就可以在下图中配置:


截屏2020-12-03 上午11.21.39.png

,你需要一张1800*1200的图片,然后配置一下副标题和选择一下操作,这里的操作跟上面提到的Action是一个道理。
5.配置高级体验。上面步骤4的配置完成之后,只能让你在Safi浏览器和信息中体验轻App.高级体验则可以通过轻 App 码(内嵌网址和 NFC 标签)、二维码以及“地图”中的地点卡片调用。相关配置可以通过点击编辑高级体验就可以设置,比较简单。
6.如果你的app使用了TestFligh,这个时候你就可以在手机testFligh App中查看刚才提交的版本,会有一个轻App按钮,点击进去就是你的轻App内容。这里就可以测试你的功能了。

WechatIMG4.jpeg

上面基本就是一个轻应用从测试到发布的基本流程。

代码部分

关于代码和资源的组织。很大机率 main app 和 app clip 是需要共用代码的,可以无脑地选择将源码放到 main app 和 app clip 两个 target 中,也可以选择打成 framework 或者 local Swift Package。不管如何,这部分共用的 binary 都会同时存在于 main app bundle 和 app clip bundle 中。图片等素材资源也类似。简单说,app clip 其实就是一个完整但尺寸有所限制、并且和某个域名绑定,因此不需要用户认证 Apple ID 就可以下载的 app。

部分 app clip 是“用完就走”的,但是也有部分 app clip 是为了导流到 main app??梢酝ü?SKOverlay 或 SKStoreProductViewController 来显示一个指向 main app 的推广窗:

方式一:启动的时候就显示
20201203162931.jpg

这个时候点击打开按钮会显示如下图所示


WechatIMG6.jpeg
方式二:代码里点击显示
20201203163922.jpg

123456放你的应用id,这个id可以在App Store Connect里面打开你的应用,然后看上面的网址中间有一串数字就是的,效果如下:

WechatIMG7.jpeg

另外,对于公用的代码部分,如果要区分主App和轻App,可以通过添加宏的形式解决,这个就不在此赘述。
好了,到这里基本一个轻App的创建到开发到发布的整个流程就很清晰了,可以实战应用了。

参考资料:
1.https://mp.weixin.qq.com/s?__biz=MzI2NTAxMzg2MA%3D%3D&idx=1&mid=2247484662&scene=21&sn=601cb10f17a9d4bb94fa4b911ed3586a#wechat_redirect
2.https://onevcat.com/2020/06/first-look-app-clips/
3.https://www.ifanr.com/minapp/1368393
4.https://developer.apple.com/documentation/app_clips/creating_an_app_clip_with_xcode

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容