offline-enabled Wikipedia online, your browser will fet images and videos and other
embedded resources normally, even if they are on a different domain. (is is common in
large websites, even if they aren’t part of an offline web application. HTML pages are
generated and served locally, while images and videos are served from a 
CDN on another
domain.) Without this wildcard flag, our hypothetical offline-enabled Wikipedia would behave
strangely when you were online — specifically, it wouldn’t load any externally-hosted images
or videos!
Is this example complete? No. Wikipedia is more than HTML files. It uses common CSS,
JavaScript, and images on ea page. Ea of these resources would need to be listed
explicitly in the 
C AC H H E E :
section of the manifest file, in order for pages to display and behave
properly offline. But the point of the fallba section is that you can have an “open-ended”
offline web application that extends beyond the resources you’ve listed explicitly in the
manifest file.
THE FLOW OF EVENTS
THE FLOW OF EVENTS
So far, I’ve talked about offline web applications, the cae manifest, and the offline
application cae (“appcae”) in vague, semi-magical terms. ings are downloaded, browsers
make decisions, and everything Just Works. You know beer than that, right? I mean, this is
web development we’re talking about. Nothing ever Just Works.
First, let’s talk about the flow of events. Specifically, DOM events. When your browser visits
a page that points to a cae manifest, it fires off a series of events on the
wi n do w. a a ppl l i i c c a t i i o o n C a a c c h e
object. I know this looks complicated, but trust me, this is the
simplest version I could come up with that didn’t leave out important information.
1. As soon as it notices a 
m a n n i i f e s s t
aribute on the 
< h t t m m l >
element, your browser fires
c h e e c c ki n n g
event. (All the events listed here are fired on the
wi n do w. a a ppl l i i c c a t i i o o n C a c c h h e
object.) e 
c h e c c ki i n g
event is always fired, regardless
of whether you have previously visited this page or any other page that points to the
diveintohtml5.org
LET’S TAKE THIS OFFLINE
Convert pdf to web link - Convert PDF to html files in C#.net, ASP.NET MVC, WinForms, WPF application
How to Convert PDF to HTML Webpage with C# PDF Conversion SDK
convert pdf table to html; convert pdf to web link
Convert pdf to web link - VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.net, ASP.NET MVC, WinForms, WPF application
PDF to HTML Webpage Converter SDK for VB.NET PDF to HTML Conversion
converting pdf to html format; convert pdf to web pages
same cae manifest.
2. If your browser has never seen this cae manifest before…
It will fire a 
do wn l o a a di i n g
event, then start to download the resources listed in
the cae manifest.
While it’s downloading, your browser will periodically fire 
pro gre s s
events,
whi contain information on how many files have been downloaded already and
how many files are still queued to be downloaded.
Aer all resources listed in the cae manifest have been downloaded successfully,
the browser fires one final event, 
c a c h h e e d
. is is your signal that the offline web
application is fully caed and ready to be used offline. at’s it; you’re done.
3. On the other hand, if you have previously visited this page or any other page that
points to the same cae manifest, then your browser already knows about this cae
manifest. It may already have some resources in the appcae. It may have the entire
working offline web application in the appcae. So now the question is, has the cae
manifest anged since the last time your browser eed it?
If the answer is no, the cae manifest has not anged, your browser will
immediately fire a 
n o upda t t e
event. at’s it; you’re done.
If the answer is yes, the cae manifest has anged, your browser will fire a
do wn n l l o a di n g
event and start re-downloading every single resource listed in the
cae manifest.
While it’s downloading, your browser will periodically fire 
pro gre s s
events,
whi contain information on how many files have been downloaded already and
how many files are still queued to be downloaded.
Aer all resources listed in the cae manifest have been re-downloaded
successfully, the browser fires one final event, 
upda t e re a dy
. is is your signal
that the new version of your offline web application is fully caed and ready to
be used offline. e new version is not yet in use. To “hot-swap” to the new version
without forcing the user to reload the page, you can manually call the
wi n do w. a a ppl l i i c c a t i o o n n C a c c h h e . s s wa a pC C a a c h e e ()
function.
If, at any point in this process, something goes horribly wrong, your browser will fire an
e rro o r
event and stop. Here is a hopelessly abbreviated list of things that could go wrong:
diveintohtml5.org
LET’S TAKE THIS OFFLINE
C#: How to Add HTML5 Document Viewer Control to Your Web Page
the necessary resources for creating web document viewer addCommand(new RECommand("convert")); _tabFile.addCommand new UserCommand("pdf"); _userCmdDemoPdf.
convert pdf to webpage; convert pdf form to html
C# Image: How to Integrate Web Document and Image Viewer
RasterEdge DocImage SDK for .NET link directly. project for building a modern web document image RasterEdgeImagingDeveloperGuide8.0.pdf: from this user manual
convert pdf to html format; converting pdf to html code
e cae manifest returned an HTTP error 404 (Page Not Found) or 410 (Permanently
Gone).
e cae manifest was found and hadn’t anged, but the HTML page that pointed to
the manifest failed to download properly.
e cae manifest anged while the update was being run.
e cae manifest was found and had anged, but the browser failed to download one
of the resources listed in the cae manifest.
THE FINE ART OF DEBUGGING,
THE FINE ART OF DEBUGGING,
A.K.A. “KILL ME! KILL ME NOW!”
A.K.A. “KILL ME! KILL ME NOW!”
I want to call out two important points here. e first is something you just read, but I bet it
didn’t really sink in, so here it is again: if even a single resource listed in your cae
manifest file fails to download properly, the entire process of caing your offline web
application will fail. Your browser will fire the 
e rro r
event, but there is no indication of
what the actual problem was. is can make debugging offline web applications even more
frustrating than usual.
e second important point is something that is not, tenically speaking, an error, but it will
look like a serious browser bug until you realize what’s going on. It has to do with exactly
how your browser es whether a cae manifest file has anged. is is a three-phase
process. is is boring but important, so pay aention.
1. Via normal HTTP semantics, your browser will e whether the cae manifest has
expired. Just like any other file being served over HTTP, your web server will typically
include meta-information about the file in the HTTP response headers. Some of these
HTTP headers (
E xpi i re s
and 
C a a c c h e -C o n t t ro o l
) tell your browser how it is allowed to
cae the file without ever asking the server whether it has anged. is kind of
caing has nothing to do with offline web applications. It happens for prey mu
every HTML page, stylesheet, script, image, or other resource on the web.
2. If the cae manifest has expired (according to its HTTP headers), then your browser
will ask the server whether there is a new version, and if so, the browser will download
it. To do this, your browser issues an HTTP request that includes that last-modified date
of the cae manifest, whi your web server included in the HTTP response headers
diveintohtml5.org
LET’S TAKE THIS OFFLINE
VB.NET PDF: Create PDF Document Viewer in C#.NET for Document
reading PDF document in ASP.NET web, .NET Windows Forms and mobile developing applications respectively. For more information on them, just click the link and
convert pdf form to web form; convert pdf to html code for email
C# PDF: How to Create PDF Document Viewer in C#.NET with
Support rendering web viewer PDF document to images or svg file; Free to convert viewing PDF document to TIFF file for document management;
convert pdf to web page; convert pdf into web page
the last time your browser downloaded the manifest file. If the web server determines
that the manifest file hasn’t anged since that date, it will simply return a 
304 (No o t
M o di i f f i e d)
status. Again, none of this is specific to offline web applications. is
happens for essentially every kind of resource on the web.
3. If the web server thinks the manifest file has anged since that date, it will return an
HTTP 
200 (O O K)
status code, followed by the contents of the new file, along with new
C a c h h e e -C o o n n t ro o l
headers and a new last-modified date, so that steps 1 and 2 will work
properly the next time. (HTTP is cool; web servers are always planning for the future. If
your web server absolutely must send you a file, it does everything it can to ensure that
it doesn’t need to send it twice for no reason.) Once it’s downloaded the new cae
manifest file, your browser will e the contents against the copy it downloaded last
time. If the contents of the cae manifest file are the same as they were last time, your
browser won’t re-download any of the resources listed in the manifest.
Any one of these steps can trip you up while you’re developing and testing your offline web
application. For example, say you deploy one version of your cae manifest file, then 10
minutes later, you realize you need to add another resource to it. No problem, right? Just add
another line and redeploy. Bzzt. Here’s what will happen: you reload the page, your browser
notices the 
m a n i i f f e s t
aribute, it fires the 
c h e c ki n g
event, and then… nothing. Your
browser stubbornly insists that the cae manifest file has not anged. Why? Because, by
default, your web server is probably configured to tell browsers to cae static files for a few
hours (via HTTP semantics, using 
C a c c h h e -C C o o n t ro l
headers). at means your browser will
never get past step 1 of that three-phase process. Sure, the web server knows that the file has
anged, but your browser never even gets around to asking the web server. Why? Because
the last time your browser downloaded the cae manifest, the web server told it to cae the
resource for a few hours (via HTTP semantics, using 
C a a c c h e -C o n t t ro o l
headers). And now, 10
minutes later, that’s exactly what your browser is doing.
To be clear, this is not a bug, it’s a feature. Everything is working exactly the way it’s
supposed to. If web servers didn’t have a way to tell browsers (and intermediate proxies) to
cae things, the web would collapse overnight. But that’s no comfort to you aer you spend
a few hours trying to figure out why your browser won’t notice your updated cae manifest.
(And even beer, if you wait long enough, it will mysteriously starts working again! Because
the HTTP cae expired! Just like it’s supposed to! Kill me! Kill me now!)
So here’s one thing you should absolutely do: reconfigure your web server so that your cae
diveintohtml5.org
LET’S TAKE THIS OFFLINE
VB.NET Image: VB Code to Download and Save Image from Web URL
users to download image from website link more easily. Apart from image downloading from web URL, RasterEdge & profession imaging controls, PDF document, image
convert pdf to url; conversion pdf to html
C# PDF Convert to SVG SDK: Convert PDF to SVG files in C#.net, ASP
In some situations, it is quite necessary to convert PDF document into SVG image format. indexed, scripted, and supported by most of the up to date web browsers
pdf to html converter online; how to convert pdf to html code
manifest file is not caeable by HTTP semantics. If you’re running an Apae-based web
server, these two lines in your 
. h h t t a c c c e e s s
file will do the tri:
E xpi re e s s Ac t i i ve  O O n
E xpi re e s s D e f a a ul l t  " " a c c c e e s s "
at will actually disable caing for every file in that directory and all subdirectories. at’s
probably not what you want in production, so you should either qualify this with a 
< Fi l l e e s >
directive so it only affects your cae manifest file, or create a subdirectory that contains
nothing but this 
. h t a a c c c e s s s
file and your cae manifest file. As usual, configuration details
vary by web server, so consult your server’s documentation for how to control HTTP caing
headers.
Once you’ve disabled HTTP caing on the cae manifest file itself, you’ll still have times
where you’ve anged one of the resources in the appcae, but it’s still at the same URL on
your web server. Here, step 2 of the three-phase process will screw you. If your cae
manifest file hasn’t anged, the browser will never notice that one of the previously caed
resources has anged. Consider the following example:
C AC H E  M M ANIFE ST
# re e v 42
c l l o o c k. . js
c l l o o c k. . c c s s
If you ange 
c l l o c k. c s s
and redeploy it, you won’t see the anges, because the cae
manifest file itself hasn’t anged. Every time you make a ange to one of the resources in
your offline web application, you’ll need to ange the cae manifest file itself. is can be
as simple as anging a single aracter. e easiest way I’ve found to accomplish this is to
include a comment line with a revision number. Change the revision number in the comment,
then the web server will return the newly anged cae manifest file, your browser will
notice that the contents of the file have anged, and it will ki off the process to re-
download all the resources listed in the manifest.
C AC H E  M M ANIFE ST
# re e v 43
c l l o o c k. . js
diveintohtml5.org
LET’S TAKE THIS OFFLINE
C# PDF Convert to Jpeg SDK: Convert PDF to JPEG images in C#.net
and quickly convert a large-size multi-page PDF document to a group of high-quality separate JPEG image files within .NET projects, including ASP.NET web and
how to convert pdf into html code; convert fillable pdf to html form
VB.NET Image: Tutorial for Converting Image and Document in VB.NET
Use VB.NET Code to Convert Image to Stream, PDF to Image Conversion Through VB Programming. To convert image in web application, you may use our ASP.NET image
convert pdf to website html; create html email from pdf
c l l o o c k. . c c s s
LET’S BUILD ONE!
LET’S BUILD ONE!
Remember the Halma game that we introduced in 
the canvas apter and later improved by
saving state with persistent local storage? Let’s take our Halma game offline.
To do that, we need a manifest that lists all the resources the game needs. Well, there’s the
main HMTL page, a single JavaScript file that contains all the game code, and… that’s it.
ere are no images, because all the drawing is done programmatically via the 
canvas API.
All the necessary CSS styles are in a 
< s s t yl l e e >
element at the top of the HTML page. So this
is our cae manifest:
C AC H E  M M ANIFE ST
h a a l l m a . . h h t m l
. . . / / h a l l m m a -l o o c c a l s s t t o ra a ge e . js
A word about paths. I’ve created an 
o f f f f l i n n e e /
subdirectory in the 
e xa a m m pl e e s s /
directory, and
this cae 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, whi also lives in the 
o f f f l l i n e e /
subdirectory. But because there are no anges
to the JavaScript code itself since 
we added local storage support, I’m literally reusing the
same 
. js
file, whi lives in the parent directory (
e xa a m m pl e e s s /
). Altogether, the files look like
this:
/ e e xa a m pl e s / l l o o c a l l s s t o ra ge -h a l m m a a . h t t m m l
/ e e xa a m pl e s / h h a a l m a a -l l o c c a a l s t t o o ra ge . js
/ e e xa a m pl e s / o o f f f l i i n n e / h h a a l m a a . . m a n n i i f e s s t
/ e e xa a m pl e s / o o f f f l i i n n e / h h a a l m a a . . h t m m l
In the cae manifest file (
/ e e xa m m pl l e s s / / o f f f l l i n e e / / h a l l m m a . m m a a n i f e e s s t
), we want to reference
two files. First, the offline version of the HTML file (
/ e e xa a m pl e s / / o o f f l l i i n e / / h h a l m a a . . h t m m l
).
diveintohtml5.org
LET’S TAKE THIS OFFLINE
VB.NET Word: VB Code to Create Word Mobile Viewer with .NET Doc
Directly convert your Android, iOS or Windows mobile device into a Process Word web page(s) within a few steps like png, gif, bmp, jpeg, tiff, pdf, and dicom.
best pdf to html converter online; convert url pdf to word
Since these two files are in the same directory, it is listed in the manifest file without any
path prefix. Second, the JavaScript file whi lives in the parent directory
(
/ e xa m pl l e e s / h a a l l m a -l o c a a l l s t o o ra a ge e . . js
). is is listed in the manifest file using relative
URL notation: 
. . . / h a a l l m a -l l o o c a l l s s t o ra ge . . js
. is is just like you might use a relative URL
in an 
< i m g s s rc c >
aribute. 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 on other domains).
Now, in the HTML file, we need to add the 
m a n i i f f e s t
aribute that points to the cae
manifest file.
< ! ! D D O C T T Y Y P E  h h t t m l >
< h h t t m l  l l a n g= = " " e n "  
m a n n i i f e s s t t = " h h a a l m a a . . m a n n i i f e s s t t " " >
And that’s it! When an offline-capable browser first loads 
the offline-enabled HTML page, it
will download the linked cae manifest file and start downloading all the referenced
resources and storing them in the offline application cae. From then on, the offline
application algorithm takes over whenever you revisit the page. You can play the game
offline, and since it remembers its state locally, you can leave and come ba as oen as you
like.
FURTHER READING
FURTHER READING
Standards:
Offline web applications in the HTML5 specification
Browser vendor documentation:
Offline resources in Firefox
HTML5 offline application cae, part of the 
Safari client-side storage and offline
diveintohtml5.org
LET’S TAKE THIS OFFLINE
applications programming guide
Tutorials and demos:
Gmail for mobile HTML5 series: using appcae to laun offline - part 1
Gmail for mobile HTML5 series: using appcae to laun offline - part 2
Gmail for mobile HTML5 series: using appcae to laun offline - part 3
Debugging HTML5 offline application cae
an HTML5 offline image editor and uploader application
is has been “Let’s Take is Offline.” e 
full table of contents has more if you’d like to
keep reading.
DID YOU KNOW?
DID YOU KNOW?
In association with Google Press, O’Reilly is
distributing this book in a variety of formats, including
paper, ePub, Mobi, and DRM-free PDF. e paid
edition is called “HTML5: Up & Running,” and it is
available now. is apter is included in the paid
edition.
If you liked this apter and want to show your
appreciation, you can 
buy “HTML5: Up & Running”
with this affiliate link or 
buy an electronic edition
directly from O’Reilly. You’ll get a book, and I’ll get a
bu. I do not currently accept direct donations.
Copyright MMIX–MMX 
Mark Pilgrim
diveintohtml5.org
LET’S TAKE THIS OFFLINE
powered by Google™
Search
diveintohtml5.org
LET’S TAKE THIS OFFLINE
You are here: 
Home  
Dive Into HTML5 
99
A FORM OF MADNESS
A FORM OF MADNESS
show table of contents
DIVING IN
DIVING IN
verybody knows about web forms, right? Make a 
< f f o r m m >
, a few 
< i i n n p u t
t y y p e = = " " t e x x t t " >
elements, maybe an 
< i i n n p u t  t t y p p e e = " p p a a s s w o o r r d " >
, finish it
off with an 
< i i n p u u t  t t y y p p e = " " s s u b m m i i t " >
buon, and you’re done.
You don’t know the half of it. HTML5 defines over a dozen new input types that you can use
in your forms. And when I say “use,” I mean you can use them right now — without any
shims, has, or workarounds. Now don’t get too excited; I don’t mean to say that all of these
exciting new features are actually supported in every browser. Oh goodness no, I don’t mean
that at all. In modern browsers, yes, your forms will ki all kinds of ass. But in legacy
browsers, your forms will still work, albeit with less ass kiing. Whi is to say, all of these
features degrade gracefully in every browser. Even IE 6.
diveintohtml5.org
A FORM OF MADNESS
Documents you may be interested
Documents you may be interested