Html5 offline storage problem summary, html5 offline

Html5 offline storage problem summary, html5 offline

An important feature of HTML5 is offline storage. The so-called offline storage is to save some resource files locally, so that subsequent page reloading will use local resource files, you can continue to access web applications offline, and update and delete offline storage operations by means of updating related files or using related APIs;

HTML5 offline storage uses a manifest file to indicate which files need to be stored, as shown in

For manifest files, the requirements are as follows:The mime-type of the file must be of the text/cache-manifest type.. If you are a JAVA project, configure the request Suffix in manifest format in your web. xml file:

[Html]View plaincopy

1. <Mime-mapping>
2. <Extension> manifest </extension>
3. <Mime-type> text/cache-manifest </mime-type>
4. </Mime-mapping>

In this way, you can control the format of the requested manifest file to text/cache-manifest.

Format of the manifest file:

[Html]View plaincopy

1. CACHE MANIFEST
2. # This sentence must exist and be placed in the header
3. # Specify the cache entry
4. CACHE:
5. Index.html
6. Style.css
7. Images/logo.png
8. Scripts/main. js
9. # The following resources must be accessed online
10. NETWORK:
11. Login. php
12. # Replace index.phpwith 404.html
13. FALLBACK:
14. /Index. php/404.html

The CACHE does not exist. You can directly write the files to be cached under the cache manifest line. The files specified here will be cached in the browser. Renewal request

In this step, you can support offline storage. Next, we need to think about how to update offline storage?

When a user connects to the network locally again, the local offline storage resources need to be checked for updates. This update process is also controlled by manifest updates,When the manifest file is updated, the browser automatically downloads the new manifest file andNext page refreshWhen the resource file is re-requested (the third refresh replaces the local cache with the latest cache), and this request is global, that is to say, all files in the manifest cache list will be requested once, instead of separately requesting a specific modified resource file, because manifest does not know which file has been modified.

There is no need to worry about Global Update, because for resource files that have not been updated, the request is still 304 responses, and only the actually updated resource file is 200.

Response to 304:

If the client sends a Conditional Validation request, the web server may return an HTTP/304 response, which indicates that the cache of the requested resources on the client is still valid, that is to say, the resource has not been modified since the last cache. conditional requests can ensure that the client resources are up-to-date while avoiding performance problems caused by requests for complete resources each time.

The server will read the values in the two request headers to check whether the cached resources on the client are the latest. If yes, the server will return the HTTP/304 Not Modified response, but there is no response body. after receiving the 304 response, the client reads the corresponding resource from the cache.

When the client caches the target resource but is not sure whether it is the latest version, a conditional request is sent. in Fiddler, you can search for related request Headers in Headers Inspector to identify whether a request is a conditional request.

When performing a conditional request, the client will provide the server with an If-Modified-Since Request Header whose value is the date value in the Last-Modified Response Header returned by the server, an If-None-Match request header is also provided, with the value of the ETag Response Header returned by the server last time:

In another case, if the server considers that the client-side cached resource has expired, the server will return the HTTP/200 OK response, and the response body is the latest content of the resource. after the client receives the 200 response, it overwrites the old cache resource with the new response body.

A condition request can be sent only when the client caches the corresponding resource and the response header of the resource contains the Last-Modified or ETag. if neither of these headers exists, you must request the resource unconditionally (unconditionally), and the server must return the complete resource data.

When the update content does not contain a file name update, how do I update the manifest file? A better way is to update any comment starting with #. The purpose is to tell the browser that the manifest file has been updated.

The above content is automatically updated by the browser. Similarly, W3C defines the API specification for offline storage: http://www.whatwg.org/specs/web-apps/current-work/#applicationcache

In addition, pay attention to the following points for offline caching:

1. You can use iframe to embed multiple manifest files. If manifestis configured on the primary page, index.html will not be cached.
<Iframe id = "iframe1" src = "cache1.html" frameborder = "no" scrolling = "no">
</Iframe>
<Iframe id = "iframe2" src = "cache2.html" frameborder = "no" scrolling = "no">
</Iframe>
<Iframe id = "iframe2" src = "cache3.html" frameborder = "no" scrolling = "no">
</Iframe>
2. There is still a space limit for multiple manifest files, which cannot exceed 50 MB on safari on ipad. If cache1.manfest is 26 M, and cache1.manfest is 27 M, then the two are more than 50 m. At this time, first, cached completes cache1. When cache2 is cached, an error that exceeds the cache capacity limit is reported. Cache3 won't be saved either. Only the first cache1.
3. the cache update takes effect only when the reload page is required.
4. manually check for cache updates. ApplicationCache. update ();
5. Manually perform updates.
ApplicationCache. addEventListener ("updateready", function (){
If (confirm ("the local cache has been updated. Are you sure you want to refresh it? ")){
// (3) manually update the local cache
ApplicationCache. swapCache ();
// Reload the screen
Location. reload ();
}
}, True );
ApplicationCache. swapCache (); must be placed in updateready for execution.
6. configuration files in the manifest file may not be used by html. However, if files such as xml are cached, it seems that they cannot be cached.
7. NETWORK: If files other than the CACHE: defined files are not cached, NETWORD: the file must be written *. Otherwise, all files outside the CACHE may not be loaded.
8. CACHE: folders cannot be defined. For example, images /. This method will not be recognized.
The file path and file name cannot contain spaces. Otherwise, only the text before spaces will be obtained, leading to file cache failure.
9. If the manifest file deletes the previously cached file, the browser also deletes and updates the cached file.

What is the maximum amount of resources that HTML5 offline storage can store? manifest chache: Various browsers.
My projects cache 20 mB + chrome28 No problem
Html5 local Database-Can Web SQL Database be stored offline? Firefox and chromeapi Samples