1、开发者需要知道的前提条件

1、必须要有对应的app(clip应该只是app的一个附属产品);//这与微信小程序不同

2、必须是iOS14系统;

3、可以用 Swift 或 Objective-C 语言;

 

2、开发过程中需要注意的点

1、这是一个独立的程序,并不依赖于具体app,专门用于app clips所必需的功能;

2、和app一起提交审查就可以,两者不能分别提交审查;

3、两者是单独下载的(不是捆绑),而且在设备上是互斥的(想用app clips就别安装完整版app,只要有完整版app存在,就不会打开app clips,不论是扫码还是NFC碰一碰都会自动跳转到app);//这点很重要

4、要求迅速下载和快速打开,要求app clips大小不超过10MB。那些资源文件例如图片,只应该含有用户需要的,不需要的就不要放进assets里面;//这点很重要

5、App中涉及用户体验必须用到的代码模块才放入app clips中,其他不必要的就丢弃;

6、一些顶级导航(标签栏)可以省略,URL直达你想要的功能,也就是说不要通过点击点击再点击的方式进入你想要的页面,利用单独的URL直达;

7、一次只做一件事,简单高效;

 

3、如何创建app clips?

1、直接在已有app工程中创建app clips(new targets),直接就能运行成功,老样子“hello world”。

2、接下来添加依赖(add dependency)asset catalog啥的,这个里面是app和app clips共享的asset

3、add asset catalog,勾选上app clips 的 target membership

4、从app 的 asset里面把clips需要的(例如app icon)拖进新的asset里面

5、把clips需要的那部分代码,勾选上clips的target membership

6、build settings 里面找到swift compiler-custom flags->active compilation conditions,debug和release添加APPCLIP(这是为了在代码设置不同的运行环境)

7、会报错因为一些代码没有勾选上clips的target membership。这么解释吧,A的代码引用了B,但是A勾选上clips的target membership,B没有,因此A中引用B头文件的地方需要加入以下代码:

#if !APPCLIP

//code

#endif

8、到clip文件夹下面的代码里面加一点模型定义、引用的代码,还有视图

9、运行

 

4、app和app clips

1、都是UIKit / SwiftUI app生态圈;

2、激活之后都可以设置NSUserActivity(我们可以使用activity对象捕获用户正在操作的信息,比如:查看APP内容、编辑文本、查看网页、看video等。当系统启动我们的APP之后,activity对象是可以获取的,APP能够使用activity对象的信息恢复activity对象到合理的状态。Spotlight也可以使用activity对象来为用户提高搜索结果)

3、随时随地调用iOS sdk

4、定位

5、共享数据

5、但是,app clips

1、不能访问用户隐私数据(例如health和fitness);//这点很重要

2、一段时间不用app clips后,本地存储的数据会被删除(app clips、缓存、保存的密码),clips的数据应该被看作是临时数据,因为会被删除。如果经常使用这个clips,那他就不会被删除,iOS系统会自动判定为常用clips。iOS不会备份app clips(也就是说在其他设备登录账号,并不会同步clips);//这点很重要

3、只能由用户自己启动clips,或者响应clips的URL。不能注册自定义的链接、文档类型和URL方案。(如果联合登陆服务回调需要自定义的URL,应当使用ASWebAuthenticationSession,就不用注册回调的自定义URL)clips不能包含捆绑的扩展程序(我的理解是点击某些按钮跳转到其他程序的意思);

4、如果用户想要安装完整版的app,那么clips和保存的数据都会被删除,但是相关信息在删除前会被迁移到app上。(需要把想要迁移的数据放进共享数据容器shared data container中,而不是clips标准容器,标准容器会被删除,但共享容器在迁移未完成时不会被删除)而且摄像机、麦克风和蓝牙的授权也会被迁移(完整app会自动打开这三个权限);

5、需要支持Apple Pay和Apple登录;//这点很重要

 

6、技术点

Apple Pay、通知(notification)、swiftUI、skoverlay(引导用户下载完整app)、AuthenticationServices中的ASAuthorizationController(Apple账号注册和登录)

 

7、总结

App clips是基于用户需求的程序;

采用的技术也都和之前的无异,没有什么学习成本;

简化的功能,一次专注于一个任务;

 

这里面的内容都是涉及如何启动、打开clips的。

1、一个使用clips的场景

进店->看到NFC标志并碰一碰->手机弹出该店的clips弹窗(卡片)->点击进入clips->下单并付款(Apple pay)

NFC唤醒clips卡片,点击open进入clips页面。这两步属于links。

(1)NFC标志就是编码后的URL,必须注册;

(2)点击open,也是打开启动URL(通过NSUserActivity获取到的URL地址)

 

2、调用方式

(1)使用苹果自带相机应用扫码App Clips二维码,

(2)使用iPhone触碰特定的NFC标签。

(3)在苹果自带浏览器Safari中访问特定网站的Smart App Banner。(很多网站都有这种设计,只不过之前都是跳转到app,现在换成了clips)

(4)在iMessage中主动分享、打开他人分享的APP Clips。

(5)在苹果自带地图中唤起使用。(某家店铺在地图中的详情页有clips的入口)

