Chrome 开发者峰会 - 移动设备摘要

Chrome 开发者峰会已于几周前结束。这是本次活动发布的一系列报告中的第一份。注重移动和跨设备开发 下面我们就来开始吧!

《最佳移动 Web 应用用户体验模式》(作者:Paul Kinlan)

在对排名前 1000 的网站的移动设备适合性进行分析后,我们发现了一些问题所在:53% 的网站仍然仅提供纯桌面设备体验,82% 的网站在移动设备上存在互动问题,64% 的网站包含的文本会导致用户无法阅读。

快捷点击可显著改善您的移动网络体验

  • 始终定义视口
  • 使内容符合视口大小
  • 确保字体大小在可读级别
  • 限制网页字体的使用
  • 适当调整点按目标的大小和间距
  • 使用输入元素的语义类型

PageSpeed Insights 最近推出了一项用户体验分析,用于确定您的网站是否适合在移动设备上浏览。它可帮助您找出网站在移动设备上的用户体验方面的常见问题。试试看!

幻灯片:移动 Web 应用的最佳用户体验模式

Alice Boxhall 提供的多设备辅助功能

用户在访问您的网站和服务时将会用到各式各样的设备,这些设备对无障碍要求也各有不同。使用正确的语义元素和正确的 ARIA 角色有助于浏览器和辅助技术更好地理解您的网页。

幻灯片:多设备无障碍功能

了解和解决无障碍问题的主要方法

  • 确保提供良好的纯键盘用户体验
  • 利用正确的元素选择和 ARIA 表达界面的语义
  • 请使用桌面设备上的 ChromeVox 和 Android 设备上的 TalkBack 进行测试。
  • 试用无障碍开发者工具的 Chrome 扩展程序
  • 越来越多的受众越来越多样化,这就进一步强化了网站易于访问的需求

使用 Chrome WebView 构建移动应用(作者:Matt Guant)

我们都知道开发者在过去构建 WebView 时会遇到以下问题:HTML5 功能有限、没有调试工具、构建工具。随着 Android 4.4 (KitKat) 中由 Chromium 提供支持的 WebView 的推出,开发者现在可以使用大量新工具来使用 WebView 构建出色的原生应用。

WebView 使用您用于 Chrome 的相同工具,支持全面的远程调试。您还可以使用 Grunt 执行可信的 Web 开发工作流,并通过 Gradle 将其集成到您的原生堆栈工具中。进一步合并世界后,有一种巧妙的技巧,可以使用 Chrome 开发者工具通过 JavaScript 测试原生代码。

幻灯片:使用 Chrome WebView 构建移动应用

有效的 WebView 开发要点

  • 新功能并不重要,而是现在可用于加速工作流程的工具
  • 不要尝试模拟原生界面。但一定要去掉一些“网络内容”的指示。
  • 适时使用功能的原生实现。也就是说,对于大型文件,请使用 DownloadManager 而不是 XHR。

《针对跨设备世界优化工作流程》(Matt Gaunt)

如果我们必须针对桌面设备、移动设备、平板电脑、穿戴式设备和其他外形规格的设备开发应用,您该如何优化工作流程来减轻您的生活压力?有一种可靠的多设备方法可以通过 LiveRefresh、Grunt、Yeoman 和新发布的 Mini Mobile Device Lab 实现快速迭代。最后,如果您没有要测试的物理硬件,有些提供商可以通过云提供该硬件。

幻灯片:针对跨设备环境优化工作流程

要点

  • 我们需要满足的设备数量只会增加
  • 借助 GruntYeoman 构建合适的工作流
  • 借助 Mini Mobile Device Lab 简化跨浏览器和跨设备测试
  • 使用 Chrome 开发者工具模拟器、Stock Emulator、基于云的模拟器(如 SaucelabsBrowserstackappexperience)以及第三方模拟器 Genymotion,明智地选择模拟
  • 移动测试意味着,您不仅可以使用 Wi-Fi 连接进行测试,还可以使用代理模拟较慢的网速

网络连接:可选,由 Jake Archibald 提供

我们从这场演讲中了解到了很多内容:Jake 做演示时不穿鞋;Business Kinlan 即将发布一本新书;浏览器供应商非常重视离线功能,您很快将可以使用一些工具,帮助您打造在离线状态下也能获得良好体验的出色体验。

ServiceWorker 将为我们提供所需的灵活性,让我们能够轻松构建引人注目的离线优先体验,而不会遭受 AppCache 造成的痛苦。您甚至可以使用 Polyfill 试用该 API

幻灯片:网络连接:可选

我们的 ServiceWorker 闪亮登场

  • 在新一代的渐进式增强中,我们将网络视为潜在的增强功能
  • ServiceWorker 可让您对网络请求进行可调试、可脚本的全面控制
  • 如果提供离线体验,不要等到网络出现故障后再展示,因为这可能需要很长时间