嵌入和共享视觉丰富的链接

嗨 我是 Tim Horton 来自 Safari 和 Webkit 团队的 我将要为你展示如何 在你的 App 中显示 Rich Link

在 iOS 10 和 macOS Sierra 中 我们介绍了信息中的 Rich Link 它是一个让 URL 更美观更实用的途径 为了最大化的 利用这个优势 我们建立了 针对某几种链接的规范 这些包括了类似 內联视频和音频播放 以及一个对 Tweets 的特别演示 它包括含有多张图片 以及其他 例如 Apple Maps 的链接

今年 iOS 13 和 macOS 10.15 带来了新的 API 它可以让你 在你自己的 App 中展示 Rich Link 这样你就可以 用最少的精力 享受最多的好处 在这个视频中我们将 随着创建这个 相当简单的食谱标记 App 的过程中 我们逐步的用到 新的 Link Presentation 框架的功能 来从一个平淡无奇的 URL 列表到 像这样一个丰富的链接网格 而且这不需要花很多时间

要做到这个 我将涵盖 3 个主题 首先 如何呈现元数据 例如一个 URL 第二 如何轻松呈现 这个元数据给用户 然后第三 如何使用取回的 元数据来加速 新的分享表单展示 在 iOS 13 中

那么让我们从检索 元数据开始吧

在菜谱 App 中让我们说 你已经有了一些 给用户获取 URL 到 App 里的机制

你可以把它们呈现 在一个表格中 但 URL 并不是非常用户友好的 在这种情况下

你的确可以改为让用户 给每个链接起一个标题 但是我们可以让它变得更加容易

使用新的 Link Presentation 框架 它很容易使用 LPMetadataProvider类

你只需提供 URL 然后它 反馈给你 LPLinkMetadata 文件 包含一个具有代表性的 标题并且在任何媒体都可以使用 让我们看看这是什么样子的 首先你创建一个 LPMetadataProvider 然后调用 startFetchingMetadata 加上 你感兴趣的 URL 当调用完成处理程序时 要确保没有错误 如果服务器没有响应或 太慢或你的用户没有 网络连接 提取元数据可能会失败 最后 你可以使用元数据 来干你想做的任何事 我们将回到这一个时刻

在我们继续之前有一些 都要记住的事情 在使用 metadataProvider 和 LinkMetadata 过程中 首先 得到的元数据 对象可以包括任何 标题 图标 图像 视频或都不包含 如果网站没有指定任何内容 它也可以使用安全编码进行序列化 这很重要 因为 LPMetadataProvider 让 互联网做相关的工作 而你不想做相关工作 也不想让你的用户为这些数据 和功能付费 每当你展示相同的链接时 你应该缓存检索到的 尽量多的本地元数据

此外 你还可以获取 本地 URL 的元数据 新的快速查看缩略 API 将用于检索一个 有代表性的缩略图 尽它最大可能

现在让我们谈谈如何将 我们检索元数据投入实际使用中 用我们的 App 来展示一下

再一次说 这非常简单 你可以用早些时候的一个对象 并用它建立一个 LPLinkView

就这么简单

让我们回到这个食谱 App 并将 LPLinkViews 放在我们的 表格视图单元格里面

现在好多了 现在你有一个非常熟悉的 呈现方式让每个 食谱在第一眼就很容易辨认 LPLinkView 本身具有固有的大小 但它也有会调节以此来符合理想的大小 从而给出一定的限制 我们会尝试呈现 一些在任何尺寸的布局都是合理的东西

我要谈的最后一件事 是关于如何利用 LinkMetadata 来加速 在 iOS 13 中新的分享表单

对于有共用 URL 的现有 App 分享表单将会 自动在卡片上方呈现链接的预览 但是 这需要连接 到服务器以进行检索元数据 每次分享表单被展示的时候都是如此 所以标题和图标是异步显示的 让我们再看一遍 注意观察分享表单的标题 如果你已经有了一个 URL 的 LPLinkMetadata 的对象 你应该把它给 分享表单然后预览就会 无需从网络加载即可立即显示 你可以使用新的 activityViewControllerLinkMetadata 方法 在对 UIActivityItemSource 的操作时 只需返回元数据对象 让我们来看看它们的区别 在我们的食谱 App 中 如果我们提供的 数据是我们已经在表格视图中使用过的

好了很多 同样值得注意的是 如果用户选择共享 到消息中 同样的元数据会被直接传送 并且整个过程流畅无缝 没有任何不必要多余下载的体验

最后一件事 如果你的 App 已经有了一个 食谱数据库 且带有标题和图片 并没有被链接的演示所抓取 你不必重新抓取 来自互联网的元数据 以此来加速 分享表单或展示一个 Rich Link 相反 你可以在 LPLinkMetadata 的地方 填入你自己之前存在的数据来源 你只需创建一个 LPLinkMetadata 对象 并至少填入原始的 URL 和 URL 字段加上任何 你有的其他信息

所以今天我们的三个关键要点是 你可以使用 LPMetadataProvider 来获取 URL 的丰富元数据 为了提供更多的 关于 URL 的内容 你应该使用 LPLinkView 来在你的 App 中显示链接 以一种集美观与 系统一致性于一体的方法 并且你应该预先获取或使用 已有的 LPLinkMetadata 来 加速分享表单 在你的 App 中的预览

更多相关信息 请访问 developer.apple.com

感谢你的参加