谷歌Mobile Web Specialist证书备考指南

发布 需要6分钟读完

2017年8月，谷歌发布了专门针对web开发人员的Mobile Web Specialist考试，考试形式为四个小时的在线编程和结尾的在线面试，考试费用为99美元，考试通过后会在45天内收到电子证书。详细考试信息和报名地址见Google Mobile Web Specialist考试官网。

官方文档介绍此考试是为具有3至4年前端开发经验的程序员设计的，谷歌官方为考试内容划定了复习范围。本文主要参考资料为考试官网的Study Guide。

目录

  1. 网站布局和样式基础
  2. 前端网络
  3. 无障碍
  4. 渐进式web应用
  5. 性能优化与缓存
  6. 测试与调试
  7. ES2015概念和语法
  8. 移动网页表单

一、网站布局和样式基础

无论使用何种设备，用户都希望看到具有响应式和视觉吸引力的网站。网络应用的布局和样式必须响应现有的显示，并且持续提供直观的功能。你将按照要求使用HTML、CSS和JavaScript来建造包括以下几项的响应式布局和样式：

  1. 使用原生JavaScript来访问和操作DOM元素；
  2. 恰当的document type声明和viewpoint标签；
  3. 响应式的CSS grid布局；
  4. 使用媒体查询来提供不同屏幕尺寸的流体断点；
  5. 使用多媒体标签来显示视频或播放音频；
  6. 通过移动设备尺寸和分辨率进行调整的响应式图片；
  7. 任意平台上的包含大量点击目标的触摸和鼠标事件；

学习资料（官方）：

  1. responsive Web Design
  2. A Complete Guide to Flexbox
  3. Using medea queries
  4. Video and audio content
  5. Responsive Images by Google
  6. Supporting both TouchEvent and MouseEvent
  7. Touch events

二、前端网络

由于用户互动是基于可信赖的高效网络请求，你将被要求证明自己会通过以下方式使用JavaScript来建立可靠的前端网络协议：

  1. 使用fetch()请求数据；
  2. 检查响应参数，并将数据解析成可用的格式；
  3. 将响应的数据渲染成页面；
  4. 使用method和body参数配置POST请求到数据库；
  5. 根据服务器的响应头，使用正确配置的跨域资源分享协议（CORS）的fetch请求；
  6. 使用promise链来处理fetch()请求错误；
  7. 使用调试和开发者工具诊断网络问题；

学习资料（官方）：

  1. Introduction to fetch()
  2. Using Fetch()
  3. David Walsh’s blog on fetch
  4. Jake Archibald’s blog on fetch
  5. JavaScrip Promise: an Introduction
  6. HTTP access control(CORS)

三、无障碍

网页和网络应用应该为所有人提供无障碍访问，包括那些具有视力、行动、听力和认知障碍的人。使用HTML、CSS、Javascript，你会被要求展示你可以使用如下方式在你的网页和应用中做出无障碍访问的最佳实践：

  1. 使用具有逻辑的tab顺序来进行tab导航
  2. 使用跳过导航链接绕过导航栏和旁边
  3. 避免页面上隐藏的内容阻挡导航栏
  4. 使用能够提供页面逻辑结构的头部标签
  5. 使用可视化内容的替代文本，比如alt,
  6. 在所有元素上应用对比色，并遵守最佳的无障碍实践
  7. 有紧急信息时候使用aria-live来及时提醒用户
  8. 使用语义标记在适当时保持内容和表示分离

学习资料（官方）：

  1. Web Fundamentals – Accessibility
  2. Web Accessibility
  3. Mobile Accessibility
  4. Using tabindex
  5. Focus
  6. Skip Navigation Links
  7. ARIA

四、渐进式web应用

用户希望原生应用程序可脱机使用，并提供可以从他们的主页启动的功能丰富的体验。 你会被要求显示你可以通过以下方式使用service worker(服务工作线程)，HTML和JavaScript构建类似于渐进式Web应用程序的功能原生应用程序：

  1. 开发一个可以离线使用的web应用，并通过service worker来缓存元素
  2. 存储默认显示方向、主题颜色、显示图标（添加到主屏幕）和Web应用程序清单中的启动画面（或使用元标记）
  3. 将关键应用程序功能和UI分离到可以独立于内容加载的应用程序shell中

学习资料（官方）：

  1. Progressive Web Apps
  2. Progressive Web Apps Training
  3. Web Fundamentals - The App Shell Model
  4. Your First Progressive Web App
  5. Using Service Workers

