At first you must know the purpose of this article and what is this strange title refer to!!
of course it’s about HTML5 offline applications and how this offline application work
dont be confused i know that Web pages are things you download and render. Downloading implies a network
connection. How can you download when you’re offline ???????????
At its simplest, an offline web application is just a list of URLs pointing to HTML, CSS,
The home page of the offline web application points to this list, called a manifest file
HTML5 offline applications will read the list of URLs from the manifest file, download
the resources,. When you try to access the web application without a network con-
nection, your web browser will automatically switch over to the local copies instead.
Now it’s up to you as a Web-Developer …
In other words, HTML5 can take your web application offline, but what you do once you’re there is up to you.
Browsers that subbort HTML5 offline application:
you need to point to the manifest file, using the manifest attribute on your <html>element:
<!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html>Your cache manifest file can be located anywhere on your web server, but it must be
served with the content type text/cache-manifest.Lets build itsupose you built web game and wanna to run it offline
To do that, we need a manifest that lists all the resources the game needs. Well, there’s
and…that’s it. There are no images, because all the drawing is done programmatically
via the canvas API and all the necessary CSS styles are in a <style>
element at the top of the HTML page. So, this is our cache manifest:
A word about paths.
I’ve created an offline/ subdirectory in the examples/ directory,
and this cache manifest file lives inside the subdirectory. Because the HTML page will
need one minor addition to work offline (more on that in a minute), I’ve created a
separate copy of the HTML file, which also lives in the offline/ subdirectory. But because
which lives in the parent directory (examples/). Altogether, the files look like this:
In the cache manifest file (/examples/offline/game.manifest), we want to reference two
files. First is the offline version of the HTML file (/examples/offline/game.html), which
is listed in the manifest file without any path prefix because the two files are in the same
game-localstorage.js. This is just like how you might use a relative URL in an
<img src> attribute. As you’ll see in the next example, you can also use absolute paths
(that start at the root of the current domain) or even absolute URLs (that point to resources in other domains).
Now, in the HTML file, we need to add the manifest attribute that points to the cache
<html lang=”en” manifest=”game.manifest”> And that’s it! When an offline-capable browser first loads the offline–enabled HTML
page, it will download the linked cache manifest file and start downloading all the
referenced resources and storing them in the offline application cache. From then on,
the offline application algorithm will take over whenever you revisit the page. You can
play the game offline, and since it remembers its state locally, you can leave and come
back as often as you like
Further Reading Standards: • Offline web applications in the HTML5 specification Browser vendor documentation: • “Offline resources in Firefox” on the Mozilla Developer Center • “HTML5 Offline Application Cache”, part of the “Safari Client-Side Storage and Offline Applications Programming Guide” Tutorials and demos: • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 1”, by Andrew Grieve • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 2”, by Andrew Grieve • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 3”, by Andrew Grieve • “Debugging HTML 5 Offline Application Cache”, by Jonathan Stark • “An HTML5 offline image editor and uploader application”, by Paul Rougetat end thanks to all of you By : Amar Omar Ashour