聊聊 App 内 Web View 的改善

659 查看

无数情况下，手机web都很诡异，但其中最诡异的是，如果你拥有很多社交化流量，你的用户其实并没有通过浏览器浏览你的手机网站。好吧，不全对。在iOS（有时Android）中使用Facebook或Twitter应用的web 视图组件。请看一张来自 Flurry 的图表，你可能会认为web几乎死掉了：

但事实上，人们的 web 使用正从 Safari 转到 Facebook。（不幸的是，只有 Facebook 知道用户在应用和 web 视图上所花费的时间，我们完全没办法知道 web 是否死掉了。）

那又如何？

我曾写过一篇文章，关于如何给web视图的用户提供更好的服务，但在这里我想补充一点。这些应用内的 web 视图是个孤岛——它们相互之间不分享数据或用户信息，也不跟 Safari 本身分享。这意味着Facebook web视图内的用户不会登陆到 Twitter，反之亦然。你不会太惊讶，当很多用户面对登陆屏幕页时，他们就不再会分享链接，那么为什么不只展示相关的分享按钮呢？

这是非常重要的，因为很多应用都会挂钩到网站上的分享按钮，然后显示本地界面而不是web版本的界面。比较下面Twitter和Tumblr：

用user agent 来拯救

请求网页时，所有web浏览器都会发送“user agent” – 它是一小串标识符表明你所使用的软件。大部分应用的web视图都自定义了它们的user agent供我们检测。我们比较一下普通的Safari：

Mozilla/5.0 (iPod touch; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

和Facebook的：

Mozilla/5.0 (iPod touch; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411[FBAN/FBIOS;FBAV/24.0.0.12.7;FBBV/6890242;FBDV/iPod5,1;FBMD/iPod touch;FBSN/iPhone OS;FBSV/8.1;FBSS/2; FBCR/;FBID/phone;FBLC/en_US;FBOP/5]

还有Pinterest：

Mozilla/5.0 (iPod touch; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411[Pinterest/iOS]

的user agent。

在所有这些疯狂的标识符之中，我们可以看到两种网络都添加了我们可以检测的自定义文本。

即使他们不知道

有些应用不会改变它们的user agent – Twitter和Tumblr是两个例子。但也不全是坏消息：全部web视图都忽略了最后的“Safari/xxx.x.x”字符串。如果我们把这些跟参考数据（其他少量数据表明用户来自哪里）组合起来，我们仍然可以得到一个可能的匹配。

总结一下

所以我们创建了一个JS片段：

var webviewProvider = (function() {

if (//FBIOS/i.test(navigator.userAgent) === true) {

return 'facebook';

}

if (/Twitter for/i.test(navigator.userAgent) === true) {

return 'twitter';

}

if (/Pinterest//.test(navigator.userAgent) === true) {

return 'pinterest';

}

if (///t.co//i.test(document.referrer) === true &amp;&amp; /Safari//.test(navigator.userAgent) === false) {

return 'twitter';

}

if (/tumblr.com//i.test(document.referrer) === true &amp;&amp; /Safari//.test(navigator.userAgent) === false) {

return 'tumblr';

}

return null;

})();

if (webviewProvider !== null) {

document.body.classList.add(webviewProvider);

}

然后将CSS类用在标签上来改变分享按钮。

结论

处理类似这种web视图内部的工作依然非常困难，但是有些时候你可以加以利用。所以，就这样吧。直到Facebook把我们全部干掉。