在你的网站中直接下载 App

iOS新知
578 阅读2分钟

不知道大家在平时使用 Safari 的时候有没有注意过，有些网站打开之后顶部会出现一个 banner（上图是 github.com），可以直接下载某个 App（而不需要跳转到 App Store）。

这其实是苹果出的一个名为 Smart App Banner 的功能，目的是为了让 App 开发者更容易地引导用户安装自己的 App，从而将 Web 用户转化成App用户。

这个 banner 上大致的交互如下：

  1. 如果未安装过，点击右边按钮会直接下载安装

  2. 如果本机已经安装过，但是现在卸载了，点击右边按钮会重新下载安装

  3. 如果本机已经安装，且是最新版本，点击右边按钮会打开这个 app

  4. 如果本机已经安装，但不是最新版本，点击右边按钮会更新这个 app

  5. 点击右侧按钮以外的区域会弹出 App Store 浮层，展示此 app 在 App Store 的详情页

在自己的网站上添加这个功能

只需要在你的网站 html 的 head 标签中添加一个 apple 制定的 meta 标签即可：

<head>
<-- 其他标签 -->
<meta name="apple-itunes-app" content="app-id=1477376905">
</head>

content="app-id=1477376905" 这里的 app-id 是你的 app 在 App Store 上的 id

content 中除了 app-id 参数，还有个可选的参数 app-argument，这个参数可以在唤起你的 app 时提供上下文的 URL。比如你可以通过不同页面设置不同的 app-argument，这样在唤起 app 时也可以跳转到对应的页面，使用户体验更连贯。

在原生代码中，可以在 Appdelegate 的 openURL 方法中监控从 web 过来的行为，从而跳转到对应的页面

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    if url.path.contains("xxx") {
        // 跳转到对应页面
    }
}

另外：

  • 你的 app id 可以在 App Store Connect 或者 App Store 链接中查看

  • 如果你的应用不在当前用户的 App Store 登录的地区上架，则这个用户的网页中不会展示这个 Banner

  • 除了系统的 Safari，一些使用 SafariServices 来展示 web 页面的内嵌网页也会展示这个 Banner

参考资料

[1]

Smart App Banner 官方文档: developer.apple.com/documentati…

本文同步自微信公众号 “iOS新知”，每天准时分享一个新知识，这里只是同步，想要获得更好的体验就来关注我吧！

avatar
文章
阅读
粉丝