HTML5 collection of offline storage problems

HTML5 offline storage uses a manifest file to indicate which files need to be stored, using the

To introduce a manifest file, the path of this file can be relative or absolute, if you have a lot of Web applications, and want to centrally manage manifest files, then the static file server is a good choice.

For manifest files, requirements: The mime-type of the file must be of type text/cache-manifest. If you are a Java project, configure the request suffix manifest format in your Web. xml:

[HTML] Manifest Text/cache-manifest This allows you to control the requested manifest file format to Text/cache-manifest.

Manifest file Format:

[HTML] Cache manifest# This sentence must be present and must be placed in the head # indicates cache entry cache:index.htmlstyle.cssimages/logo.pngscripts/main.js# the following resources must be online access network : login.php# 404.html instead of fallback:/index.php/404.html if index.php is unreachable
Where the cache does not have to exist, directly under the cache MANIFEST line directly write the files that need to be cached, the files indicated here will be cached to the browser local. The file specified under network is mandatory to be obtained through a net resource, and a failed callback scheme is indicated under fallback, such as the index.php cannot be accessed, then a 404.htm request is issued.

This allows you to complete support for offline storage in a few steps. The next thing to think about is how to update your offline storage?

When the user local network again, the local offline storage resources need to check whether the need for updates, this update process is also controlled by manifest update, updated the manifest file, The browser will automatically re-download the new manifest file and re-request the resource file the next time the page is refreshed (the third refresh replaces the local cache with the latest cache), and the request is global, that is, all files in the manifest cache list will be requested once, Instead of requesting a specific modified resource file individually, manifest does not know which file has been modified.

The fear of a global update is unnecessary because the request is still a 304 response to a resource file that has not been updated, and only the truly updated resource file is 200.

About 304 Responses:

If the client sends a conditional validation (Conditional Validation) request, the Web server may return a http/304 response, which indicates that the cache of the requested resource in the client is still valid. This means that the resource has not been modified since it was last cached. Conditional requests can be used to ensure that the client's resources are up-to-date while avoiding the performance issues associated with requesting full resources each time.

The server reads the values in both request headers to determine if the client caches the resources are up-to-date, and if so, the server returns a http/304 not modified response, but no response body. After the client receives a 304 response, the corresponding resource is read from the cache.

A conditional request is sent when the client caches the target resource but is not sure whether the cache resource is the latest version. In Fiddler, you can find the relevant request header in the headers inspector, so that you can tell if a request is a conditional request.

When a conditional request is made, the client provides a if-modified-since request header to the server with a value of the date value from the last last-modified response header returned by the server, and a If-none-match request header. Value is the value of the ETag response header that the server last returned:

Alternatively, if the server considers that the client cache resource has expired, the server returns the http/200 OK response, which is the most current content of the resource. After the client receives a 200 response, it overwrites the old cache resource with the new response body.

A conditional request can be sent only if the client has cached the corresponding resource and the resource's response header contains a last-modified or ETag. If none of the two headers exist, you must unconditionally (unconditionally) request the resource, The server must also return the full resource data.

So control the update of offline storage, need 2 steps, one is to update the resource file, the second is to update the manifest file, in particular, update the manifest file is not necessary to modify what specific content, as long as the file is arbitrarily modified, then the browser will perceive, For our resource file is usually the name is fixed, such as XXX.CSS, update content will not be updated with the file name, need to update the manifest file how to do? A good way is to update any of the # at the beginning of the comment, its purpose is only to tell the browser that the manifest file has been updated.

The above content, the update operation is the browser automatic completion. Similarly, the http://www.whatwg.org/specs/web-apps/current-work/defines an API specification for offline storage: #applicationcache

In addition, offline caching requires attention to the following points:

1. You can embed multiple manifest files through an IFRAME. The home page does not need to be configured with manifest so that index.html is not cached.
<iframe frameborder= "No" id= "iframe1" scrolling= "no" src= "http://pic1.codesec.net/app_attach/20141022/20141022_ 32_50752_0.html "><br></iframe>
<iframe frameborder= "No" id= "iframe2" scrolling= "no" src= "http://pic1.codesec.net/app_attach/20141022/20141022_ 32_50752_1.html "><br></iframe>
<iframe frameborder= "No" id= "iframe2" scrolling= "no" src= "http://pic1.codesec.net/app_attach/20141022/20141022_ 32_50752_2.html "><br></iframe>
2, multiple manifest files will still have space limitations, on the ipad safari can not exceed 50M. If Cache1.manfest is 26m,cache1.manfest is 27M, then 2 add up more than 50m, at this time, the first cached finish cache1, when the cache cache2, will be reported a cache capacity limit error. Cache3 Nature will not save. Only the first cache1 is saved.
3. You must reload the page for the cache update to take effect.
4, manually check the cache update. Applicationcache.update ();
5, manually perform the update.
Applicationcache.addeventlistener (Updateready, function () {
if (Confirm (the local cache has been updated, is it refreshed?) )) {
(3) Updating the local cache manually
Applicationcache.swapcache ();
Reload Screen
Location.reload ();
}
}, True);
Applicationcache.swapcache (); must be executed in Updateready.

HTML5 collection of offline storage problems