轻 App 中的新功能

嗨 欢迎来到WWDC 我是永俊 我是App Clip团队的工程师 另外还有我的同事陆铭 他将聊聊App Clip的新功能 App Clip是应用程序的 一小部分 它会在需要的那一刻启动 它能为特定的任务 提供快速且专注的体验 用户可以在完成任务后 轻易升级至你的应用程序 自从推出App Clip后 我们看到世界各地许多开发者 开发出很棒的App Clip 它们设计良好 容易被发现 有很多吸引用户的好方式 让我分享一些例子 Firigames广受欢迎的游戏 Phoenix 2 有一个App Clip 我可以开Safari浏览器 造访他们的网站 点击横幅 它会显示这个游戏的 App Clip卡片 我可以从这边启动游戏 短短几秒内就可以开始游戏 玩完第一关后 我可以从App Clip 直接下载完整的游戏 TikTok有个App Clip 让分享视频好玩又容易 我收到朋友传来的视频时 iMessage会显示 TikTok App Clip预览 点击预览 卡片就会出现 我可以从那里打开 TikTok App Clip 马上观看视频 Panera Bread是美国的食品公司 拥有数千间门店 如果我在Maps中查看其中一间店 位置卡片会显示 “订购食物”的行动按钮 我可以从那里 直接打开他们的App Clip App Clip在短短几秒内启动 显示这一间特定门店的菜单 我可以订购 并用Apple Pay付款 在iOS 15中 如果我用聚焦搜寻某个企业 像Panera 搜索结果中 也会出现它的App Clip 有了设备内置智能 如果我附近有Panera门店 我的手机可通过Siri建议小组件 建议App Clip给我 点击建议就能打开它 马上订购食物 Honk开发了App Clip 用于停车的非接支付 我只需要扫描 停车场附的QR码 只要单击就能打开App Clip 并用Apple Pay付款 Primer AR Home Design有个App Clip 能让你在AR环境中油漆 贴磁砖、贴壁纸 我可以扫描或点击 某块磁砖上的App Clip代码 打开App Clip 然后就可以体验这个美丽的磁砖 在我的客厅里看起来会是什么样子 这些是很棒的App Clip例子 还有好多好多其他的 你可以在Safari浏览器 和Messages里找到 或是在真实世界中通过QR码 NFC或App Clip代码找到 我鼓励各位尝试看看 App Clip能做什么 这个专题讲座中我们会谈三个主题 一 Safari浏览器和 SafariViewController里的App Clip卡片 接着我们会谈 用本地体验测试App Clip 最后会介绍App Clip代码

看看探索App Clip的新方式 你的网站可以用META标记 apple-itunes-app 在Safari浏览器 或SafariViewController中 显示Smart App Banner iOS 15中 你可以配置META标记 以在网页正中央 显示完整的App Clip卡片 用户可以从那里 打开你的App Clip 若用户选择“在Safari中查看” Safari会记住这个选择 下一次载入页面时不会再显示卡片 它会恢复成原始的横幅 若要选择开启卡片模式 你只需要将 app-clip-display键 添加至META标记 并设定为“卡片” 如果你喜欢在网页中 推广你的App Clip 那卡片模式就很适合 对于使用SafariViewController 输出网页内容的应用程序 例如推特 卡片能作为应用程序UI的一部分 现在用户可以直接从应用程序 启动App Clip

这是Safari浏览器 和SafariViewController里的 App Clip卡片 我们来谈谈用本地体验进行测试 对用户来说 他们的App Clip体验 始于App Clip卡片 卡片显示App Clip的标题 副标题 可以采取什么行动 还有表现你的品牌和风格的页头图片 你可以在App Store Connect 创造一个App Clip卡片 跟着分步指南逐步配置所有元素 你也可以指定 和你的App Clip有关的位置 这可以让App Clip 出现在Maps位置卡片 Siri建议小组件或聚焦搜索 若想了解 如何定制化App Clip卡片 请参考WWDC20的 《What's new in App Store Connect》 以及《Configure and link your App Clips》 开发App Clip时 你可能还没有任何App Clip相关经验 有时你会想测试端到端流程 并且以不同身份参与整个体验 你可以通过本地体验做到这点 本地体验是你在自己的测试设备中 进入的体验 你可以用大部分 平常的App Clip调用方法 启动它 要创造一个本地体验 前往开发者设定 并选择本地体验 指定你的App Clip的名称 标题、URL前缀、bundleID 并从你的照片库选择一个图档 作为页头图片 接着你就能扫描QR码或NFC标签 启动体验 本地体验支持QR码 NFC、App Clip代码 Safari和Messages 本地体验不会出现在Maps 位置建议和聚焦搜索 经登录的体验才会出现在这些地方 另外 你只能为 用Xcode安装的App Clip 或Beta测试中的App Clip 指定本地体验 这就是用本地体验测试的方式 说到这 我想交给陆铭 他会进行演示 谢谢永俊 如同永俊刚提到的 你现在可以配置META标记 以在网页正中间 显示全尺寸App Clip卡片 在Safari 和SafariViewController都可以

