HTML5 defines a special cache, commonly called "appcache" or application cache, that allows you to instruct the browser to cache certain resources—like images, CSS, JS, and others in a way that makes them available to the application even if the user’s browser is offline.
The application cache can store your entire website offline: all the JavaScript, HTML, and CSS, as well as all your images and resources.
The application is automatically updated every time the user visits your page while online. If even one byte of data has changed in one of your files, the application cache will reload that file.
The Offline Web Applications spec is supported in:
It is currently unsupported in all versions of IE.
To test if the browser supports application cache functionality, use the following feature-detect:
var appcache_support = !!window.applicationCache;
Follow these three steps for making an Offline Web Application:
The cache.manifest file is a text file that adheres to a certain format. There should be only one cache.manifest file for the entire application.
The manifest tells the browser when and what to get from offline, from the Web, or to fall back onto if assets are missing. Once the manifest is loaded or updated, it triggers an update on the applicationCache object.
Here’s an example of a simple cache.manifest file:
CACHE MANIFEST CACHE: index.html help.html style/default.css images/logo.png images/backgound.png FALLBACK: server-time.js fallback-server-time.js NETWORK: *
To make any files that should never be stored offline should be placed under NETWORK section. Any files specified in the NETWORK section will always be reloaded when the user is online, and will never be available offline.
NETWORK LatestNews.php
We can use a shortcut: the wildcard *. This asterisk tells the browser that any files or URLs not mentioned in the explicit section (and therefore not stored in the application cache) should be fetched from the server.
NETWORK *
This section can also be specified, which allows us to define what the user will see when a resource fail to load.
Each line in the fallback section requires two entries.
We can load a still image of the film’s first frame, if the the files are unable to load.
we can specify /, which will match any page on the site. If any page fails to load or not available from the application cache, we’ll fall back to the offline.html page.
media/ images/video-fallback.jpg / /offline.html
You can also add comments to your cache.manifest file by beginning a line with #.
CACHE MANIFEST # version 0.1 CACHE: index.html NETWORK: *
To ensure that your server is configured to serve the manifest files correctly set the content type ("MIME Types") provided by your server along with the cache.manifest.
For Apache web server, add the following to your .htaccess file:
AddType text/cache-manifest .manifest
To make your website available offline point your HTML pages to the manifest file by setting the manifest attribute on the html element in each of our pages:
<!doctype html> <html manifest="/cache.manifest">
<html manifest="/cache.manifest">.Simply changing a file that is stored in a user’s application cache is not enough to get that new version of the file delivered to the user.The only way a browser checks for updated versions of files is if the manifest file changes.
When a browser loads a site for which it already has a cache.manifest file, it will check to see if the manifest file has changed. If the cache.manifest file has changed, the browser will rebuild the application cache by re-downloading all the specified files otherwise it won’t download anything else.
This is why we specified a version number in a comment in our cache.manifest.
If the browser sees during page load that the manifest file has changed, it still lets the current page load continue immediately, and then asks for the updated files to be loaded in the background, to be ready for the next page load.
Fortunately, the browser provides a JavaScript API to help: the applicationCache interface.
Using this interface, you can detect that a new set of application Cache contents has been fetched and is now available, and force them to be applied to the application cache right away, rather than on the next page load:
To load the newly downloaded cache into memory, you can use the applicationCache.swapCache()
var cache = applicationCache;
cache.addEventListener("updateready", function() {
if (cache.stats == cache.UPDATEREADY) {
cache.swapCache(); // swap in the new cache items
}
}, false);
[OR]
applicationCache.onUpdateReady = function() {
// the cache manifest has changed, let’s tell the user to
notifyUserOfUpgrade();
};
applicationCache.onUpdateReady = function() {
applicationCache.swapCache();
// the cache manifest has changed, let’s tell the user to
notifyUserOfUpgrade();
};This makes the new application cache items available for any further uses during the current page lifetime.
However, any places where the resources were already used on the page are not updated. So the cleanest way is to force the entire page to be updated with the new resource versions by simply reload the page.
Ask the user if they want to reload the page, like this:
var cache = applicationCache;
cache.addEventListener("updateready", function() {
if (cache.stats == cache.UPDATEREADY) {
if (confirm("This site has been updated. Do you want to reload?")) {
location.reload();
}
}
}, false);Some sites are designed to be long-lived, with little or no page reloads, in which case, getting updates requires special handling.
To force the browser to do a check for an updated cache.manifest file, which if modified then force fetching of any new appcache contents, you can call the update() API method:
function updateAppcache() {
var cache = applicationCache;
cache.update(); // check to see if the cache manifest file has been updated
cache.addEventListener("updateready", function() {
if (cache.stats == cache.UPDATEREADY) {
if (confirm("This site has been updated. Do you want to reload?")) {
location.reload();
}
}
}, false);
}The cache.manifest file may itself be cached by the browser.
If you’re unable to force the browser to refresh its application cache, try clearing the regular browser cache. You could also change your server settings to send explicit instructions not to cache the cache.manifest file.
For Apache web server , you can tell Apache not to cache the cache.manifest file by adding the following to your .htaccess file:
.htaccess (excerpt)<Files cache.manifest> ExpiresActive On ExpiresDefault "access" </Files>
The
The combination of ExpiresActive On and ExpiresDefault "access" forces the web server to always expire the cache.manifest file from the cache. The effect is, the cache.manifest file will never be cached by the browser.
HTML5 includes a property on the navigator object that is supposed to tell you if the browser is online or offline, via navigator.onLine
Sometimes, you’ll need to know if your user is viewing the page offline or online. For example, in a web mail app, saving a draft while online involves sending it to the server to be saved in a database; but while offline, you would want to save that information locally instead, and wait until the user is back online to send it to your server.
Browsers that support Offline Web Applications give you access to the navigator.onLine property, which will be true if the browser is online, and false if it’s not.
function determineConnectivity() {
if (navigator.onLine) {
// alert("You are online.");
} else {
alert("You must be offline.");
}
}
