Offline access is increasingly important for web-based applications. While all browsers have caching mechanisms, they are unreliable and may not always work as expected. HTML5 uses the ApplicationCache interface to solve some of the problems caused by offline.
Using the cache interface brings three advantages to your application:
Application Cache (also known as AppCache) allows developers to specify which files should be cached by the browser for offline users to access. Even if the user presses the refresh button while offline, your app will load and run normally.
Reference manifest fileTo enable app caching for an app, add the manifest attribute to the document's html tag:
The manifest attribute can point to an absolute URL or a relative path, but absolute URLs must have the same origin as the corresponding web application. The manifest file can use any file extension, but must be served with the correct MIME type (see below).
<html manifest=/cache.manifest> ...</html>
or
<html manifest=http://www.example.com/example.mf> ...</html>
You should add the manifest attribute on every page of your web application that you want to cache. If a web page does not contain a manifest attribute, the browser will not cache the page (unless the attribute is explicitly listed in the manifest file).
This means that every web page that the user browses that contains a manifest will be implicitly added to the application cache. Therefore, you don't need to list every page in your inventory.
Manifest files must be provided as text/cache-manifest MIME type. The file suffix name can be customized (.manifest is recommended), so we need to declare the file type with the .manifest suffix as text/cache-manifest on the server side.
Taking apache as an example, we need to add: AddType text/cache-manifest .manifest to httpd.conf
Manifest file structureA simple list format is as follows:
CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
This example will cache four files on the web page that specifies this manifest file.
You need to pay attention to the following points:
Let's look at a more complex example:
CACHE MANIFEST# 2010-06-18:v2# Explicitly cached 'master entries'.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Resources that require the user to be online.NETWORK:login. php/myapihttp://api.twitter.com# static.html will be served if main.py is inaccessible# offline.jpg will be served in place of all images in images/large/# offline.html will be served in place of all other .html filesFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
Lines starting with # are comment lines, but can be used for other purposes as well. For example, update cache
The app cache is only updated when its manifest file changes. For example, if you modify an image resource or change a JavaScript function, those changes will not be recacheed. You must modify the manifest file itself to allow the browser to refresh the cache file. Creating comment lines with generated version numbers, file hashes, or timestamps ensures users have the latest version of your software.
You can also programmatically update the cache when a new version becomes available, as described in the Updating the Cache section.
If the page introduces a cache manifest file, then the manifest file must contain all the files (css, js, image...) required by the current page, otherwise it will not be loaded, so except for files that need to be cached, it is recommended to add NETWORK in the file. Add an asterisk * to an item to indicate all other files
A manifest can include three different sections: CACHE, NETWORK, and FALLBACK.
CACHE:This is the default part of the entry. Files listed under this header (or the files immediately following CACHE MANIFEST) are explicitly cached after they are first downloaded.
NETWORK:The files listed under this section are whitelisted resources that are required to connect to the server. All requests for these resources bypass the cache regardless of whether the user is offline. Wildcards can be used.
FALLBACK:This section is optional and specifies a fallback page if the resource cannot be accessed. The first URI represents the resource, and the second represents the backing page. The two URIs must be related and must have the same origin as the manifest file. Wildcards can be used.
Note: The sections can be arranged in any order, and each section can appear repeatedly in the same list.
The following list defines the comprehensive web page (offline.html) that is displayed when a user attempts to access the root of the site offline, and also indicates that all other resources (such as those on remote sites) require an Internet connection.
CACHE MANIFEST# 2010-06-18:v3# Explicitly cached entriesindex.htmlcss/style.css# offline.html will be displayed if the user is offlineFALLBACK:/// /offline.html# All other resources (eg sites) require the user to be online.NETWORK:*# Additional resources to cacheCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png
Please note: HTML files that reference manifest files are automatically cached. So you don't need to add it to your list, but we recommend that you do.
Note: HTTP cache headers and cache limits set on pages served over SSL will be replaced with cache manifests. Therefore, web pages served over https can run offline.
Update cacheApps will remain cached while offline unless one of the following conditions occurs:
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.