(6)在手机中查看最近用过的App Clips。

(7)Siri会提示附近有clips(nearby suggestions)

不管什么调用方式,最后都是展示clip的卡片,然后从卡片进入具体页面

iOS app clip制作_Apple

 

3、做什么准备

  • 配置网络服务器和clip,为了处理链接的问题
  • 服务器上:更新apple-app-site-association文件(增加app clip的apps key)
  • Clip上:增加关联域权利(Xcode中associated domians增加网站域名);处理NSUserActivity(其中的属性webpageURL提供跳转到clips的URL,具体代码看示例,在主函数里面添加)


           ⚠️如果安装了相应app,就不会打开clip,确保app也有相似的代码处理普通的URL//这点很重要

           配置测试的URL:(前缀注册过的URL,看clips能否打开指定页面)

           Product->schema->edit schema,在run模式下新增环境变量“_XCAppClipURL”,value就是对应的clip URL。

     

iOS app clip制作_Apple_02

          

  • 在Apple store connect上面配置clip弹出卡片的一些信息

           主标题:18字符

           副标题:43字符

           图片:3000*2000像素,高宽比3:2,png / jpg ,不透明

           可以只进行第一步配置哦!

        (1)第一步(网页banner、iMessage分享气泡配置)

           副标题、图片、动作(如何进入,例如open)。

           这些信息在网页banner、iMessage分享气泡当中都是公用的。这两种方式打开的卡片也是使用这里配置的信息(默认显示这些信息)

        (2)第二步

           其余的配置需要在“advanced  app clip experience”中配置(例如NFC、二维码)

           配置URL。一个clip可以配置多条URL

           配置bundle id

        (3)第三步(这里配置的信息就是非默认显示的,会显示在卡片、地图这些场景中)

           图片、主标题、副标题,选择行为

           ⚠️对于同一个店家的不同clip来说,不用给每个clip都注册一遍URL,前缀是相同的,注册一遍前缀就行。

           但是哪怕注册的URL只用作前缀,这个地址也必须是能够被处理的,不能打不开这个注册的URL。(此时图片标题这些信息都是单独配置的,只是URL前缀注册一遍就行)

           ⚠️对于同一个clip来说,也只需要注册一个URL作为前缀就行。后续的URL参数或者地址不用单独注册,这样就能打开特定的clip页面(卡片上图片、标题这类信息都是相同的)

            例如: https://bike/rent?id=2       https://cafe/store/beijing        //蓝色代表前缀         

           如果确实有某个URL很特殊(特殊的图片和标题啥的),那就需要单独注册以便和其他的地址区分开。

 

  • 在Safari网页上面需要配置clip的banner(网页上打开clip的入口)iOS14才支持

           这个smart app banner就是网页上方弹出的能打开app / clip的一个链接,不是新东西。

           在html的代码里面加一行meta就行,配置名字(app-tunes-app),内容(app-clip-bundle-id,app-id)。加入app-id是为了让iOS14之前的用户点击banner后能够被引导去apple store下载完整版app。

          

iOS app clip制作_iOS app clip制作_03

           点击banner的open之后,还是打开clip的卡片

           ⚠️如果URL没有注册过(只完成过第一步),就会显示默认的卡片样式(Apple自己根据app信息生成的);如果注册了(完成了advanced  app clip experience),就会显示我们自己在上一步中定义的那些内容

 

4、app clips on TestFlight

把app和clip提交给Apple store connect之后,要在TestFlight里面新建一个关于clip的部分,为clip增加测试调用点,方便测试通过配置不同URL打开不同页面。

点击add app clip invocation->设置标题、URL等 

 

三、简化你的App Clips    https://developer.apple.com/wwdc20/10120

1、最佳实践

(1)专注必备的任务;

(2)使你的app clip立即可用;

(3)让用户完成了任务后再询问是否登陆;

(4)只请求我们需要的权限;

(5)在app上也提供同样简洁的体验;

 

⚠️app和对应的clip要有同样的app icon和名字,保持用户体验的一致性

(参考:如何设计最佳app clips)

 

关于身份认证:

(1)使用Apple登录是获得用户帐户的最佳方法;

(2)可以使用ASWebAuthenticationSession 来支持第三方登录;

(3)对于已经在app中拥有帐户的用户,还应该在clip中提供用户名/密码登录功能;

(4)如果用户使用密码登录到App Clip,请考虑在用户安装app时提供Apple升级登录功能;(我的理解是直接利用app clip的账号密码登录app)

 

关于隐私:

一些敏感的用户数据不允许访问,因为他们不是必须的;如果想要获得这些敏感数据,应该鼓励用户去下载完整版app体验功能。

App clip可以获取摄像机、麦克风和蓝牙权限;如果后面安装了app,就不会再次请求授权了,app自动获取这三个权限。(App clip是可以请求定位、通知权限的。)

 

2、简化交易

(1)不需要完整的定位功能,只需要用户当前位置与店面位置比对,告诉用户是否为正确的店面地址就可以了(yes/no)(这种定位是一次性的)(info plist: NSAppClipRequest LocationConfirmation Boolean;这么设置完了就不会再有提示授权的弹窗了)启动App Clip时,从NSUserActivity获取payload,然后使用坐标和半径(最大500米)准备应获取代码的区域

