移动 Web 开发之浏览器

「移动 Web 开发」系列文章为 PPK 所著的 The Mobile Web Handbook 读书笔记。除书中内容,还补充了部分中国的实际情况,以及个人的经验、观点。

本文乃此系列的浏览器篇。

移动浏览器类型

移动浏览器可以分为四种:

  • 内置浏览器
  • 用户安装浏览器
  • WebView
  • 代理浏览器

它们有时是重叠的,比如代理浏览器可能是内置的,也可能是用户安装的,如 Opera Mini。

内置浏览器

内置浏览器搭载在系统固件中,一般由系统产商开发,如 iOS 的 Safari,Android 的 Android WebKit 或 Chrome。

内置浏览器一般无法单独升级,需要升级系统才能更新。所以,有时会被又老又臭的内置浏览器拖住开发后腿,尤其是 Android 平台。

用户安装浏览器

有许多浏览器是用户可以自行下载安装的,如 Chrome、Firefox、Opera、UC、QQ 等。

需要注意的是,同是用户安装浏览器,不同平台上会有本质差别,如 iOS(包括 Windows Phone)不允许使用其他的渲染引擎,所以 iOS 上的 Chrome 并非它该有的 Blink 心,Firefox 亦非 Gecko。

用户安装浏览器可以及时更新,获得最新的功能和更好的体验。

用户习惯地域差异

  • 西方:很少有用户去安装别的浏览器——就算知道可以安装;
  • 亚洲:用户会下载(有时可能是「全家桶」之类的被下载)安装各种浏览器,如 QQ、UC 浏览器。

WebView

WebView 是系统提供给原生应用的内置浏览器接口。比如 iOS 上的第三方浏览器,都是基于系统 WebView 开发。

WebView 一般是独立的程序,使用内置浏览器的底层组件(如渲染引擎、JavaScript 引擎),但某些方面可能会有所不同,如性能上会有所限制。

代理浏览器

代理浏览器在其服务器上渲染 HTML、CSS,执行 JavaScript,然后把结果返回给浏览器。如 Opera Mini、早期的 UC 浏览器、Nokia Express 等。

与代理浏览器相对应的是完整浏览器(full browser),即把资源下载到客户端渲染、执行的浏览器。

代理浏览器的优缺点

优点:

  • 节省流量,传输速度快:代理服务器返回给浏览器的是高度压缩的文件(Opera 声称高达 90%),节省流量和传输时间,尤其适用于 2G 等网络场景;
  • 硬件要求低,适用于功能机、低端机:在服务器端渲染,客户端只负责展示,自然无需销太多硬件资源。

缺点:

  • 有限执行 JavaScript,缺乏客户端交互功能。

应对方式

就目前国内移动浏览器分布来看,几乎可以忽略掉代理浏览器。

如果需针对代理浏览器开发,应该注意:

  • HTML、CSS 没什么问题(当然也别指望 CSS 动画什么的),但基于 JavaScript 开发的应用在代理浏览器上运行可能会有很大问题;
  • 可以放心使用 click 事件,touchscroll 、键盘事件等就别指望了。

参考:

混合浏览器

混合浏览器同时提供完整浏览器和代理浏览器的功能,一般通过设置是否开启「节省流量模式」切换。

不同浏览器细节可参考:

移动浏览器渲染引擎

大多移动浏览器都使用 WebKit 作为渲染引擎(逐步向 Blink 迁移),不使用 WebKit 的包括:

  • IE Mobile(Edge Mobile):Trident -> EdgeHTML
  • Opera Mini:Presto(可能已经换成 Blink)
  • Chrome:Blink
  • Firefox Mobile: Gecko
  • UC Mini、Nokia Express:Gecko
  • 国内一些浏览器(Android 平台)已经开始从 WebKit 向 Blink 迁移,具体数据有待补充

注意:iOS 上的第三方浏览器由于系统限制,无法使用其他渲染引擎。

虽然众多浏览器使用 WebKit 渲染引擎,但由于用户界面实现、功能定制等原因,最终渲染结果会有很多细节上的差异,即便是同版本的渲染引擎。我们在庆幸移动端没有 IE (少到可以忽略)这样的大埂时,却不得不面对更繁琐的 WebKit 碎片化问题。

iOS 浏览器情况

记住:苹果不允许使用其他渲染引擎

这种封闭性对浏览器厂商可能是束缚,对用户和 Web 开发者则是好事,保持一致的用户体验,降低开发、测试成本。

然而,虽然同样基于 iOS 提供的 WebView,Chrome、Firefox、微信 WebView、QQ 浏览器、UC 浏览器等还是会存在细微差别,在 Safari 上正常的功能,在这些用户代理上未必。与这些细微差别相比,更要注意 Opera Mini 的代理机制完全避开了苹果的限制,差异会更大,需要根据市场份额决定是否需要做测试。

还记得当年那个能在 iOS 上播放 Flash 视频的 Skyfire 吗?(2013 年被 Opera 收购)

Android 浏览器情况

Android 平台的浏览器复杂程度,有时比应付桌面 IE 问题更让人头疼。

开放的结果

Android 的开放性,推动其成为最大的移动操作系统,但也产生了一些负面问题。

  • 差异化:开放性提供了差异化的 UI、用户体验,对手机厂商和用户都是好事。
  • 碎片化:可定制(差异化)导致系统更新缓慢甚至无更新,产生碎片化。

    一方面,Android 新版本硬件要求提升,旧设备可能无法满足;另一方面,厂商不愿为旧设备适配新系统投入资源,即便愿意为部分流行型号提供更新,周期也是漫长的

  • 由于国内市场的特殊性,厂商对 Google 服务 进行彻底阉割,可能影响 Android 更新机制。

Android 浏览器

内置浏览器

  • Android WebKit:UA 中不包含 Chrome 关键词;包含大量定制开关,不同厂商定制差异巨大,无规律可循;Android 4.4 以后被 Chrome 替代,但在老系统机型消亡之前,还得面对。
  • Chrome:2013 年开始使用 Blink 渲染引擎,比 Android WebKit 更强大;正被不同厂商定制拆分成不同分支。
  • 厂商内置浏览器:如三星内置的基于 Chromium 开发的浏览器、MIUI 内置的浏览器等。

用户安装浏览器

与 iOS 不同,Android 并没有限制第三方浏览器的渲染引擎,更多的定制意味着更大的渲染差异,需根据市场份额决定测试体系。

除浏览器外,微信、QQ 等用户量巨大社交平台 WebView,也是开发的重点和难点。值得庆幸的是,最近这些平台使用的 WebView 升级到了 Blink M37,一些兼容性问题可能会迎刃而解。

应该测试哪些浏览器

这很复杂。具体要根据目标客户、用户统计数据、第三方浏览器份额数据综合决定。

以下几个点肯定是条不过的:

  • 流行机型的内置浏览器,如果三星 Galaxy 系列、Note 系列;
  • 微信 WebView;
  • Google Chrome。

未来

目前移动 Web 开发主要针对手机、平板等设备,未来可能需要面对更多的媒介,如智能穿戴设备等。我们可以畅想一下未来的智能生活,亦或所面临的更大、更苦逼的挑战。

参考数据

全球

中国