Google Web App开发指南第四章：构建优秀的Web Apps（二）

此瑜非彼鱼

提供离线功能，提升性能
开发者应该提供离线应用功能，并且通过在本地缓存应用数据来提升性能，在用户联网的时候只解析需要的数据。
要提升性能并提供离线功能，可以按如下方式去做：
使用应用缓存来确保浏览器将必须的应用代码进行了缓存，比如HTML、CSS和Javascript。
使用web存储来保存少量需要快速获取的信息，或者将这些信息保存在cookies中。
将组织好的数据存储一个web数据库，比如IndexedDB，它能让你存储大量数据，并且能进行高效查询和遍历。
在这方面做的很好的WEB APps：
AMAZON KINDLE CLOUD READER – 使用 AppCache， 本地存储以及WebSQL可以在 iOS上的以及桌面版的浏览器中工作。
SPRINGPAD - 使用 AppCache， 本地存储以及WebSQL，提供了一个不论是否在线都能使用的应用。
THE NEW YORK TIMES WEB APP – 使用 AppCache以及WebSQL，提供了一个再iOS以及桌面浏览器上都能工作的离线应用。

Figure 4.4 – 让数据保存在手边以提升性能！
有用的资源：
文章
HTML5ROCKS 离线功能概览
“离线功能”之内涵及值得关注的点
库 & 框架
MANIFESTR – 一个用于创建AppCache manifest file的书签。
LAWNCHAIR -一个提供了轻量级的、自适应、优雅的持久性解决方案的库。
提供数据自动同步
Web apps让用户可以将数据保存在云中。用户应该能够确信他们的工作是安全的，他们不必去考虑他们是何时何地保存的数据，或者他们手上正在使用的是否是最新版本的数据。Web apps让用户可以集中于工作而不必担心工作是否安全。
为了提供好的体验，WEB APPS 需要：
在本地保存数据并经常和云端进行同步，这样人们就不必担心网络连接或者他们离开应用以后数据会发生什么
在用户第二次登陆时让用户处于他们上次离开时的状态，让他们能很快捡起上次遗留的工作，更有效率
有用的资源：
手册
使用HTML5离线功能工作
应用缓存简介
使用INDEXEDDB

Figure 4.5 – 使用AppCache 以及数据一致性技术来加强易用性，即使是在离线情况下！
通过提示让用户知道更充分的信息
客户端应用通过状态消息、进度条、对话框通知和其他方法来让用户知道更充分的信息，了解应用目前在做什么及其进度； web apps也应用做到这一点。
要让用户保持信息充分，了解应用在做什么及其进度，可以按如下方式去做：
显示加载提示，这样用户就能明白有一个任务正在进行中。
使用HTML提醒来提供一些用户可能想要实时知道的重要信息。
使用HTML5的进度元素来显示进度。
显示模态对话框（modal dialogs）来让用户提供更为具体的信息或者应用完成了需要进行的处理以后再让用户继续前进。
动画动作可以模拟现实世界中的一些动作，让用户更容易理解当前过程。
在这方面做的很好的WEB APPS：
GMAIL – 提供新邮件提醒
ASTRID – 为即将到来的任务提供提醒
TWEETDECK –当你所跟的tweeter有新消息时提醒你
有用的资源：
文章
CHROMIUM的项目 – 桌面提醒
现代Web设计中的模态对话框
WEB 设计中的Modal以及Modelessboxes
手册
使用NOTIFICATIONS API
库 & 框架
BOOTSTRAP MODAL –根据传统的模态js插件所作的简化
JQUERY UI - jQuery UI 提供了一套综合性的核心交互插件、UI插件以及视觉效果
允许使用拖放来上传或者下载文件
如果你的应用与处理文件相关，那么你应该让用户很容易完成相关操作。永远不应该让用户去猜测他们的文件是否已经下载下来了、文件下载到何处，也不应该让用户想要分享文件的时候感觉到困难。
在处理文件时：
在文件输入类型中使用多属性或目录属性让用户可以上传多个文件或者整个文件夹。
使用拖放，让用户可以从自己的计算机拖动文件到你的应用程序，反之亦然。
通过使用File System APIs来在用户机器本地来存储或处理文件。
在这方面做的很好的WEB APPS：
GMAIL – 允许你将附件拖入邮件消息中。
GOOGLE DOCS – 允许你通过将文件拖入浏览器来上传文件。
BOX.NET – 通过将文件拖入上载部件让上传文件很容易。
APPMATOR – 可以通将文件拖出浏览器来下载你刚刚创建的Chrome Web Store app package file，让下载十分容易。

Figure 4.6 – 提供多文件上传。
有用的资源：
手册
NATIVE HTML5 DRAG & DROP TUTORIAL
在Javascript中读取本地文件
使用FILE SYSTEM APIS
将性能也看做是一个特性
没有什么比人们的时间更宝贵了。用户期待客户端应用加载快，响应快。Web apps同样需要达到这一指标。
要设计速度更快的应用，web apps应该：
先加载应用，再加载用户数据。通过使用AppCache在本地保存你的应用代码，你可以减少启动应用时所需要的网络请求。因为应用通过缓存保存在设备上了，它就能立刻启动了。在应用需要解析任何数据的时候，都给出加载提示。
遵循网站及应用的快速响应的设计原则。你的web app仍然是基于web的，所以你仍然需要遵循网站设计时的一些快速响应的设计原则。
有用的资源：
文章
浏览器是如何工作的：现代浏览器的背后
STEVE SOUDERS 推崇的快速加载网站的14 条规则
使用HTML5构建快速响应网站应遵循的惯例
手册
提升你的HTML5 APP的性能
通过导航计时测量页面加载速度
性能
书
STEVE SOUDERS 写的高性能WEB SITES
更快的WEB SITES:Web开发者应该遵循的惯例



来源: webapptrend.com