构建轻便快捷的轻 App

♪ ♪ 你好 欢迎收看 我是布莱恩高柏 App Clip团队的工程师 我等不及和各位分享 打造轻便快速的App Clip的 绝佳小窍门和技巧 我们开始吧 App Clip很棒 能让你的客户 快速访问并体验 你的应用程序能提供什么 App Clip是应用程序的一小部分 能在需要的那一刻 发掘并下载

App Clip高度集成至OS中 可以从Safari和Messages调用 也可以在真实世界中 通过扫描App Clip代码、QR码 或是点击NFC标签来调用 App Clip也会出现在 Maps和Siri建议中 本专题讲座充满许多最佳实践 还有疑难排解小窍门 能协助你为客户打造并交付 极佳的体验 我会展示如何规划才可以 让App Clip不要超过尺寸限制

也许你的App Clip 没有在你的网站上出现 或是App Clip卡片 没有在你扫描代码时出现

也许你想找些小窍门 让你能维护基本代码的质量 同时面对 采用新功能带来的额外复杂性

也许你好奇想知道 App Clip有什么你能用到的 特定独有功能 无论你是从零开始 或是要对既有应用程序 添加一个App Clip目标 我将一步步讲解开发者在真实世界中 每天都会遇到的问题 我会提供打造更好的 App Clip和应用程序 可执行的下一步 就算你的用户 身处移动网络讯号良好的地方 他们的下载速度可能不一

为确保App Clip能在短时间内 回应需求 App Clip的最大体量有限

因此 身为开发者 为体量优化你的内容非常重要 建议在初期还有开发过程中时常确认 你的clip是否够轻量 能够按需交付

有很多观众熟悉软件开发中 分析和优化的迭代过程

我想为各位示范一个进程 这个进程能用X代码生成尺寸报告 并为每个设备变量导出IPA

然后我会一步一步解说 降低App Clip的大小 一系列可以执行的基本和高级优化 我们的目标是避免 在提交应用程序时才惊讶发现 你的clip超过规定大小 我弄了一个有趣的例子供我们参考 它是Fruta样品的一个版本 有几个结果不如期望的构造 让它超过大小限制 为了说明一些关键点 这些问题构造很简单 你的应用程序绝对更复杂 有更多功能 所以请将我的例子 作为进一步探索的起始点 我们先启动Xcode 进行生成尺寸报告的步骤 并导出IPA文件 我们将探索这些结果不如期望的构造 并一起学习如何修好它们

首先选择完整应用程序方案

然后前往Product菜单并选择Archive

这样能用Scheme Editor指明的配置 来构建Project

Organizer开启后 点击分发应用程序 选择开发

现在选择你的App Clip

在App Thinning下拉列表中 选择所有兼容设备变量 记得勾选从位码重建

存档准备完成后 点击导出

然后在文件系统内 选择一个导出的目的地

现在从访达打开导出文件夹…

然后打开App Thinning尺寸报告.txt

每个设备变量都有个别的部分

每个部分的倒数第二行 会告诉我们 那个变量压缩前的大小 这就是我们想知道的 看着大小 它告诉我两件事 一 我超过大小限制了 二 我没有看到应用程序瘦身的效果 因为所有设备变量都差不多大

让我们关闭尺寸报告 并且深入探究 看看为什么这样

打开应用程序子文件夹 将其中一个变量IPA扩展名 改为.zip 并确认 双击以解压缩 打开负载文件夹 按Control并单击 以显示包裹内容

我们来仔细检视 看来我的图像是个别的Bundle资源 若我把这些放进一个资产目录 也许能省点空间

我看到一个文档zip 和一个README文件 它们不应该在可安装产品里

我的clip使用某个框架 那一定也占了些空间

我看到有些本地化文件夹 而我知道若不留意 有时这些文件会越来越大

编译的可执行文件相对地小… 但也许有个方法能让它更小 一点一滴都有帮助 我们继续 看看有什么方法可以解决这些问题 刚刚生成尺寸报告 并且检视IPA的过程十分有帮助 因为它找出了 要减少App Clip的大小 可以采取的几个步骤 我们先进行几个基本的步骤 然后再利用更高级的技巧 我们会再次检查构建设定 我们会复习使用资产目录的好处 我们会去除任何不应出现在 最终产品中的文件 还有我们会检视代码和设定 进行重构以让它变小 别忘了我们会提到的优化方式 应用程序和App Clip两者都适用 所以欢迎各位 将这些小窍门应用于这两种产品 现在我们来深入探索每个主题 App Clip包的已编译的代码部分 绝对不是对clip的体量贡献最大的 贡献最大的绝对是资产 我们待会解释 但一点一滴都有帮助 Xcode的默认模式 是以最小最快的优化设定构建 但我们再确认一次 确定我的项目是这个设定 记得确定整个应用程序 设定为活动方案 并按Option并单击 以显示方案设定 我们的存档构建应该设定为发布 但看起来我某次改了设定 忘了改回来 我之前也实验过不同的构建设定 将发布的优化水平 移离默认设定 我们把它改回成最佳组合 也就是小的二进制大小 和运行时快速执行 通常像我的例子一样 图像 音频和视频这类的资产最占空间 要降低这些资产 对App Clip大小的影响 可以采取的最重要步骤 是使用资产目录 这有两个原因 一 你添加至资产目录的媒体 会在Xcode构建进程中 自动优化 二 当客户下载应用程序或clip 他们下载的产品会够小 只包含适合他们的设备的资产 这也叫做应用程序瘦身 我们绝对应该好好善用

在我的项目里 我真的应该 把这些图像放在一个资产目录里 我们其实可以做更好 我会创建第二个资产目录 然后将所有应用程序 和App Clip共用的图像 移到这个目录

我们把两个目录并列摆放

我们把图标和颜色移到共享目录

然后我们把原料 和果昔图像移到共享目录

既然只有完整应用程序需要食谱图像 我会把这些放在未共享目录 让它不会计入App Clip的大小 我会记得移除 我已复制到资产库的图像

最后 我会用目标会员编辑器 让非共享资产目录 排除在App Clip之外 若要更深入了解资产目录 请观看《Optimizing Storage in Your App》 和《Optimizing App Assets》 的专题讲座

我们之前检视了文件系统上的IPA 看到了一些不该在那里的东西 例如README文件 和一个包含文档的zip 我们来用X代码里的目标会员编辑器 从所有构建产品排除这些文件 记得确认你的App Clip目标中 只包含执行任务的 必要代码

我认为在构建阶段中检视 获得每个贡献至App Clip的 源文件的综览 这样很有帮助 如果我看到某个看起来不需要的东西 我会将它从源清单移除并再次构建 Fruta的食谱和回馈功能 是完整应用程序的必要部分 但不是App Clip的必要部分 所以让我们移除这些文件 你甚至可以让编译器协助 如果有构建错误 可能文件是必要的 有更多需要移除 或是也许有代码需要 有条件地编译至App Clip目标外 随着时间过去 本地化字符串文件 可能充满重复文件 和未使用的字符串

检视字符串文件 并删除任何不需要的东西 和我们对资产目录做的类似 你可以创建专属的字符串文件 所以不会将 完整应用程序的本地化字符串 包括在App Clip里

我提到了一些基本的优化作法 你可以今天马上执行 让你的App Clip准备好提交

现在假设在这个迭代过程中 你再次测量并检视尺寸报告 大小还是没有达到标准 没关系 我有几个你可以考虑的 高级优化策略

第一 评估你的外部依赖关系 并考虑它们的大小 记住 App Clip是 应用程序的轻量版本 所以要确保你只链接 你的clip功能需要的东西 还记得让我的App Clip变大的 SmoothieAccountLogin框架吗？ 通常有已经集成至OS的 Apple框架 能帮助你达成目标

这些内置框架可以免费使用 它会让你的应用程序 和App Clip更轻量 更快速 代表它能更快下载 更快启动 让你的客户 更快完成手边的任务

用Sign in with Apple 让用户只须用Apple ID 就能轻松登录使用你的服务 至于支付 Apple Pay对于你这个开发者 或是你的客户 都快速又简单 对于网络上的沟通 用NSURLSession 对于3D图像 善用RealityKit和Metal 对于更深入的验证流程 请参考 ASWebAuthenticationSession 几乎总是资产而不是代码 让App Clip过大 通常这些资产是图像 在基本步骤中 我将所有图像移到资产目录 以善用内置优化 和应用程序瘦身 有时这样做不够 你需要采取进一步行动 减少图像的大小 在储存源图像时使用的格式和选项 常常对文件大小和质量有重大影响 所以要如何做出最佳抉择？ 一般来说 PNG图像 占的空间会比JPEG大 所以只在你需要PNG格式的 特定功能时再使用它 例如透明度…

或是当JPEG的有损压缩会导致 无法接受的质量下降 例子包含高频特色 鲜明边缘和清晰的高光 比起JPEG PNG的无损压缩 能将这些特色更好的保留

说到PNG 你可以考虑用PNG8 处理非照相型材料

右边的图像保存为PNG8格式 让文件大小大幅下降 导出图像时 比较两者 确定你的优化有效 降低色深可以节省很多空间 但只适合那些 不会量化失真的图像

至于照相型材料 需要节省空间时 可用JPEG 稍微依赖有损压缩 保存图像时 你不须接受 内容创建工具的默认设定 以我的例子来说 我大幅降低了文件大小 而没有可察觉的质量损失

让我向各位示范一个 也许能在你的项目用上的小窍门 这个窍门可确保你的图像质量 经过不同优化方式后仍然保持质量 我暂时用芒果取代了菠萝 芒果用较高压缩比保存 这让我能在实际应用程序中 快速进行A/B对比 确认我的变更不会导致质量损失

至于视频 用HEVC这种最新标准 进行编码

原则上 压缩音频时要用AAC 或MP3解码器 试试较低的比特率 通常不必要用超级高的比特率 比特率较低的clip 不会造成可察觉的质量下降 至于特定种类的图像 像是界面控制 标示和图标 以SVG格式表现可以大幅节省空间 而且因为它是向量格式 不管以什么大小呈现看起来都会很棒

说到SVG格式 我们超爱它 我们用它来做我很推荐的SF Symbols 共有超过2000个可配置符号 可选择 它们有各种粗细和比例 能自动和文字标签对齐 支持动态字体且立即可用

这是能让你开始 在项目内使用SF Symbols的代码 这个代码片段显示出类似的文字风格 可以如何应用至标签以及符号图像 基线约束让标签和符号图像 完美对齐 与其在你的资产目录 放一个图像的多个变体 你只需放一个基础图像 并在运行时构建需要的变体 看看Fruta 这是很棒的例子 显示如何实践这点 与其为每个橘子原料的演示 使用一个独立的图像 集合视图一个 有直行文字和控制的 完整图像视图又一个 原料卡片背面是第三个…

单单一个图像 是三个不同用途的支持资产 通过在运行时构建变体 结果能大幅节省空间 最后 如果你完成了所有其他步骤 但还是有让你的clip 超过大小限制的资产 可考虑从内容分发网络 延迟加载这些资产

例如App Clip中 用高质量 但分辨率较低的占位符资产 用新的Async图像API 在启动后逐步取代这些资产

若要了解更多 请看 《What's New in SwiftUI》讲座 还有一个小窍门 用网络链接调节器 在各种不同的带宽情境中 测试你的App Clip 确定没有让 客户完成手边的任务时有任何延迟 有了这些高级优化 我们来到第一个主题的尾声 你可以在降低应用程序大小的 开发者文档中 进一步探索并发掘更多技巧

假设你已将你的App Clip发布至生产 当你用Safari检视你的网站时 发现它看起来不如预期 或是也许你扫描了QR码 被导向Safari 而没有看到App Clip卡片

一般来说 这些问题 可分成几种 体验的注册 和关联域配置 我们快速复习一下术语 然后我会讲一些可以解决问题的步骤 在App Store Connect 你有能力 添加两种体验 所有App Clip都必须有一个默认体验 对于默认体验 你指定写入App Clip卡片的元数据 用于卡片从Safari中的网页调用 或当某人用Messages 传送你的网页链接 为了善加利用实体调用 像是QR码扫描、NFC 和App Clip代码 你一定要添加一个高级体验

记住 注册后需要一段时间 才会传送到设备 所以在App Store Connect中 作的变更不会马上可用 若想更深入了解如何注册体验 请参考专题讲座 《What's New in App Store Connect》 和《Configure and Link your App Clips》 显示浮出你的App Clip的UI前 OS会检查确认调用域 是否经验证和你的App Clip有关联 换句话说 这代表在Safari看到的URL 或编码在QR码里的URL 一定要通过授权和AASA文件 与你的应用程序和App Clip 有安全关联 若没有好好配置 你的clip不会浮现 若想进一步了解 如何建立这种安全关联 请参考《What's New in Universal Links》 还有《Configure and Link your App Clips》专题讲座

我们假设你已经配置了一切 你打开Safari 预期看到你的App Clip卡片 像这样以行内方式显示

但很遗憾地你只看到你的网页 没有其他东西出现 可能是什么问题？ 可以采取什么步骤进行故障排除？

