微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

聊聊 App 内 Web View 的改善

2016-05-15 21:32 前端大全

(点击上方公众号,可快速关注)


英文:medium

译者:伯乐在线 - douxingxiang

链接:http://web.jobbole.com/86039/


无数情况下,手机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 && /Safari//.test(navigator.userAgent) === false) {

        return 'twitter';

      }

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

        return 'tumblr';

      }

      return null;

    })();

 

    if (webviewProvider !== null) {

      document.body.classList.add(webviewProvider);

    }

 

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


结论


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


【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!



 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 Go语言写Web 应用程序 【有人@我】Android中高亮变色显示文本中的关键字 童慧明:山寨与廉价——中国创新的窘境【IXDC大会演讲实录】 Web页面测试——控件类(一) 星期五企业级市场你应该知道的五件事