我开了FoodGrid应用程序 这是我朋友创建的第三方应用程序 它帮你发掘附近的餐厅 和饮料店 各位可以看到我的果昔铺Fruta 出现在FoodGrid中 在我朋友的应用程序中 点击我的果昔铺Fruta 会开启SafariViewController 显示我的果昔铺网站 因为我的果昔铺网站已经采用 iOS 14和iPadOS 14的 Smart App Banner META标记 我的顾客可以从Smart App Banner 打开Fruta的App Clip 但用这种方式打开App Clip 顾客需要先发现横幅 点击 然后在App Clip卡片中确认 这流程需要多个步骤 所以采用iOS 15和iPadOS 15的 全新全尺寸App Clip卡片 是很好的方式 能宣传和提升 顾客发现Fruta果昔铺 App Clip的机率 不论是在网页中 或是通过SafariViewController 嵌入我们网站的第三方应用程序中 来看看怎么做到这件事 我在托管我们网站的 Fruta网站服务器上 在apple-itunes-app的 META标记中 我只需要添加“app-clip-display” 并将它的值设定为“卡片” 现在如果我再次在FoodGrid 点击打开餐厅网站 你会发现 App Clip卡片立刻在网页中 以FoodGrid的UI呈现 接着用户可以从这个第三方应用程序 直接启动Fruta的App Clip 交还给你 永俊 谢谢陆铭 现在我知道如何通过 SFSafariViewController 从应用程序启动App Clip 现在来聊聊App Clip码 App Clip码 是由Apple设计的全新视觉代码 它是在真实世界中 发掘App Clip体验的好方法 iOS 14.3以上皆可使用 所以有将近十亿个设备 准备好用你的App Clip码 App Clip码总是会 导向一个App Clip 用户看到这个码时 他们就知道有App Clip可以探索 每个码都编入 能进行特定体验的唯一URL iOS在传送至App Clip前 将URL解碼 意思是你的App Clip 不需要做任何特殊处置 就能处理这些代码 用既有URL处理方式就行 有两种App Clip码： NFC集成或仅扫描 用户可以通过点击或用相机扫描 跟集成NFC的码互动 在客户能轻易取用码时用这个方式 例如贴在贩卖机上 餐厅桌上 或是门店橱窗上 若代码可能放在顾客接触不到的地方 或是不适合用NFC时 那就用仅扫描 例如当代码以数字型态 在营销电邮中呈现 你可以定制App Clip码风格 以符合特定的使用案例 可以自己选择前景或背景颜色 也可以隐藏App Clip标识 若空间足够 我们建议显示标识 这能向新的顾客表达清楚的信息 表达这是App Clip的码 如果你有一个ARKit App Clip 可将App Clip码作为锚 追踪它在实体世界中的位置 这可以带来超棒的体验 例如用户可以扫描包裹上的 App Clip码 不用打开包裹 就能看包裹里面是什么 像是这把吉他 若想更了解App Clip码 和ARKit 请参考WWDC21专题讲座 《Explore ARKit 5》 创造App Clip码的方式 有两种 可以用developer.apple.com提供的 AppClipCodeGenerator工具 也可以直接从App Store Connect 下载码 若是要测试或开发App Clip 或是你需要使代码生成自动化 我们建议使用命令行工具 用App Store Connect 为已注册URL创造码 为达到最佳扫描体验 以下是须注意的规则 首先 码应在平整的平面上 码应该正面朝上 记得不要旋转码或中央标识 太小的码，客户会很难注意到并扫码 所以记得让码够大 至少要一英寸宽

确保良好的可见度 确认你的码没有被挡住 损坏 或是位置离其他码太近 你可以在码旁边添加文字 告诉大家他们可以 用它启动你的App Clip 记得信息要简洁并有明确的行动呼吁 更多信息请参考 Human Interface Guidelines 和This is App Clip Code 我要再次把画面交给陆铭 他会展示如何快速生成 App Clip代码 谢谢永俊 像永俊提到的 生成一个App Clip码 最简单的方式是 从App Store Connect下载 若你有更多定制化需求 或是需要大量生成App Clip码 用AppClipCodeGenerator的 命令行工具 在本地生成是很好的做法 我已经在我的Mac下载并安装了 来自Apple开发者网站的 AppClipCodeGenerator 所以我可以打开Terminal 并和这个工具互动 它很容易上手 像永俊说的 有很多种模板 供你选择 我可以输入 “AppClipCodeGenerator模板” 检视所有可用模板的清单 但这些模板到底看起来是什么样子？ 你可以在以下位置找到 所有模板的预览： /Library/developer/AppClipCode Generator/SampleTemplates 我们用Quick Look看一下

四号看起来很棒 所以我要用这个模板 为Fruta App Clip 生成App Clip码 我要输入“AppClipCodeGenerator生成” 我们会生成一个NFC App Clip码 因为我会在印刷的App Clip码后面 放一个NFC标签 我要输入一个 我已在App Store Connect 注册为高级App Clip体验的URL 就是fruta.example 我要选四号模板 因为刚用 访达的Quick Look预览 看起来不错 最后我要输入 想要的输出SVG文档名称 fruta.svg

SVG图形是向量图形 所以能在印刷时完美的放大缩小 从美国信纸大小 到24乘36英寸的海报都可以 我们来用Safari浏览器打开 生成的SVG以预览它

我已经把这个App Clip码 印在海报上 我们来尝试 从Control Center的 代码扫描仪模块扫描它

好了 我们现在进入了Fruta的 App Clip 这只是快速的示范 示范如何用AppClipCodeGenerator 命令行工具 生成App Clip码 交还给你 永俊 谢谢陆铭 现在我知道如何自己生成 各种风格的码 做个总结 在这个专题讲座中 我们看了些很棒的App Clip 然后我们谈了Safari浏览器 和SafariViewController中的 App Clip卡片 我们也讨论了 如何用本地体验进行测试 最后我们谈到App Clip码 Apple为App Clip设计的视觉码 谢谢大家 我很期待 试用各位创建的更多绝佳App Clip 祝各位WWDC愉快 [音乐]