首先 验证你的META标记的语法 确定它看起来类似这个模板 黄色占位符分别换成 完整应用程序的App Store ID 和App Clip的bundleID

我会展示一个我用的技巧 确保META标记正确构建 用Safari打开你的网页 并打开网页检查器 扩张head元素并仔细检查来源 然后检查节点属性 确保你的META标记正确被解析 还有确定你的App Clip bundleID 和在Xcode与App Store Connect中 显示的一模一样 转移或重定向 是否妨碍到域验证？ 对于域验证机械来说 example.com并不被视为 和www.example.com相同 这里最重要的一点是 提供内容的域 在重定向链尾端的域 应该是提供AASA文件的域 并包括在关联域的授权里

也要记得如果隐私浏览模式开启 Safari不会显示完整App Clip卡片 或是Smart App Banner 如果你还是遇到问题 在ASC portal 确定AASA通过验证

你可以用命令行工具SWCutil 在预期的位置 从你的网站取回AASA文件 这很类似App Store Connect 进行的操作 你可以利用这个确保没有任何 让App Store Connect 无法取回文件的东西 检查JSON输出有没有常见错误 例如指明bundleID 而不是applicationID

若想了解更多 请参考 《What's New in App Store Connect》 还有《What's New in Universal Links》专题讲座 现在来谈实体调用 像是App Clip代码 QR码和NFC标签 这是预期的体验

如果没有完整配置 你的网页 会以Safari开启 而不是让你的客户 在Camera中看到App Clip卡片

很多情况下会发生这种事的原因是 编码至你的实体代码的URL 并未创建高级体验 就算你的QR码URL 和你的网站URL相同 而且你的体验能在Safari完美显示 还是必须在App Store Connect 创建一个高级体验 以驱动你的实体代码 记得我们对Safari调用 进行故障排除时的幻灯片吗？ 对于网站流量 在域验证前 所有重定向都会跟随 我想提醒各位注意 实体代码的域验证处理方式 有个微妙但重要的差异 假设你一直在QR码URL中 使用一个唯一的域 并且将它转移到你的网站 以提供跨平台的一致性 你已经为直接通过网络进入的客户 从那个域提供AASA文件 现在微妙差异来了 对于代码扫描 必须将 精确的域添加到App Clip的授权 并也从这个域提供AASA文件 背后的原因是为了 向扫描实体代码的用户 提供快速的反馈 我们避免执行 通常会导致追随重定向链的网络请求 对于高级体验或网站关联做出的改变 需要时间传送到设备

如果你已确定你扫描的URL 已经添加为高级体验 但你仍然看不到App Clip卡片 试试清除 开发者设定中的体验缓存 进入下一个主题 你在项目中添加了一些额外的复杂性 好的方面是 你现在有更现代且跟随平台的体验 我想向各位介绍一些步骤 让你可以拥抱额外的功能 同时维持 你之前那么努力达成的质量水平

我们来看看图表 它显示一个餐厅应用程序的功能 这个例子里 客户一开始 先浏览餐厅的菜单 接下来 他们可以定制化汉堡 或是鸡尾酒 然后结账 在那之后 他们看到订单状态 还有领取订单的选项

现在假设餐厅想要通过添加两个功能 加强体验 一个是用QR码桌边付款 另一个是将你定制的汉堡 以链接形式传给朋友 让他们也可以订一个

这需要大幅重新设计 因为这两个功能都依赖 一启动便直接跳至结账步骤 这些餐厅要求的功能 是用App Clip的大好机会 但若硬把它塞进现有的设计 会造成很多额外的复杂性 可以采取什么步骤 让应用程序更灵活？

首先 我想鼓励各位创建 扁平的模块式功能 让应用程序的每一个组件 都是独立的并且直接启动 这个方法更加适合深度链接 而深度链接是App Clip 调用和提供状态的根本 将结账模块设计为直接调用 例如通过提供 菜单品项的清单 这可以编码到URL中 通过将订单表示为 嵌入至视觉代码的URL 你让你的客户 能够在桌边进行付款 一旦食物品项能被编码至URL里 你可以用这个范例鼓励客户 将他们的订购内容和朋友分享 让他们也可以购买相同的东西

