《金融时报》是如何做Web App离线功能的?

ft-html5-iphone-ipad-app

我曾在《让Web App和Native App的无聊之争消停会儿吧,看看那些明智的Web技术解决方案》中讲到过第一个选择纯粹Web App路线的主流新闻媒体——Financial Times(金融时报)。FT产品主管曾说过,开发Web面临几个主要挑战:1. 目前Web App领域的开发文档、测试工具都很稀缺,需要自己开发测试工具来测试性能;2. 不同的浏览器性能差别很大,使得图片和视频呈现效果不一且可能出现一些Bug;3. 许多用户都是首次接触Web App,需要为用户做好使用指南;4. 做好离线功能(支持预览、离线访问、内容的收藏、下载等)。

最近,在Orlando FL举办的Breaking Development上,Andrew Betts分享了他们在Financial Times上离线功能的一些设计原则

1. 依靠多种形式的存储在客户端上的各类数据:Cookies、 localStorage、IndexedDB、AppCache和Files API,并且每个本地存储解决方案之间是相互独立的。尽量精简Appcache中保存的内容,例如最基本的Javascript、CSS和HTML,只要它能够支持Web App启动就足够了,后面的工作就交给AJAX和 eval来完成,把它们保存在localStorage中。

2. 从订阅列表中下载最新的文章(使用JSON格式),当整个内容下载成功后,清空数据库中已有的内容,然后调用将最新下载的文章存入数据库。最后使用jQuery并调用一个模板将文章的标题显示在订阅列表中。

3. 每当更新文章列表时,其中的每个条目都会被重新下载,所以可以将部分内容存于浏览器缓存中,这样可以快速填充AppCache。同时可以利用JavaScript API监控AppCache的可用空间并精细的指定哪些内容是需要被重新下载的。

4. 将App的主要功能模块与Web页面完全分离,例如那些翻页、前进和后退的功能。这样,应用启动时只需要在这些模块的基础上加载内容的缓存就行了。而那些需要频繁使用的缓存一定要保存在localStorage中。

5. Mozilla建议将 AppCache的格式更改为JSON并通过网络控制其加载,而Google正在开发一个全新的API,能够在JavaScript 中创建一个导航控制器,此控制器设定不同缓存加载的优先级,你也可以在其中自定义缓存加载规则。

6. IE和FireFox以不同的方式管理 AppCache,在设计时需要考虑这些差异。

7.不同浏览器之间对缓存的大小有很大的不同,一定要确保文章表单有足够的空间供App保存离线阅读的文章。

8.JavaScript使用UTF-16编码,其每个字符占两个字节,而如果用ASCII码(每个字符占一个字节)转化,将能够节省一倍的空间。

订阅更多文章