兼容 iOS 9 Safari 的应用跳转方案探索

标签: ios safari 应用 | 发表时间:2015-09-29 14:35 | 作者:keakon
出处:http://www.keakon.net/
很多做 web 开发的一定遇到过这种需求:点一个链接或按钮时,如果装了应用,就用该应用打开;没装的时候,iOS 跳 App Store 下载,Android 直接下载 apk 包。
在做读读日报的时候,就被这玩意花费了好长时间;然而 iOS 9 发布后,方案又失效了,于是又折腾了我几个小时。

首先做个科普,浏览器是无法知道应用有没有安装的。
应用可以设置一个(或多个)自己能打开自定义 URL scheme,例如 Twitter 就声明自己能打开「twitter://」。
iOS 应用中可以用 UIApplication 的 canOpenUrl 方法来检测对应的 URL 是否能打开。如果「twitter://」能被打开,也就说明安装了 Twitter 应用。再用 UIApplication 的 openURL 方法,就能跳转到对应的应用了。Android 中也是类似的做法。

接着看看浏览器应该怎么处理。
以 iOS 8 及更早的版本为例,Safari 在尝试打开自定义 URL scheme 时,会自动用相应的应用来打开。
而打开有两种方式:
  1. 直接跳转:例如点击链接、修改 window.location 等。
  2. iframe 跳转:在 body 上添加一个 iframe,把它的 src 指定成要跳转的地址。
后一种方法不会引起页面可见的变化(例如页面内容变成一个新页面),不会导致浏览器历史记录的变化,大致实现如下:
  <a href="下载地址">下载或打开 app</a>
<script>
$('a').click(function() {
	var ifr = document.createElement('iframe');
	ifr.src = '自定义 URL scheme';
	ifr.style.display = 'none';
	document.body.appendChild(ifr);
	setTimeout(function(){
		document.body.removeChild(ifr);
	}, 3000);
});
</script>
这样在点击这个 a 标签时,会先尝试打开自定义 URL scheme。如果成功,则跳到应用里去了;如果失败,则跳转到 href 属性,即下载页。

