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

最新推荐文章于 2022-04-26 11:25:09 发布

weistar103

最新推荐文章于 2022-04-26 11:25:09 发布

阅读量162

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/weistar103/article/details/84427225

版权

HTML5 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

文章源自：http://www.angularjs.cn/A02Y

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

最近，在Orlando FL上，Andrew Betts分享了他们在Financial Times上离线功能的一些设计原则：

依靠多种形式的存储在客户端上的各类数据：Cookies、 localStorage、IndexedDB、AppCache和Files API，并且每个本地存储解决方案之间是相互独立的。尽量精简Appcache中保存的内容，例如最基本的Javascript、CSS和HTML，只要它能够支持Web App启动就足够了，后面的工作就交给AJAX和 eval来完成，把它们保存在localStorage中。
从订阅列表中下载最新的文章（使用JSON格式），当整个内容下载成功后，清空数据库中已有的内容，然后调用将最新下载的文章存入数据库。最后使用jQuery并调用一个模板将文章的标题显示在订阅列表中。
每当更新文章列表时，其中的每个条目都会被重新下载，所以可以将部分内容存于浏览器缓存中，这样可以快速填充AppCache。同时可以利用JavaScript API监控AppCache的可用空间并精细的指定哪些内容是需要被重新下载的。
将App的主要功能模块与Web页面完全分离，例如那些翻页、前进和后退的功能。这样，应用启动时只需要在这些模块的基础上加载内容的缓存就行了。而那些需要频繁使用的缓存一定要保存在localStorage中。
Mozilla建议将 AppCache的格式更改为JSON并通过网络控制其加载，而Google正在开发一个全新的API，能够在JavaScript 中创建一个导航控制器，此控制器设定不同缓存加载的优先级，你也可以在其中自定义缓存加载规则。
IE和FireFox以不同的方式管理 AppCache，在设计时需要考虑这些差异。
不同浏览器之间对缓存的大小有很大的不同，一定要确保文章表单有足够的空间供App保存离线阅读的文章。
JavaScript使用UTF-16编码，其每个字符占两个字节，而如果用ASCII码（每个字符占一个字节）转化，将能够节省一倍的空间。