寒山闻钟专业版 | Zero Status
iClock - Simplest Always Best | Zero Status

Universal Links:打通网站和 APP 的正确姿势

iOS教程 Zero Status 533 浏览 0评论

Universal Links:打通网站和 APP 的正确姿势 - app - iOS教程 | Zero Status - 1

打通网站和 APP

如果你的项目同时有 Web 形态的网站,也有移动端的 APP, 并且你更希望用户使用体验更好的 APP,该怎么做呢? 在以往我们可以用到 Scheme 调起, 比如给你的 APP 定义一个特殊的 Scheme,类似 myapp:// 这种形式的。

比如你可以在网站中使用 HTML 直接写一个链接:

<a href="myapp://item=1">To App</a>

一旦浏览器检测到这样的链接被点击,并且你的 APP 已经安装了, iOS 就会打开的你 APP 了。

但这样还是有些不够灵活,举个例子 – 如果是其他网站外链到你站点的 URL,就不受你控制了。 而且这种实现方式多少有些 hack 的感觉。

Universal Links 的出现就是为了解决上面的这些问题。 它用了一种更加优雅的方式, 我们不需要再显式的调用 Scheme, 只需要正常的使用 URL 就可以了,iOS 系统帮助我们来决定如何处理这个链接。 比如 https://swiftcafe.io 这个 URL, 不论它是外链还是站点内的链接, 如果 iOS 检测到网站和 APP 同时支持 Universal Links, 并且 APP 已经安装了, 那么系统就会自动打开相应的 APP。

那么它是怎么实现的呢? 我们来看一下。

首先,你需要在你的网站的根目录,或者 /.well-known/ 目录中创建一个叫做 apple-app-site-association 的文件。

比如 https://swiftcafe.io/apple-app-site-associationhttps://swiftcafe.io/.well-known/apple-app-site-association

这个文件中定义了你网站所支持的 APP:

{
"applinks": {
"apps": [
],
"details": [
{
"appID": "DS3849SAVF.io.swiftcafe.app",
"paths": [
"*"
]
}
]
}
}

这个文件很简单,details 里面列出来所有支持的 APP, appID 属性通过 Team ID + Bundle ID 的确定哪个 APP 可以通过 Universal Links 打开。 paths 属性指定网站的哪些目录支持 Universal Links, 如果用 * 的话就代表整个站点都支持。

有两点要特别注意的,这个文件必须通过 HTTPS 访问,苹果这样做主要是防止劫持风险,所以你必须有一个支持 HTTPS 的服务器。 然后,这个文件的尺寸不能超过 128 KB, 否则无效。

网站上面设置好之后, 接下来还需要在 APP 端进行一些设置, 首先确保你的 APP 的 Bundle ID 和 Team ID 和网站上的 apple-app-site-association 一致, 然后打开 Xcode 在项目设置中的 Capabilities 选项卡里面找到 Associated Domains 选项然后这样设置:

Universal Links:打通网站和 APP 的正确姿势 - app - iOS教程 | Zero Status - 2

我们这里面用 applinks: 前缀加上了我们的站点域名。 这样就完成了 APP 端的设置。

这一切都设置完成后, 重新安装你的 APP, 如果没有什么意外, 你在 Safari 中试着打开你的网站, 应该就可以自动跳转到你的 APP 了。 当 APP 接受这个调起的时候,APPDelegate 的 func application(application:,userActivity:, restorationHandler:) 方法会被调用, userActivity 参数包含了 URL 相关信息:


func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
if userActivity.activityType == NSUserActivityTypeBrowsingWeb {
let url = userActivity.webpageURL;
NotificationCenter.default.post(name: NSNotification.Name(rawValue: "loadURL"), object: url)
}
return true
}

首先我们判断 activityType, 如果是 NSUserActivityTypeBrowsingWeb 就代表从 Universal Links 中打开。 然后获取 userActivity.webpageURL 属性,这个是从浏览器调起的 URL 了。 随后就任你处理了~

原理

Universal Links 的原理并不复杂, 我给大家简单说两句。 首先当你 APP 安装的时候, 因为我们设置了 Associated Domains, XCode 会帮我们生成一个 entitlements 文件,就包含了我们指定的 applinks 信息:

Universal Links:打通网站和 APP 的正确姿势 - app - iOS教程 | Zero Status - 3

iOS 检测到这个文件后, 就会按照它里面指定的域名,去请求 apple-app-site-association 文件, 记得是通过 HTTPS 请求, 所以我们的主机需要支持 HTTPS 才能成功。 当请求成功并解析成功后, 就会把这个网站对应的 Universal Links 信息保存下来。

当我们用 Safari 或者基于 UIWebView, WKWebView 的浏览内核访问我们的网站时,iOS 就可以感知这个规则了。 只要符合规则 iOS 就可以打开我们的 APP。

查漏补缺

在开启 Associated Domains 的时候, 可能会收到一些报错信息, 比如 Provision 文件不匹配等,如果收到类似的报错,那么只需要按照相应的提示修改即可。 一个很可能的原因就是 APP ID 没有配置支持 Associated Domains 在 Apple Developer 后台配置即可:

Universal Links:打通网站和 APP 的正确姿势 - app - iOS教程 | Zero Status - 4

结束

Universal Links 的原理和使用并不复杂,但它确实能带来很不错的收益,特别是当你的项目同时又 Web 端和移动端的时候, 对提升移动端 APP 的日活有非常大的作用。关于 Universal Links 更详细的资料,大家还可以参看苹果的官方文档 https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html

Universal Links:打通网站和 APP 的正确姿势 - app - iOS教程 | Zero Status - 5

Universal Links:打通网站和 APP 的正确姿势 - app - iOS教程 | Zero Status - 6

本文转载自:SwiftCafe 原文链接:打通网站和 APP 的正确姿势

您必须 登录 才能发表评论!