然而这个方案在很多安卓机型和 WebView 中不可用,为了保证可用,就只好用第一种方案了:
  $('a').click(function() {
	location.href = '自定义 URL scheme';
	t = Date.now();
	setTimeout(function(){
		if (Date.now() - t < 1100) {
			location.href = 'Android 下载地址';
		}
	}, 1000);
	return false;
}
这里是让浏览器尝试打开自定义 URL scheme,并且忽略浏览器默认行为(跳转到 href 属性)。等待一秒后,再检查当前时间,如果超过 1100 毫秒,说明跳转 app 成功了(跳转 app 会让浏览器的定时器变慢),什么也不用干;如果没超过 1100 毫秒,很可能是没有安装应用,就跳到下载地址。

而在 iOS 9 上,iframe 方案也不可用了,必须用第一种方法。
不过照抄 Android 的代码也没用,因为在打开自定义 URL scheme 时,会弹出一个对话框,询问是否用 xx 应用来打开。在用户还没来得及点打开按钮前,定时器又触发了,导致跳到 App Store。

经过一番探索后发现,尝试打开自定义 URL scheme 后,接一个页面跳转,会把对话框覆盖掉,再刷新页面,就能无需确认跳转应用了:
  $('a').click(function() {
	location.href = '自定义 URL scheme';
	location.href = '下载页';
	location.reload();
}
其中,下载页是一个 HTML 页面,用 JavaScript 延时 2 秒跳转到 App Store。如果直接在 HTTP 头里用 Location 跳转到 App Store,则会立刻跳到 App Store,没机会跳应用。

但是这仅仅解决了已安装应用的时候,能跳到应用的场景;而没装应用时,跳 App Store 的请求会被取消掉。
于是我用到了两个很神奇的定时器:
  $('a').click(function() {
	location.href = '自定义 URL scheme';
	setTimeout(function() {
		location.href = '下载页';
	}, 250);
	setTimeout(function() {
		location.reload();
	}, 1000);
}
如果想尝试修改这两个值,可以自己试试,失败了不要找我。它的原理大概是跳应用需要一个准备时间,在这个期间内都能被其他跳转打断。而如果跳应用失败,reload 并不会打断 App Store 的跳转。

终于能让它可用了,但是从应用返回时,会发现 Safari 停留在了下载页,而不是最初的网页。因此可以在下载页加上这样的代码:
  setTimeout(function() {history.back()}, 2000);
也就是让它 2 秒后回到前一个页面,这样从应用返回时,就不会停留在下载页了。

最后,iOS 9 还支持应用打开所拥有的域名的 http scheme,不过对于这种可以自动选择下载和跳应用的场景没有帮助,这里就不提了。

相关 [ios safari 应用] 推荐:

兼容 iOS 9 Safari 的应用跳转方案探索

- - keakon的涂鸦馆
很多做 web 开发的一定遇到过这种需求:点一个链接或按钮时,如果装了应用,就用该应用打开;没装的时候,iOS 跳 App Store 下载,Android 直接下载 apk 包. 在做读读日报的时候,就被这玩意花费了好长时间;然而 iOS 9 发布后,方案又失效了,于是又折腾了我几个小时. 首先做个科普,浏览器是无法知道应用有没有安装的.

iOS 5中safari带来的新特性

- mingelz - 前端观察
随着iPhone4s的发布,iOS5也正是发布了,增加了很多很有用的新特性,不过对于前端开发者来说,最关心的还是浏览器,让我们来看一下苹果为iOS5中的safari新增了哪些新特性吧. 终于支持position:fixed了;. 支持overflow:scroll了,通过-webkit-overflow-scrolling: touch;来实现: 1 2 3 4.

iOS 6中Safari对HTML5的支持

- - 前端观察
iOS6发布了beta版,其中包括了新版的Safari浏览器,增强了对HTML5的支持,我们来了解下吧~~. 目前,ios 5.1中safari在HTML5test.com的测试得分是324,而ios 6中safari的分数是360. 终于支持这个了,可以在浏览器中上传照片文件什么的了. 这个大家也期待已久了吧,不多解释.

iOS上的Safari也有“后悔药”可吃了

- Jona - Tip4Mac
iOS 5: 有一件事儿我想肯定每个人都遇到过. 就是开着浏览器上网的时候一不小心就把一个正在浏览的标签页关掉了. 如果你在Mac上,你可以用cmd+shift+T (Chrome, Firefox)或者cmd+Z (Safari)来迅速打开刚刚不小心关掉的标签页. 其实在iOS 5中的Safari加入的一个新功能也可以让你做同样的事情.

[技巧] 如何在 iOS 版 Safari 中“查看源代码”

- - 果迷网
需要在 iPad、iPhone 上查看网页的源代码. 很不幸,iOS 中的 Safari 没有内置这个功能. 你需要使用 下边的方法,之后就可以在 iOS 上查看任意网站的源代码了. 在 iPad、iPhone 或 iPod touch 的 Safari 中将这个页面(或者任何页面)存为书签,并命名为“查看源代码”.

为何Safari不如Chrome?

- - 月光博客
  Safari是乔布斯在2003年的Macworld大会发布的,9年过去了,08年才发展起来的Chrome用了不到Safari一半的时间远远把Safari甩在了后面,这让Safari情何以堪. Chrome的市场份额从2008年的0%开始,发展到了现在的25%,而苹果的Safari似乎一直徘徊于5%-8%之间.

Apple:年度最佳 iOS 应用榜单

- jicknan - 爱范儿 · Beats of Bits
过去的一年堪称苹果的丰收年,革命性的 iPad 和大卖特卖的 iPhone 4 的各种故事贯穿了整个 2010,然而,除去优秀的硬件设计,iOS 的真正竞争力,在于它那恐怖的 30 万应用. 今天,苹果公布了 2010 的最佳 iOS 应用榜单(应该是北美的统计). 1:美国人对于职棒的爱超过了一切,在总榜单上,MLB.com 的免费应用甚至超过了愤怒小鸟.

iOS应用下载“量价齐升”

- ItTalks - 《商业价值》杂志
专注于研究苹果公司的咨询公司Piper Jaffray’s Gene Munster近期发布了一份研究报告. 报告显示,2011年,iOS设备用户正在以更大的热情购买付费应用,而付费iOS应用的价格也普遍得到提升. Piper Jaffray详细监测了自App Store上线以来,包括终端数量、应用下载数量、付费应用数量、免费应用数量、收入等在内的各种数据.

《金融时报》移除iOS应用

- yonghai - Solidot
《金融时报》成为第一家因苹果应用内订阅分成政策而移除iOS应用的世界知名媒体. 金融时报发言人Tom Glover表示,他们是在与苹果友好协商后决定移除应用,表示iTunes对基于广告的应用来说仍然是一个重要渠道. 苹果的新政策要求从应用内内容销售和订阅中提取三成收入. 为了遵循苹果要求,Amazon、Barnes &amp; Noble、Kobo、Google和《华尔街日报》决定从应用内移除购买功能.

官方的 Blogger for iOS 应用发布

- 橙子 - 谷奥——探寻谷歌的奥秘
尽管已经有iOS应用支持直接发布文章到Blogger,但第三方用着就是别扭. 于是今天Google推出了官方的Blogger for iOS应用,支持的功能包括:. 发布和编辑博文,也可保存为草稿. 可直接拍摄照片或选择图片库里的照片发布. 支持iPhone、iPad和iPod touch,需要3.1.3以上版本,内含中文界面.