五、性能优化与缓存

尽管网络信号很差甚至缺失，用户仍然要求移动页面能够瞬间加载。因为很多用户都会面临高昂的流量费用，你必须减小应用的数据流量从而尽可能加快网页加载时间。你将被要求证明自己可以通过如下方式来处理网页性能审计的问题来减小页面加载时间以及维护一个响应式的用户体验。

  1. 使用专用的Web worker来防止主线程阻塞
  2. 通过以下方式来提供一个优化过的关键渲染路径：
    1. 使用压缩或缩小过的JavaScript、HTML和CSS来减少渲染阻塞
    2. 在必要的页面使用行内CSS样式，按需求使用异步的方式加载额外的样式
    3. 仅在必要的时候使用行内JavaScript来初始化页面
    4. 有秩序的加载其余关键性资源，提前下载全部关键性资产来缩短关键路径长度
    5. 减少DOM层级来最小化浏览器布局/回流时间
    6. 使用浏览器的开发者工具来诊断网页在移动设备上的性能问题
    7. 当资源准备就绪时，提前获取可加载的文件，为有意义的互动腾出时间
    8. 提供适合Web应用程序数据持久性的客户端存储需求
      • session状态管理
      • 基于其加载时间和离线功能的影响来管理文件缓存
      • 使用IndexedDB 来储存离线模式下的动态内容

学习资料（官方）：

  1. Offline Web Applications by Google
  2. Web Fundamentals - Performance
  3. The Offline Cookbook
  4. Cache -MDN
  5. Storage
  6. Local Storage And How To Use It On Websites
  7. IndexedDB API
  8. Get Started with Analyzing Network Performance in Chrome DevTools

六、测试与调试

开发人员通常在高度迭代的部署环境中工作，依靠广泛的测试和调试以保持功能和代码完整性。你将会被要求证明你可以通过以下方法验证预期的行为并诊断常见的web应用程序bug：

  1. 编写单元测试，首先验证一个功能的预期行为，然后迭代修改其代码，直到它通过这些测试
  2. 在复杂的功能中设置断点来确定与预期功能不符合的地方
  3. 使用console logs来输出相关的调试信息
  4. 根据用户报告的问题复现并修复bug

学习资料（官方）：

  1. Get Started with Debugging JavaScript in Chrome DevTools
  2. Diagnose and Log to Console
  3. Debugging Service Workers

七、ES2015概念和语法

Web开发人员必须掌握让代码更简单更易读的JavaScript最新的功能。 因为可以使用polyfill来实现在不受支持的浏览器中编写 JavaScript ES2015的代码，开发人员开始使用新的功能和语法具有了更强大的动机。 您将被要求通过以下方式表明您理解并可以编写ES2015JavaScript代码：

  1. 使用promise语法来创建异步功能并集成优雅的错误处理功能
  2. 使用let、var、const来建立具有块级、函数级和一成不变的变量
  3. 包含字符串插值和多行字符串的字符串文字
  4. 使用箭头函数来创建同步功能并使用无限制的this
  5. 使用函数默认参数来为没有参数的函数初始化默认值
  6. 在each函数中使用可以遍历任意对象的for…of循环
  7. 使用允许任意键值对的maps，包括可循环且包含非字符串键值的键值对
  8. 仅设置唯一的、可降低性能的迭代元素

学习资料（官方）：

  1. JavaScript Promises: an Introduction
  2. Promise
  3. Tempate literals
  4. Arrow Functions
  5. Default parameters
  6. For…of
  7. Map
  8. set

八、移动网页表单

填写在线表单，尤其是在移动设备上，可能很困难。 为了改善用户体验，您将被要求证明您可以通过以下方式使用基本的HTML5，JavaScript和HTML5 Constraint Validation API，来设计高效且安全的HTML Web表单：

  1. 与input相关的合适的label标签
  2. 设置恰当的input属性，包括type、name和autocomplete
  3. 为移动表单设置的具有大面积触摸目标的input
  4. 使用datalist元素来为用户提供具有提示内容的input
  5. input和DOM元素的前端验证，包括：
    • 使用input的伪类来实时的验证表单错误
    • 提交前的表单验证（Constraint Validation API）

学习资料（官方）：

  1. Create Amazing Forms
  2. Constraint Validation
  3. Client-Side Form Validation with HTML5
  4. Data form validation
  5. HTML Forms