How does Financial Times achieve Web App Offline Function?

More recently, in Orlando FL, Andrew Betts to share them in the Financial Times on the offline function design principles:

1. Rely on various forms of storage in all kinds of data on the client: Cookies, localStorage, IndexedDB, AppCache and Files API, and each local storage solutions are independent of each other. Try to reduce make the saved content clear such as Javascript, CSS and HTML. As long as it is able to support a Web App startup enough behind to complete work to the AJAX and eval, save them in localStorage (flippingbook).

2. Download the latest articles from the subscription list (using JSON format), when the entire content downloaded successfully, clear the database of existing content, and then calls the latest download articles stored in the database. Finally, using jQuery call a template to display the title of the article in the subscription list.

3. Whenever the update of the list of articles, each entry will be re-downloaded, it can be part of the content is stored in the browser cache, can quickly fill AppCache. At the same time can use the JavaScript API monitor AppCache available space and fine specify what needs to be re-downloaded.

4. Completely separated the App main function module and the Web page, for example, flip forward and backward functionality. In this way, the application starts only need to load these modules based on the contents of the cache line. Those who require frequent use of the cache must be saved in localStorage.

5. Mozilla proposed change AppCache format JSON and load it via the network control, while Google is developing a completely new API in JavaScript to create a navigation controller, this controller set the priority of different cache loaded, you You can also custom in which the cache loaded Rules.

6. IE and FireFox managed in different ways AppCache (pdf to flip), need to be considered in the design of these differences.

7. Different browsers are very different from the size of the cache, we must ensure that the article form enough space for App save articles for offline reading.

8. JavaScript uses UTF-16 encoding, each character occupies two bytes, ASCII code (each character occupies one byte) transformation, will be able to save double the space.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s