HTML5 Offline Cache Management Library

First, HTML5 off-line cache technology

Support for offline caching is one of the key points in HTML5, where offline caching allows users to run their applications properly even in the case of a disconnected network. The traditional way to store data locally is localstorage,sessionstorage and cookies. But these traditional ways have deadly drawbacks. First of all, these traditional storage methods have limited maximum space for use, up to 5M, and second, they have limited ability to handle large-scale structured data. Given the limitations of traditional approaches, HTML5 proposes three new offline caching solutions: The Web sql,indexeddb and the file System.

Where Web SQL is no longer included in the HMLT5 specification, it becomes a separate specification, and the SQL used by Web SQL is SQLite. Because of the inability to unify the SQL language implemented by each browser vendor, Web SQL has been deprecated and replaced by INDEXEDDB, but many browsers currently support Web SQL, and Web SQL is the most efficient compared to the INDEXEDDB and File system. The fastest access and the best stability.

INDEXEDDB also supports storing large numbers of objects locally and retrieving data using robust data access mechanisms. However, there are few browsers supporting Indexedb, and the specification is still being updated, and no unified standard has been formed.

In the offline environment, although webdatabase can store and effectively manage and maintain the client's data collection, but still can not meet the storage of large pieces of data files and a variety of different format files to save, so we need an offline file management system to maintain our work, The HTML5-based file System API acts as this role. The file system is ideal for a large number of storage media files. For the mobile phone, the implementation of different browsers, some browser is to write files to ROM, such as QQ Mobile browser, some browser is to write files to the SD card, such as Baidu Browser. Therefore, the space available in the file system is theoretically very large.

Second, the mobile browser support offline caching situation

The method used to test the write data is Key-value, where value is about 150k.

Since the available space capacity of the Web Sql,indexeddb and file system is related to the mobile phone temporary storage, the test data is related to the status of the mobile phone model and the browser itself, so the above data is for reference only. The testing process also found that some browsers HTML5 run points, although the score has been obtained, but the actual does not fully achieve the relevant standards.

Test results show that the mobile browser to the Web sql,indexeddb and file system support is uneven, in addition to chrome support all three standards, other mobile browser support is not complete, for developers, if you want to use these technologies, you must first explore The browser supports this standard, and only the relevant APIs can be used if supported. In order for developers to transparently use the underlying offline cache space, the user does not have to go to the measure up browser to support which or which standards, now the author developed a HTML5 offline cache management library, users can call the relevant interface like Localstorage call to obtain data, Provide maximum convenience to the developer.

Third, the design of HTML5 offline cache management library 1, interface design

In the Web front-end development process, the developer Localstorage interface using relatively familiar, so HTML5 offline cache management Library adopts class Localstorage interface, asynchronous call mode.

Set (Key,value) value to Cache.setitem (key, value, SUC, err) key:string type value: String type suc: Set a successful callback function err: Set the failed callback function to get the value of key value Cache.getitem (key, suc, err) key: String type suc: Gets the successful callback function err: Gets the failed callback function to delete the key value for keys Cache.removeitem (key, suc, err) key: String type suc: Delete successful callback function ERR: Delete Failed callback function clear all records cache.clear (suc, err) suc: Clears all record successful callback functions err: Clears all failed callback functions for records

2. Overall design

The HTML5 offline cache management library takes precedence over the policy, with a priority of Web SQL > File system> indexedDB >localstorage. That is, JS will automatically detect the browser, if the discovery of support for Web SQL, the use of Web SQL, if not supported, then detect the file system, if supported will use the file system, and so on.

As for why the priority is set to: Web SQL > File system> indexedDB >localstorage, mainly based on the following considerations:

1. Although Web SQL is an obsolete standard, it is currently the most widely supported technology, with the most efficient, fastest, and most stable, as a first choice.
2. The external interface provided by this library is the form of key-value pairs, and the file system exists in the form of files, in order to meet the requirements of the interface needs encapsulation and parsing, resulting in a decrease in efficiency, it is the priority of the web after the SQL, but it is available to use the largest space, All put it before the INDEXEDDB.
3. INDEXEDDB will replace Web SQL, but the specification of INDEXEDDB in the continuous update, is not fully formed a final standard, which is reflected in the change of some interfaces (this cache library is compatible), and support Indexeddb browser is very small, and support is not very good, So put it only before localstorage.
4. The Localstorage storage space is the smallest and most widely supported, so it is the most insured backup solution.

In order to ensure that the external supply is a unified interface, the interface incoming data format is the form of the key-value pair, but because the file system itself is the way to store data in files, it is not very suitable for processing key-value such data.

The data storage method used in this library is to save Key-value in JSON format, convert it to a string by json.stringify, and save it to a file, read it, and parse the data in the file into JSON format by Json.parse.

In order to improve the access efficiency of file system, two optimization strategies are adopted. First of all the data stored in several files, according to the key to establish a hash map, each time to read the data, directly from the corresponding file, this way compared to the way to a file, the advantage is that the file is small, so the amount of data read each time small, and then take the cache of the policy, initialization, the file read into memory, The data is then fetched directly from the memory every time the data is read, so the efficiency is greatly improved when data is changed, and the data in the cache is flush into the file when changing it.