iOS app clip制作_App_04

iOS app clip制作_ios_05

(2)Apple pay很方便,不用再输入信用卡号

(3)通知需要请求权限,每次允许后,可以获得8个小时的通知权限许可。如果用户在clip card中授予了权限,打开clip程序时,就不会再次提示请求权限,直接可以发送通知。在clip运行期间,随时都可以请求常规权限(info plist:NSAppClipRequestEphemeralUserNotification Boolean;这么设置以及写点位置相关的代码就不会再有提示授权的弹窗了)

iOS app clip制作_Apple_06

iOS app clip制作_iOS app clip制作_07

(4)推荐使用Apple登录。如果已有app的账号密码,可以用AuthenticationServices API简化登录,甚至不需要登录页面。简化后:启动clip(nfc)->下单->支付->登录

定位和通知可以简化掉。

 

3、将用户转化到app上

(1)打开clip后,屏幕上方会显示几秒钟的banner(name, icon, link),点击跳转Apple store引导下载完整版app;

(2)app clip的设置面板中也可以有app下载引导栏(StoreKit SKOverlay)。建议在用户完成了购买流程后再进行提示(例如放在用户付款确认页旁边)

(3)利用secure app group可以把数据传输到app上(在clip被删除后传输)。而且若已经在clip登录,利用app group还可以在用户安装app后自动登录。

iOS app clip制作_iOS app clip制作_08

iOS app clip制作_iOS app clip制作_09

iOS app clip制作_iOS app clip制作_10

 

四、设计最佳app clips(设计团队可以看看)  https://developer.apple.com/wwdc20/10172

 1、什么是app clips?

       参考上面,不再赘述

2、探索app clips

      参考上面,不再赘述

3、设计app clips

(1)意图:到底是要干嘛;

(2)最小化流:简化简化再简化,只留下必备的组建和资源;(建议使用Apple登录和Apple pay)

(3)一定要有完整版app:在clip中描述完整版app能提供哪些额外的功能;

   一些使用场景:饮品店、停车缴费、网上购物、餐饮点单、AR场景识别(拍照片识别地点,还能iMessage分享给好友)

   一些可省略的界面:导航栏、标签栏、登录页面、介绍页面、设置页面。

 

五、为其他企业创建App Clips    https://developer.apple.com/wwdc20/10118

1、介绍

(1)企业什么时候该考虑开发clip?

         将许多业务聚合到一个面向客户的app中。不用下载app就能体验到一些app中的功能;

         为其他企业的现有客户提供附加价值;

         计划将多个空白标签的模板app合并为一个app(这些app都很相似,创建一个app,生成多个clip);

(2)为什么要创建app clips?

          利用现有app代码创建clip,方便快捷

 

2、开始创建

(1)准备好现有app

         确保app能够解决每一项要推广的业务;

         提供适合每种业务的自定义体验;

         提供浏览,搜索或浏览目录的能力;

         处理通用链接(Universal links,能够方便的通过传统的HTTP/HTTPS链接来启动App,使用相同的网址打开网站和 App);

 

(2)基于app创建一个clip

          选择性的勾选代码、资源集已经依赖;

          设置关联域,处理NSUserActivity;

          通过短暂通知和定位确认来简化交易;

 

(3)通过通知里的路由打开对应的clip

          可以从通知当中启动clip(通过targetContentIdentifier来区分到底打开哪个clip,根据注册的前缀来区分);

 

(4)启动一个clip

          每次调用clip都要用到NSUserActivity;

          如果网址对应于同一会话,则不要推送或弹出;(如果你正在用这个clip,不要响应对该clip新的调用,因为你响应了又会重新打开这个clip,之前的一些订单信息什么的就清除了。只有在没有打开这个clip的前提下,才响应他的调用);

          跳转到其他clip时(打开一个其他的clip),保存当前clip的状态(因为clip不支持后台多任务,一次只能打开一个clip,保存状态的话以便于后面再次打开时恢复到之前的状态);

 

(5)把app连带clip提交审核

          Xcode自动把clip嵌入到app中;

          每次提交审核时,把这两个部分当作一个任务提交即可(Xcode或Transporter)

 

(6)为每一个业务都创建高级app clip 体验(个性化,在Apple store connect里面设置)

 

(7)在Apple store connect中为每个业务创建一个clip

          配置Advanced app clip experience;

          每个clip注册一个不同的URL;

          为每个clip选择推广不同的业务;

          提交Apple审核;

 

3、App Clip card

Apple store connect中需要配置的有:

主图片(png/jpg)、标题、副标题、定位相关、行为(open、view、play)

iOS app clip制作_wwdc_11

iOS app clip制作_wwdc_12

iOS app clip制作_App_13

iOS app clip制作_ios_14

iOS app clip制作_App_15

4、icons的类型

在哪出现以及如何定制icons

尽量和app icon保持一致;若有多个clip,尽量在icons上体现业务类型;

上传到Maps Connect来个性化定制icons,不上传的话,iOS就自动根据clip类型分配icons