品玩

科技创新者的每日必读

打开APP
关闭
Web App

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

Andrew Betts分享金融时报Web App离线功能的设计原则,其核心是精简并精细控制缓存资源的存储和更新。

陈粲然 Ray

发布于 2013年4月12日

我曾在《让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码(每个字符占一个字节)转化,将能够节省一倍的空间。

下载品玩App,比99.9%的人更先知道关于「Web App」的新故事

下载品玩App

比99.9%的人更先知道关于「Web App」的新故事

iOS版本 Android版本
立即下载
陈粲然 Ray

不揣测动机、不质疑资格、不定义身份、不混淆概念、诚恳承认错误,做良性讨论。

取消 发布
AI阅读助手
以下有两点提示,请您注意:
1. 请避免输入违反公序良俗、不安全或敏感的内容,模型可能无法回答不合适的问题。
2. 我们致力于提供高质量的大模型问答服务,但无法保证回答的准确性、时效性、全面性或适用性。在使用本服务时,您需要自行判断并承担风险;
感谢您的理解与配合
该功能目前正处于内测阶段,尚未对所有用户开放。如果您想快人一步体验产品的新功能,欢迎点击下面的按钮申请参与内测 申请内测