HTML5- Let’s Take This Offline

        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,
or JavaScript files, images, or any other kinds of resources that may be present.

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:

         Firefox                             Safari                         Chrome                            I-Phone                     Android
 
 
The Cache Manifest:
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
the main HTML page, a single JavaScript file that contains all the game code,
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:
CACHE MANIFEST
game.html
../game-localstorage.js
*********************
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
there are no changes to the JavaScript code itself since we added local storage support
which lives in the parent directory (examples/). Altogether, the files look like this:
/examples/localstorage-game.html
/examples/game-localstorage.js
/examples/offline/game.manifest
/examples/offline/game.html
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
directory. Second is the JavaScript file, which lives in the parent directory (/examples/game-localstorage.js)
and is listed in the manifest file using relative URL notation: ../
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
manifest file:
<!DOCTYPE html>
<html lang=”en” manifest=”game.manifest”>
And that’s it!   When an offline-capable browser first loads the offlineenabled 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 Rouget
 
 
 
at end thanks to all of you
By : Amar Omar Ashour
 

  1. 10 Articles Introduction to HTML5 is Done ! « DevelopersMix's Blog
  2. Oxyhives Active Ingredient

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: