The best HTML5 Application Cache Tutorial In 2024, In this tutorial you can learn What is the application cache (Application Cache)?,Browser Support,HTML5 Cache Manifest examples,Examples,Cache Manifest basis,Manifest file,refresh cache,Example - Complete Manifest file,About application cache instructions,
Use HTML5, by creating a cache manifest file, you can easily create offline versions of web applications.
HTML5 introduces application cache, which means that web applications can be cached, and can be accessed without an Internet connection.
Application cache application brings three advantages:
Internet Explorer 10, Firefox, Chrome, Safari and Opera support the application cache.
The following example shows the HTML document with a cache manifest (for offline viewing):
To enable application cache, the label contains the manifest attribute in the document <html>:
Each manifest specified page when users access their will be cached. If the manifest attribute is not specified, the page will not be cached (unless directly specify the page in the manifest file).
Suggested manifest file extension: ". Appcache".
Please note, manifest files need to configure the correct MIME-type, namely "text / cache-manifest". You must be configured on the web server.
manifest file is a simple text file that tells the browser contents of the cache (and does not cache content).
manifest files can be divided into three parts:
The first line, CACHE MANIFEST, is required:
The above manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of your site. Then, whenever the user disconnects from the Internet, these resources are still available.
The following provisions of subsections NETWORK file "login.php" is never cached and available offline is unavailable:
You can use an asterisk to indicate all other other resources / files require an Internet connection:
FALLBACK sections defined below If you can not establish an Internet connection, with "offline" alternative / html5 / directory of all files:
Note: The first URI is the resource, the second is a substitute.
Once the application is cached, it will remain cached until the following occurs:
Tip: The "#" at the beginning of the comment line, but also to meet other purposes.Caching application will be updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes will not be re-cached. Update comment line is a date and version number of the browser to re-cache file approach.
Please pay attention to the contents of the cache.
Once the files are cached, the browser will continue to display the cached version, even if you edit the file on the server. To make sure your browser to update the cache, you need to update the manifest file.
Note: The browser capacity limit for cached data may not be the same (some restrictions browser settings is that each site 5MB).