3. Compatibility issues

As the HTML5 related standards in the continuous update, the API with the standard follow-up, but also some changes, the following are some of the larger changes.

File System

The Blobbuilder constructor is enabled and the Blob constructor should be used, for example:

Old invocation Method: var New Blobbuilder ();                        Bb.append (Json.stringify (T.cache[name)); Write.write (Bb.getblob ('text/plain' ) ) ; new call mode:varnew"text/plain"}); Write.write ( BB);

Web SQL

The Setversion () method was discarded, which resulted in some changes in the process of creating the database and the Createobjectstore, and a number of new callback methods.

//Notice the difference between the previous method, where the second parameter is no longer a description, but the database version numbervarRequest = Indexeddb.open ('MyDB',1); Request.onsuccess= function (e) {//database open Successful callbackDb.db = E.target.result;//we use Db.db to store indexdb.callback ();};//triggered when a database or database upgrade is opened for the first time, success or error is triggered as appropriate after completionrequest.onupgradeneeded =function (e) {db.db=E.target.result; vardb =db.db; //Createobjectstore, which was previously required to be executed at setversion.     if(! DB.db.objectStoreNames.contains ('Notes')){           //Create object Store        varstore = Db.createobjectstore ('Notes', {keypath:'ID', AutoIncrement:true}) Store.createindex ('Updated','Updated', {unique:false }); }};request.onerror= function (e) {//Database open Error callbackConsole.log (e);}

Iv. Test 1. Test instructions

The test page using the HTML5 offline cache library is as follows:

How to use:

1. Test SetItem

Main test SetItem interface, set Key-value.

2. Test GetItem

The main test GetItem interface, according to the user input key, click "OK", query the corresponding record, if the query does not correspond to the record, the Value box is empty; If the query to the corresponding record, the value box displays the results of the query.

3. Test RemoveItem

The main test RemoveItem interface, the user input key, click "OK" after deleting the key corresponding record.

4. Test clear

Main test Clear interface, click "OK", delete all the records.

5. Automated Testing

Writes Key-value data consecutively, where key is "1", "2", "3" increments, and value is a fixed string of 160.6k. Click "Start" to write the Key-value data continuously until you click "End" or the offline cache is full; Click "End" to stop writing data automatically. If you repeat the start operation, you need to refresh the page.

2. Test results

Test results for some mobile browsers using the HTML5 offline cache management library are as follows:

3. Source Files

HTML5 test links for offline cache management libraries:

Http://3gimg.qq.com/cube/cache/index-1.0.html

V. Synchronization plug-in 1. Instructions for use

Since the front-end developers are more accustomed to using the synchronization API, and the Web Sql,indexeddb and file system provide asynchronous APIs, for the convenience of developers, the author for the "HTML5 offline cache Management Library" provides a synchronization plug-in, convenient for developers to call the relevant API, for reference.

Description of the synchronization plug-in for the HTML5 offline cache management Library:

Advantages:

(1) Convenient for developers to use the "HTML5 offline cache Management Library" for synchronization, developers can call Localstorage as a way to call the relevant interface.

(2) The caller only needs to initialize once, and after the initialization is successful, the remaining operations can be performed.

(3) Because the developer calls the interface is actually from the memory to obtain data, it is faster, flush and other operations let the background processing.

Disadvantages:

(1) Off-line caching methods Filesystem,indexdb and WEBSQL systems provide APIs that are asynchronous, and in order to encapsulate the interface to provide synchronous APIs, there must be a loss of efficiency. Because all the data in the offline buffer library will be loaded at startup, the time to get the data will be longer, negligible for a small amount of data, and if the amount of data is particularly large, the plug-in will significantly slow down the loading speed.

(2) The data is all copied into memory and consumes some of the browser memory.

Suggestions:

The plug-in in order to facilitate the use of offline cache library, for small data volume is very convenient, for big data, it is not recommended to use the plug-in, it is recommended to asynchronously call the offline cache library provides the interface API.

Note: The normal use of the library must ensure that Syncache initialization is successful.

2. Source Files

HTML5 Sync plugin link for offline cache management library:

Http://3gimg.qq.com/cube/cache/cache_plugin_sync-1.0.js

Currently, the "mobile phone cool Station" iphone version uses the "HTML5 offline cache Management Library" and "Synchronization plug-in", related links are as follows:

Http://app.html5.qq.com/ip/index

Vi. Links

All relevant links are as follows:

"HTML5 offline cache Management Library":

Http://3gimg.qq.com/cube/cache/cache-1.0.js

Http://3gimg.qq.com/cube/cache/cache-1.0.min.js

"Sync Plugin":

Http://3gimg.qq.com/cube/cache/cache_plugin_sync-1.0.js

Http://3gimg.qq.com/cube/cache/cache_plugin_sync-1.0.min.js

Demo page:

Http://3gimg.qq.com/cube/cache/index-1.0.html

Online app/"Mobile Cool Station" iphone version:

Http://app.html5.qq.com/ip/index

Original address: http://cube.qq.com/?p=779

HTML5 Offline Cache Management Library