Provides a way to cache web resources (for example, html, css, js, images, audio, video, and so on) to improve performance, reduce server loads, and enable access to content when there is no network connectivity.
cache = window.applicationCache
The ApplicationCache object has these types of members:
The ApplicationCache object has these events.
Event handler provided to see if the resources have been loaded into the cache.
Event handler provided to see if the browser is in the process of checking for an update, or is attempting to download the manifest for the first time.
Event handler provided to determine if the browser has found an update and is downloading it, or is downloading the resources for the first time.
Event handler provided if an error has taken place.
Event handler provided to indicate that the manifest has not changed.
Event handler provided to indicate that the application cache cannot be found.
Event handler provided to indicate that the resources for the cache are still being downloaded.
Event handler provided to indicate that previously cached resources have been updated.
The ApplicationCache object has these methods.
Registers an event handler for the specified event type.
Sends an event to the current element.
Removes an event handler that the addEventListener method registered.
Swaps an old cache for a newer one.
Triggers the update of the existing cache. If no updates are available, an update will not be forced.
The ApplicationCache object has these properties.
Indicates the current status of the cache.
In order to cache files, you must do the following:
- Create a manifest file that lists the files and other web resources you want to cache.
- Reference the manifest file in the header of every page you want cached.
The manifest file defines which web resources are cached when a user browses to your site. The manifest file typically has the extension .appcache and must be served as a text/cache-manifest mime type. Each webpage must add a manifest attribute to the HTML element similar to this:
You can use an absolute or relative URL. The cache manifest file lists the files that will be cached, using the format:
CACHE MANIFEST #Version 1 CACHE: script/scriptfilename1.js css/cssfilename.css images/imagename1.png images/imagename2.jpg images/imagename3.png FALLBACK: #This will enable imagename4.png to be as a replacement for #all resources under the images dir when there is no network connectivity. images/ images/imagename4.png NETWORK: #This will prevent other network resources from being accessed. images/imagename5.png
The first line of the manifest must read CACHE MANIFEST and the lines that follow it list the web resources you want to cache. You can use the # symbol to make comments.
Alternatively, web resources that need to be cached can be specified by adding a “CACHE:” header section before the resources (as shown previously).
In addition, fallback resources can be defined to replace general or specific web resources when there is no network connectivity. This is done by adding a “FALLBACK:” header section before the resources. These resources can be wildcard to specify a catch all mechanism (as shown previously). Be aware that there is a space after the first "images/" in the FALLBACK: section. This indicates that any files contained under the "images/" directory will fall back to a specific web resource (for example, images/imagename4.png) if they cannot be accessed from the network.
Also, web resources can be specified to only be loaded from the network. This is done by adding a "NETWORK: " header section before the resources. This functionality can be used to scope down the number of resources that can be accessed from the network, thus, creating an allowed only list (as shown previously).
The ApplicationCache object has the following properties:
The ApplicationCache object supports the following events:
The ApplicationCache object has the following methods:
ApplicationCache functionality is independent of HTTP caching headers.
The manifest file implicitly includes itself as a page to be cached. It also needs to have the same domain of origin as the page that contains it.