<< Back to the blog

HTML5 - AppCache

By @islamzatary

List of Advanced HTML5 Topics:

Application Caching (or AppCache)

Which mean that a web application is cached, and accessible without an internet connection.

Offline browsing - users can use the application when they're offline.
Speed - cached resources load faster.
Reduced server load - the browser will only download updated/changed resources from the server.

Important Notes on Application Caching

Its allows a developer to specify which files the browser should cache and make available to offline users.
Your app will load and work correctly, even if the user presses the refresh button while they're offline.

The cache manifest file

simple text file that lists the resources the browser should cache for offline access.
To enable the application cache for an app, include the manifest attribute on the document's html tag. See appcache.html
The manifest attribute should be included on every page of your web application that you want cached.
The browser does not cache a page if it does not contain the manifest attribute, do there's no need to list every page in your manifest. If a page points to a manifest, there's no way to prevent this page being cached.

"/page-url/", "/page-url/?something", "/page-url/?something-else" are considered separate pages.
AppCache best used on apps with one URL.

Application Caching Chrome Extension

in firefox: => help appcache firefox extension

The manifest attribute can point to an absolute URL or relative path, but an absolute URL must be under the same origin as the web application. A manifest file can have any file extension, but needs to be served with the correct mime-type(old browsers and IE11).
.htaccess => AddType text/cache-manifest .appcache

Structure of a manifest file

There are a couple of things to note:
The CACHE MANIFEST string is the first line and is required.
Files can be from another domain.
The manifest itself returns a 404 or 410, the cache is deleted.
If the manifest or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.

An application's cache is only updated when its manifest file changes. You must modify the manifest file itself to inform the browser to refresh cached files. the browser won't use those files until the page is refreshed, because updates happen after the page is loaded from the current version of the cache.

A manifest can have three distinct sections:

This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.

Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".

Continue to Manifest Sections

FALLBACK: An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".

Once an application is offline it remains cached until one of the following happens:
The user clears their browser's data storage for your site.
The manifest file is modified. Note: updating a file listed in the manifest doesn't mean the browser will re-cache that resource. The manifest file itself must be altered.

Cache status

Check (appcache.html)
To programmatically check for updates to the manifest: check (appcache.html)

those files won't be automatically reloaded if appCache.update(), You'll need to refresh the page to get the latest version of the page and resources. The good news: you can automate this. To update users to the newest version of your site, set a listener to monitor the updateready event on page load: check attached file

http://people.opera.com/shwetankd/demos/4/index.htm http://people.opera.com/shwetankd/demos/3/index.htm http://people.opera.com/shwetankd/demos/5/index.htm

Application Cache & LocalStorage Survey

HTML5 Application - best practice

HTML5 Application - best practice

HTML5 Application Cache


Wrapping up

<< Back to the blog

by @islamzatary