目录
1跨终端Web1
1.1终端VS.设备1
1.2一个贯穿全书的例子2
1.3后续章节3
1.4移动优先4
1.4.1移动流量暴增4
1.4.2聚焦业务本质5
1.4.3人机交互扩展7
1.4.4再说书名8
1.5不只是响应式8
1.5.1响应式8
1.5.2多站点13
1.5.3多模板13
1.5.4多平台15
1.6解决方案16
2MobileWeb17
2.1HTML518
2.2HTML19
2.2.1移动页面模板19
2.2.2Viewport21
2.2.3touch—icon26
2.2.4其他27
2.3触屏事件27
2.3.1触屏事件一览27
2.3.2通用触屏事件28
2.4调试31
2.4.1远程调试31
2.4.2设备调试43
2.5兼容性44
2.5.1OS版本碎片化44
2.5.2国内的特殊情况46
2.5.3WebView46
2.5.4更多工具46
2.6文档48
3基准51
3.1GBS51
3.2MGBS53
3.2.1准备53
3.2.2操作系统分级54
3.2.3屏幕分辨率分级65
3.2.4浏览器分级71
3.2.5MGBS73
3.3GTE75
3.3.1分层设计76
3.3.2核心层76
3.3.3数据层78
4检测81
4.1终端81
4.1.1什么是终端81
4.1.2分类82
4.2终端检测82
4.2.1场景82
4.2.2原理83
4.2.3实现85
4.3遗留问题86
4.3.1硬件信息86
4.3.2更精准的终端检测86
5接口87
5.1跨终端流程复用87
5.1.1示例187
5.1.2示例288
5.2IF89
5.2.1始于一次重构90
5.2.2新的环境95
5.2.3模型95
5.2.4解决方案96
5.2.5架构96
5.2.6路线图99
5.3if—spec2.0102
5.3.1JSONSchema102
5.3.2Demo109
5.3.3meta113
5.3.4if—spec1.0114
5.4if—mock2.0116
5.5if—guide2.0118
5.6总结122
6定位125
6.1定位126
6.1.1Hash126
6.1.2HistoryAPI127
6.1.3视图定位129
6.2数据129
7预览131
7.1客户端132
7.2服务端133
7.3示例136
8HybridApp139
8.1Hybrid简史139
8.1.1背景139
8.1.2简史140
8.1.3现状142
8.2Hybrid技术144
8.2.1Native调用Web144
8.2.2Web调用Native144
8.2.3Bridge146
8.3Hybrid框架150
8.3.1PhoneGap151
8.3.2Titanium152
8.4DeviceAPI153
8.4.1动作传感器156
8.4.2环境传感器158
8.4.3音频159
8.4.4视频160
8.5小结160
9存储161
9.1状态持久化162
9.2技术方案163
9.2.1整体方案163
9.2.2跨终端存储方案164
9.2.3跨域通信方案166
9.2.4安全性168
9.2.5遗留问题168
9.3使用168
9.3.1实例化169
9.3.2set/get169
9.3.3remove/clear170
9.3.4推荐命名170
10动作同步171
10.1原理171
10.1.1案例171
10.1.2动作同步172
10.2实现173
10.2.1Selenium173
10.2.2脚本录制和回放174
附录A GBS183
附录B JSONSchemaCore189
附录C JSONSchemaValidation201
附录D if—spec2.0221
作者简介225
序言
移动互联网不可阻挡地进入了我们的生活。笔者将自己在百度和Tianmao期间的跨终端Web的开发实践转化为书中的技术方案和实现，呈现给各位读者。
本书大纲来自于笔者2013年7月在D2上的主题分享“移动优先的跨终端Web”，2013年11月W3CTECH 2013上做了第二次分享。
面向对象
本书适合有一定PC Web基础，希望迅速了解Mobile Web，致力于PC和Mobile Web技术融合的读者。
本书的第1章、第3章、第5章面向所有的读者，即使您对Web技术毫无了解，仍可以顺利阅读下来。本书其他章节假定您对PC Web前端技术已经有所了解，知道HTML、CSS、JavaScript这些名词的含义，并且动手写过一个页面。
章节简介
第1章阐述了移动互联网的现状和遇到的问题，提出了跨终端Web的概念以及实现跨终端Web的多重途径，破除了“唯Media Query论”，并引入移动移先的概念，丰富跨终端Web的内核。
第2章从对比PC Web的角度介绍了Mobile Web的技术基础，并对远程调试、兼容性等开发问题做了详尽的阐述。
第3～7章是全书的核心，按照开发流程组织，逐步讲解了实现跨终端Web所需要的各类技术基础设施，包括：
基准，给出了调试和测试过程中的基准，确定调试和测试的范围。
检测，探讨如何构造一个为全站服务的终端属性检测工具。
接口，探索实现流程复用的途径及端到端的接口规范（IF）。
定位，分别介绍了基于Hash和基于History API的跨终端定位方案。
预览，介绍了实现跨终端预览的方案，并给出一个简化的实现。
第8章介绍了Hybrid App的发展历程、实现细节以及成熟的框架，并详细分析了以传感器为核心的Device API。
第9章的跨终端存储方案（Storage）是笔者参加“2013 Kissy Gallery组件大赛”时的冠军作品。
第10章完整介绍了如何通过脚本录制和回放来实现跨终端动作同步。
文摘
推荐序
2012年年底，我从云OS运营团队转岗到天猫前端团队，之前和手机硬件厂商、Mobile OS及App市场的合作经历让我重新思考前端的未来和电子商务的技术方向。除了在天猫内部实践基于移动优先（Mobile First）的设计研发外，还和infoQ合作把Qcon北京2013的前端议题定为“跨终端Web”，于是就有了采访稿《从可编程到跨终端——QCon北京2013“跨终端的Web”专题出品人鄢学鵾专访》，阐述当时的认知和想法。现在“跨终端Web”已经诞生一年半了，鬼道同学把这些想法和实践都编写成书实在让人惊喜和敬佩，我有幸成为这个成就的见证人，并再次有机会和大家谈谈跨终端Web的初心和思考。
1991年诞生了World Wide Web、HTTP和HTML，1995年诞生了JavaScript、Java和PHP，1996年诞生了CSS，1998年CSS 2.1正式发布，1999年CDN诞生且HTTP 1.1和HTML 4.01正式发布，2000年ECMA-262 3rd正式发布，2001年IE 6发布。作为Web开发者和前端工程师的我们应该对这些大事件相当不陌生，但如果你仔细看看这些年份就会发现我们所使用的绝大部分技术和方案都比IE 6老。在那个时期没有真正意义的前端，常见情况是美工切图，后端嵌套模板，也没有所谓的前端架构，前后端的发布机制几乎一样，那就是门户盛行的时代，Yahoo、新浪、搜狐和网易当道。
IE 6是第一轮浏览器大战的胜者，垄断式的胜利直接导致Web基础设施至少10年的缓慢发展，标准的意义也就不那么明显了。其实1994年就有了W3C，但民间为了解决W3C面对浏览器厂商不给力的混乱状况于1998成立了WaSP（The Web Standards Project），其中一个创始人于2003年发表了影响力巨大的著作《Design with The Standards（网站重构）》，当然在中国产生了估计作者都没有想到的额外影响，那就是出现了重构工程师。2004年Firefox 1.0、Gmail和Google Sugguest发布，2005年AJAX横空出世和Google Maps发布，2006年jQuery和YUI发布。这些事件的到来显示出了低成本的Web在跨浏览器上的巨大威力和人机交互的显著改善，导致当时互联网99%以上内容都是使用Web来呈现的，所以对于当时绝大部分人而言，WWW就是互联网。巨大的需求导致Web开发的规模化和专业分工，这就是前端工程师开始出现并大量集结于以Web业务为主的互联网公司的原因。
我们可以称这个时代为前端工程师1.0，比如在Google、Facebook、Yahoo、阿里巴巴、百度、腾讯等公司中，前端团队小有规模且以Web开发为主，此时的前端工程师们大量使用HTML、CSS、JavaScript开发基于桌面浏览器的网页和应用。这个时代的前端工程师主要具备3个方面的能力，一是跨浏览器的兼容能力，需要理解渐进增强和优雅退化的思想，深入Web标准并结合环境数据制定GBS（Graded Browser Support浏览器分级标准）；二是富交互Web的开发能力，能够基于，甚至开发JavaScript库去实现人和机器的复杂互动；三是性能优化能力，实践表明前端占Web性能80%，类似CDN和按需加载等各种性能优化方案深度地影响了前端架构和发布机制。
虽然今日市面上大部分前端工程师招聘条件还是基于前端工程师1.0的，但我们的环境自2007年iPhone发布起就在悄然却快速地变革，我们可能是家里唯一使用电脑的那个人，而手机在吃饭、走路、约会、上厕所等时都已经成为不可或缺的陪伴。当我还在云OS做运营时，便有一个令人震惊的发现：人类发展五千年到现在的最大共同点可能是每人都有移动智能设备。人们已经处于各种各样碎片化的智能移动设备上，这些设备有触摸屏、相机、麦克风、陀螺仪、加速计等特性，使得人同机器交互的方式发生了巨大的革命，更重要的是它们都和网络连接，没有了离线状态。于是，当一个人在大街上看到奇闻异事随手用手机拍下来并发到微博上，TA的朋友可能在手机、平板电脑或普通电脑的微博上看到并转发，也可能被TA的朋友转到微信或IM等，TA朋友的朋友同样可能在手机、平板电脑或普通电脑的另一种软件上看到这个信息，甚至信息被电视媒体或平面媒体发现并造成更大范围的传播，更多TA不认识的电视或平面媒体通过扫描报道时的二维码又找到TA的微博，这一切可能在瞬间完成。这个小场景告诉我们人和信息是在智能终端（Phone、Pad、Desktop、TV等设备）、软件终端（浏览器、SNS、IM等应用）和传统终端（电视、广播、平面等媒体）间交叉流动的，这是一个去中心的网状结构，也是互联网的本质特性，所以跨终端不仅仅是跨越设备（device），更是跨越人机交互的场景入口（end）。
面对这种终端碎片化的潮流，前端工程师怎么办？解决方案就是基于最重要的前端开发思想渐进增强和优雅退化得出的移动优先：一是毫无疑问绝大部分用户已经或正在成为智能设备用户，我们要为80%的目标用户服务；二是专注于核心业务需求，人的本性、业务本质和商业模式本质基本上不会随着终端改变而改变，所以相同业务在手机、平板、桌面和电视上呈现的本质和商业模式不会有不同，小屏幕终端是我们重新思考业务本质和核心人机交互流程的机会，其挖掘出的本质会改变其他终端；三是针对未来人机交互，现在移动设备引领人机交互的变革潮流，通过必备特性虚拟或增强现实，并逐步引入到桌面和电视等设备中。所以，选择哪个具体技术方案，是响应式Web，还是服务端响应式Web（URL不变，通过服务端在不同设备展现不同模板），还是多个URL Web（不同的终端，不同的URL），还是Hybrid应用（Native和Web混合使用，比如iOS App Store一直就是引用壳里面套个网站），还是Native应用，是依据业务本质、人性需求和人机环境趋势来综合判断的。由于Web的本质特性就是低成本跨平台但对设备先进特性支持不够，而Native应用能够充分利用硬件先进特性但受限于系统平台，导致开发者没有发布能力，所以大多数情况下，可以把跨终端Web作为默认选择。
在跨终端的时代，渐进增强和优雅退化依旧是最重要的前端开发思想，但前端工程师们不能像以前一样仅仅固守在Web上，Web和客户端应用的融合已经成为必然，Web从页面（page）到应用（application）反映了人机交互革命带来新的体验趋势，客户端和动画开发成为了前端工程师的基本功。移动优先的跨终端解决方案核心是一套数据有多个高品质低成本展现方式，这促使前后端分离成为必需，前端工程师不仅仅要关心客户端环境也要关心服务端环境，所以GBS需要升级到GTE（Graded Target Environments，分级目标环境），工程师更关注端到端的数据接口约定（比如正文中的IF就是这种思想下的一种实践方案），这会彻底改变前端的开发方式、架构和发布机制，也会导致前端团队快速膨胀直到前后端比率趋于一致。这是一个巨大的挑战，也是一个前所未有的机会，更是时势的要求。我把这个时代叫作前端工程师2.0。
这篇推荐序被我拖延了很久很久，结尾之时恰逢鬼道同学入职天猫一周年，就拿老乔的话来zhuangbility一下：“你如果出色地完成了某件事，那你应该再做一些其他的精彩事儿。不要在前一件事上徘徊太久，想想接下来该做什么。”这应该是最好的礼物之一。