只需很少的运营费用 你就能够采用App Clip 并提升触及 通过将这个功能按需提供给 还没下载你的应用程序的客户 我展示了几个方式 让各位能用不同的角度思考 你的应用程序的设计 以解锁额外功能 同时将运营费用维持最低 现在我们来看看 如何将提供App Clip时涉及的 某些样板代码降到最少 你的应用程序的代码中 你很有可能响应 生命周期活动 通常这些方法 会在应用程序启动 或在背景中重新开始时调用

采用App Clip会添加另一组 一模一样的生命周期法 你可能想要 在App Clip的生命周期法中放代码 以从用户活动提取URL 并用提取的URL 导出一些状态并显示一些UI

概念没问题 但在这样做之前 我建议重构 让处理应用程序和App Clip 启动的代码是共享的 这能去除试图在分开的启动路径中 维持类似功能会遇到的 一堆臭虫和麻烦事 在App Clip和完整应用程序之间

考虑创造一个方法 像是respondTo 接受用户活动作为参数 通过直接从所有相关生命周期法调用 将这个方法作为 应用程序和clip的主要入口点

这样你执行的代码 是应用程序和clip共同的代码 这能大幅降低运营费用 也许你响应用户活动的方式 是通过从URL 提取餐厅菜单品项 让客户能在桌边付款 既然这都是共享的代码 你可以只更改一次 就能在应用程序和App Clip中 都享受好处 在项目中采用现代功能 同时维持质量的讨论 一定要提到测试 我想提醒各位 两个App Clip的特殊技巧

对于迭代开发 用X代码构建和运行时 将_XCAppClipURL环境变量 设定为你选择的调用URL 你的clip运行时 你在这里设定的URL 会被传到你的clip 就像在客户的设备上那样

若要看到你的开发中clip在OS出现 和生产设备类似 前往开发者设定 并创建一个本地体验

各位真的需要在提交clip前试试这个 才能更知道你的客户 会如何在他们的设备上 使用你的App Clip 不然你会错过 测试clip多种调用方式的大好机会 像是用Camera扫描代码 这也是新功能在生产中可用前 在种子构建中测试新功能的好方法 例如Safari中的新App Clip卡片体验

我只稍微介绍了 本地体验用来测试App Clip有多棒 要了解更多 请看今年的 《What's New in App Clip》讲座 还有若想看测试App Clip的详细介绍 请看开发者文档 标题为《Testing your App Clip's Launch Experience》 最后 有一些App Clip独有的功能 所有开发者都应该善加利用

我们推出App Clip时 也推出了两个专属App Clip的 简化权限项目 这两个项目是短时通知 和位置确认 你能够提供预授权功能 让你的客户 可以直接在App Clip卡片 利用这个功能 短时通知 让你在App Clip最后启动后 24小时内可以发送通知 而位置确认能协助你确认 客户身处你预期的地区而不须询问 或是需要知道他们的精确位置 这能避免用户不小心 在错的加油站付款 或是在错的小镇上的Fruta门店 点一杯果昔

身为开发者 你能在Info.plist 选择开启这些功能 现在你的App Clip能够访问 这些独特的权限 而不须在你的体验启动时 让要求比你需要的更多的提示 中断体验

位置确认仅适用于 实体调用 像是NFC标签、App Clip代码或QR码 客户可以为当前会话或是所有请求 选择关闭位置确认功能

请一定要妥善处理这些状态 用confirmAcquired检视错误 并向客户提供有帮助的引导 告诉他们发生什么事 也许提供别的选项 让他们在更适合的条件下继续交易 关于X代码中的描述文件和签名 想快速提一件事 有很多观众启用了 项目设定里签名和功能部分的 自动管理签名 这点很棒

如果你手动管理签名 记得要取得最近的描述文件 一个立即好处是当你的客户 从你的App Clip升级到完整应用程序 他们的数据会迁移更快 这是我们一直不断开发 为各位提供的好处之一 拥有最近的描述文件 能确保你的应用程序 和clip拥有必要能力 能够利用这些改进

你现在学到了一些很棒的技巧 能够构建轻快的App Clip 收尾的时候到了 我谈了基础和高级技巧 能让你的clip够小 可以极快速按需交付 我向各位展示如何确保 你的App Clip 是在你预期的地方以预期方式调用 我展示了一些最佳实践 让你的项目 准备好深度链接 可采用App Clip和通用链接 然后我谈了 App Clip独有且精简的功能 希望各位能今天就启动X代码 并利用其中一些小窍门 让你的应用程序clip更轻量 更快速 请记得观看我的同事永俊 今年的专题讲座 What's New in App Clip 谢谢大家 祝大家有美好的WWDC [欢快的音乐]