html5/spec-author-view/offline.html - view

File: [Public] / html5 / spec-author-view / offline.html
Revision 1.1181: download - view: text, annotated - select for diffs
Thu Oct 11 14:49:25 2012 UTC (12 years, 11 months ago) by mike
Branches: MAIN
CVS tags: HEAD

updated

<!doctype html> <html lang="en-US-x-Hixie"><meta content="HTML Tidy for HTML5 (experimental) for Linux/x86 http://github.com/w3c/tidy-html5/tree/c63cc39" name="generator"><meta charset="utf-8"><title>5.7 Offline Web applications — HTML5</title><link href="style.css" rel="stylesheet"><style type="text/css"> /**/ /**/ .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } /**/ /**/ </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> /**/ /**/ pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } .note em, .warning em, .note i, .warning i { font-style: normal; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } .stability { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto 0 auto; width: 50%; background: maroon; color: yellow; -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; -moz-box-shadow: 0 0 1em #500; -webkit-box-shadow: 0 0 1em #500; box-shadow: 0 0 1em red; padding: 0.5em 1em; text-align: center; } .stability strong { display: block; } .stability input { -moz-appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black; position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center; } .stability input:hover { color: white; text-shadow: 0 0 2px black; } .stability input:active { padding: 0.3em 0.45em 0.2em 0.55em; } .stability :link, .stability :visited, .stability :link:hover, .stability :visited:hover { background: transparent; color: white; } /**/ /**/ </style><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><meta content="noindex" name="robots"><script> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } </script><link href="history.html" rel="prev" title="5.5 Session history and navigation"> <link href="Overview.html#contents" rel="contents" title="Table of contents"> <link href="webappapis.html" rel="next" title="6 Web application APIs"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <div aria-haspopup="true" id="jumpIndexA-button" role="button" tabindex="0">jump <div id="jumpIndexA"> <ul><li><a class="noindex" href="the-a-element.html#the-a-element">a</a><a class="noindex" href="the-abbr-element.html#the-abbr-element">abbr</a><a class="noindex" href="the-address-element.html#the-address-element">address</a><a class="noindex" href="the-area-element.html#the-area-element">area</a><a class="noindex" href="the-article-element.html#the-article-element">article</a><a class="noindex" href="the-aside-element.html#the-aside-element">aside</a><a class="noindex" href="the-audio-element.html#the-audio-element">audio</a></li> </ul><ul><li><a class="noindex" href="the-b-element.html#the-b-element">b</a><a class="noindex" href="the-base-element.html#the-base-element">base</a><a class="noindex" href="the-bdi-element.html#the-bdi-element">bdi</a><a class="noindex" href="the-bdo-element.html#the-bdo-element">bdo</a><a class="noindex" href="the-blockquote-element.html#the-blockquote-element">blockquote</a><a class="noindex" href="the-body-element.html#the-body-element">body</a><a class="noindex" href="the-br-element.html#the-br-element">br</a><a class="noindex" href="the-button-element.html#the-button-element">button</a></li> </ul><ul><li><a class="noindex" href="the-canvas-element.html#the-canvas-element">canvas</a><a class="noindex" href="the-caption-element.html#the-caption-element">caption</a><a class="noindex" href="the-cite-element.html#the-cite-element">cite</a><a class="noindex" href="the-code-element.html#the-code-element">code</a><a class="noindex" href="the-col-element.html#the-col-element">col</a><a class="noindex" href="the-colgroup-element.html#the-colgroup-element">colgroup</a><a class="noindex" href="the-command-element.html#the-command-element">command</a></li> </ul><ul><li><a class="noindex" href="the-datalist-element.html#the-datalist-element">datalist</a><a class="noindex" href="the-dd-element.html#the-dd-element">dd</a><a class="noindex" href="the-del-element.html#the-del-element">del</a><a class="noindex" href="the-details-element.html#the-details-element">details</a><a class="noindex" href="the-dfn-element.html#the-dfn-element">dfn</a><a class="noindex" href="the-div-element.html#the-div-element">div</a><a class="noindex" href="the-dl-element.html#the-dl-element">dl</a><a class="noindex" href="the-dt-element.html#the-dt-element">dt</a></li> </ul><ul><li><a class="noindex" href="the-em-element.html#the-em-element">em</a><a class="noindex" href="the-embed-element.html#the-embed-element">embed</a><a class="noindex" href="the-fieldset-element.html#the-fieldset-element">fieldset</a><a class="noindex" href="the-figcaption-element.html#the-figcaption-element">figcaption</a><a class="noindex" href="the-figure-element.html#the-figure-element">figure</a><a class="noindex" href="the-footer-element.html#the-footer-element">footer</a><a class="noindex" href="the-form-element.html#the-form-element">form</a></li> </ul><ul><li><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h3</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h4</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h5</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a><a class="noindex" href="the-head-element.html#the-head-element">head</a><a class="noindex" href="the-header-element.html#the-header-element">header</a><a class="noindex" href="the-hgroup-element.html#the-hgroup-element">hgroup</a><a class="noindex" href="the-hr-element.html#the-hr-element">hr</a><a class="noindex" href="the-html-element.html#the-html-element">html</a></li> </ul><ul><li><a class="noindex" href="the-i-element.html#the-i-element">i</a><a class="noindex" href="the-iframe-element.html#the-iframe-element">iframe</a><a class="noindex" href="the-img-element.html#the-img-element">img</a><a class="noindex" href="the-input-element.html#the-input-element">input</a><a class="noindex" href="the-ins-element.html#the-ins-element">ins</a><a class="noindex" href="the-kbd-element.html#the-kbd-element">kbd</a><a class="noindex" href="the-keygen-element.html#the-keygen-element">keygen</a></li> </ul><ul><li><a class="noindex" href="the-label-element.html#the-label-element">label</a><a class="noindex" href="the-legend-element.html#the-legend-element">legend</a><a class="noindex" href="the-li-element.html#the-li-element">li</a><a class="noindex" href="the-link-element.html#the-link-element">link</a><a class="noindex" href="the-map-element.html#the-map-element">map</a><a class="noindex" href="the-mark-element.html#the-mark-element">mark</a><a class="noindex" href="the-menu-element.html#the-menu-element">menu</a><a class="noindex" href="the-meta-element.html#the-meta-element">meta</a><a class="noindex" href="the-meter-element.html#the-meter-element">meter</a></li> </ul><ul><li><a class="noindex" href="the-nav-element.html#the-nav-element">nav</a><a class="noindex" href="the-noscript-element.html#the-noscript-element">noscript</a><a class="noindex" href="the-object-element.html#the-object-element">object</a><a class="noindex" href="the-ol-element.html#the-ol-element">ol</a><a class="noindex" href="the-optgroup-element.html#the-optgroup-element">optgroup</a><a class="noindex" href="the-option-element.html#the-option-element">option</a><a class="noindex" href="the-output-element.html#the-output-element">output</a></li> </ul><ul><li><a class="noindex" href="the-p-element.html#the-p-element">p</a><a class="noindex" href="the-param-element.html#the-param-element">param</a><a class="noindex" href="the-pre-element.html#the-pre-element">pre</a><a class="noindex" href="the-progress-element.html#the-progress-element">progress</a><a class="noindex" href="the-q-element.html#the-q-element">q</a><a class="noindex" href="the-rp-element.html#the-rp-element">rp</a><a class="noindex" href="the-rt-element.html#the-rt-element">rt</a><a class="noindex" href="the-ruby-element.html#the-ruby-element">ruby</a></li> </ul><ul><li><a class="noindex" href="the-s-element.html#the-s-element">s</a><a class="noindex" href="the-samp-element.html#the-samp-element">samp</a><a class="noindex" href="the-script-element.html#the-script-element">script</a><a class="noindex" href="the-section-element.html#the-section-element">section</a><a class="noindex" href="the-select-element.html#the-select-element">select</a><a class="noindex" href="the-small-element.html#the-small-element">small</a><a class="noindex" href="the-source-element.html#the-source-element">source</a><a class="noindex" href="the-span-element.html#the-span-element">span</a></li> </ul><ul><li><a class="noindex" href="the-strong-element.html#the-strong-element">strong</a><a class="noindex" href="the-style-element.html#the-style-element">style</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sub</a><a class="noindex" href="the-summary-element.html#the-summary-element">summary</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sup</a></li> </ul><ul><li><a class="noindex" href="the-table-element.html#the-table-element">table</a><a class="noindex" href="the-tbody-element.html#the-tbody-element">tbody</a><a class="noindex" href="the-td-element.html#the-td-element">td</a><a class="noindex" href="the-textarea-element.html#the-textarea-element">textarea</a><a class="noindex" href="the-tfoot-element.html#the-tfoot-element">tfoot</a><a class="noindex" href="the-th-element.html#the-th-element">th</a><a class="noindex" href="the-thead-element.html#the-thead-element">thead</a><a class="noindex" href="the-time-element.html#the-time-element">time</a><a class="noindex" href="the-title-element.html#the-title-element">title</a></li> </ul><ul><li><a class="noindex" href="the-tr-element.html#the-tr-element">tr</a><a class="noindex" href="the-track-element.html#the-track-element">track</a><a class="noindex" href="the-u-element.html#the-u-element">u</a><a class="noindex" href="the-ul-element.html#the-ul-element">ul</a><a class="noindex" href="the-var-element.html#the-var-element">var</a><a class="noindex" href="the-video-element.html#the-video-element">video</a><a class="noindex" href="the-wbr-element.html#the-wbr-element">wbr</a></li> </ul><ul class="jumpIndexA-other"><li><a class="noindex" href="global-attributes.html#global-attributes">global attributes</a><a class="noindex" href="index-of-terms.html#index-of-terms">terms</a></li> </ul></div> </div> <script src="jump-indexes.js"> </script><p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5</h1> </div> <div class="prev_next"> <a href="history.html">&slarr; 5.5 Session history and navigation</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="webappapis.html">6 Web application APIs &srarr;</a> <ol class="toc"><li><ol><li><a href="offline.html#offline"><span class="secno">5.7</span> Offline Web applications</a> <ol><li><a href="offline.html#introduction-4"><span class="secno">5.7.1</span> Introduction</a> <ol><li><a href="offline.html#appcacheevents"><span class="secno">5.7.1.1</span> Event summary</a></ol><li><a href="offline.html#manifests"><span class="secno">5.7.2</span> The cache manifest syntax</a> <ol><li><a href="offline.html#some-sample-manifests"><span class="secno">5.7.2.1</span> Some sample manifests</a><li><a href="offline.html#writing-cache-manifests"><span class="secno">5.7.2.2</span> Writing cache manifests</a></ol><li><a href="offline.html#application-cache-api"><span class="secno">5.7.3</span> Application cache API</a><li><a href="offline.html#browser-state"><span class="secno">5.7.4</span> Browser state</a></ol></ol></ol></div> <h3 id="offline"><span class="secno">5.7</span> Offline Web applications</h3>  <h4 id="introduction-4"><span class="secno">5.7.1</span> Introduction</h4> <p><i>This section is non-normative.</i></p> <p>In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP's coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user's browser to keep a copy of the files for use offline.</p> <p>To illustrate this, consider a simple clock applet consisting of an HTML page "<code title="">clock.html</code>", a CSS style sheet "<code title="">clock.css</code>", and a JavaScript script "<code title="">clock.js</code>".</p> <p>Before adding the manifest, these three files might look like this:</p> <pre> EXAMPLE offline/clock/clock1.html </pre> <pre> EXAMPLE offline/clock/clock1.css </pre> <pre> EXAMPLE offline/clock/clock1.js </pre> <p>If the user tries to open the "<code title="">clock.html</code>" page while offline, though, the user agent (unless it happens to have it still in the local cache) will fail with an error.</p> <p>The author can instead provide a manifest of the three files, say "<code title="">clock.appcache</code>":</p> <pre> EXAMPLE offline/clock/clock2.appcache </pre> <p>With a small change to the HTML file, the manifest (served as <code><a href="http://dev.w3.org/html5/spec/single-page.html#text/cache-manifest" id="text-cache-manifest_0">text/cache-manifest</a></code>) is linked to the application:</p> <pre> EXAMPLE offline/clock/clock2.html </pre> <p>Now, if the user goes to the page, the browser will cache the files and make them available even when the user is offline.</p> <p class="note">Authors are encouraged to include the main page in the manifest also, but in practice the page that referenced the manifest is automatically cached even if it isn't explicitly mentioned.</p> <p class="note">With the exception of "no-store" directive, HTTP cache headers and restrictions on caching pages served over TLS (encrypted, using <code title="">http:</code>) are overridden by manifests. Thus, pages will not expire from an application cache before the user agent has updated it, and even applications served over TLS can be made to work offline.</p>  <h5 id="appcacheevents"><span class="secno">5.7.1.1</span> Event summary</h5> <p><i>This section is non-normative.</i></p> <p>When the user visits a page that declares a manifest, the browser will try to update the cache. It does this by fetching a copy of the manifest and, if the manifest has changed since the user agent last saw it, redownloading all the resources it mentions and caching them anew.</p> <p>As this is going on, a number of events get fired on the <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_1">ApplicationCache</a></code> object to keep the script updated as to the state of the cache update, so that the user can be notified appropriately. The events are as follows:</p> <table><thead><tr><th>Event name</th> <th>Interface</th> <th>Fired when...</th> <th>Next events</th> <tbody><tr><td><dfn id="event-appcache-checking" title="event-appcache-checking"><code>checking</code></dfn></td> <td><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The user agent is checking for an update, or attempting to download the manifest for the first time. <strong>This is always the first event in the sequence.</strong></td> <td><code title="event-appcache-noupdate"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-noupdate" id="noupdate">noupdate</a></code>, <code title="event-appcache-downloading"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-downloading" id="downloading">downloading</a></code>, <code title="event-appcache-obsolete"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-obsolete" id="obsolete_0">obsolete</a></code>, <code title="event-appcache-error"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-error" id="error">error</a></code></td> <tr><td><dfn id="event-appcache-noupdate" title="event-appcache-noupdate"><code>noupdate</code></dfn></td> <td><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The manifest hadn't changed.</td> <td>Last event in sequence.</td> <tr><td><dfn id="event-appcache-downloading" title="event-appcache-downloading"><code>downloading</code></dfn></td> <td><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.</td> <td><code title="event-appcache-progress"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-progress" id="progress_19">progress</a></code>, <code title="event-appcache-error"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-error" id="error_0">error</a></code>, <code title="event-appcache-cached"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-cached" id="cached">cached</a></code>, <code title="event-appcache-updateready"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-updateready" id="updateready">updateready</a></code></td> <tr><td><dfn id="event-appcache-progress" title="event-appcache-progress"><code>progress</code></dfn></td> <td><code>ProgressEvent</code></td> <td>The user agent is downloading resources listed by the manifest.</td> <td><code title="event-appcache-progress"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-progress" id="progress_20">progress</a></code>, <code title="event-appcache-error"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-error" id="error_1">error</a></code>, <code title="event-appcache-cached"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-cached" id="cached_0">cached</a></code>, <code title="event-appcache-updateready"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-updateready" id="updateready_0">updateready</a></code></td> <tr><td><dfn id="event-appcache-cached" title="event-appcache-cached"><code>cached</code></dfn></td> <td><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> <td>Last event in sequence.</td> <tr><td><dfn id="event-appcache-updateready" title="event-appcache-updateready"><code>updateready</code></dfn></td> <td><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code title="dom-appcache-swapCache"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-swapcache"> swapCache()</a></code> to switch to the new cache.</td> <td>Last event in sequence.</td> <tr><td><dfn id="event-appcache-obsolete" title="event-appcache-obsolete"><code>obsolete</code></dfn></td> <td><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td> <td>Last event in sequence.</td> <tr><td rowspan="4"><dfn id="event-appcache-error" title="event-appcache-error"><code>error</code></dfn></td> <td rowspan="4"><code><a href="http://dev.w3.org/html5/spec/single-page.html#event">Event</a></code></td> <td>The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.</td> <td rowspan="3">Last event in sequence.</td> <tr><td>The manifest hadn't changed, but the page referencing the manifest failed to download properly.</td> <tr><td>A fatal error occurred while fetching the resources listed in the manifest.</td> <tr><td>The manifest changed while the update was being run.</td> <td>The user agent will try fetching the files again momentarily.</td> </table><h4 id="manifests"><span class="secno">5.7.2</span> The cache manifest syntax</h4> <h5 id="some-sample-manifests"><span class="secno">5.7.2.1</span> Some sample manifests</h5> <p><i>This section is non-normative.</i></p> <div class="example"> <p>This example manifest requires two images and a style sheet to be cached and whitelists a CGI script.</p> <pre> CACHE MANIFEST # the above line is required # this is a comment # there can be as many of these anywhere in the file # they are all ignored # comments can have spaces before them # but must be alone on the line # blank lines are ignored too # these are files that need to be cached they can either be listed # first, or a "CACHE:" header could be put before them, as is done # lower down. images/sound-icon.png images/background.png # note that each file has to be put on its own line # here is a file for the online whitelist -- it isn't cached, and # references to this file will bypass the cache, always hitting the # network (or trying to, if the user is offline). NETWORK: comm.cgi # here is another set of files to cache, this time just the CSS file. CACHE: style/default.css </pre> <p>It could equally well be written as follows:</p> <pre> CACHE MANIFEST NETWORK: comm.cgi CACHE: style/default.css images/sound-icon.png images/background.png </pre></div> <div class="example"> <p>Offline application cache manifests can use absolute paths or even absolute URLs:</p> <pre> CACHE MANIFEST /main/home /main/app.js /settings/home /settings/app.js http://img.example.com/logo.png http://img.example.com/check.png http://img.example.com/cross.png </pre></div> <div class="example"> <p>The following manifest defines a catch-all error page that is displayed for any page on the site while the user is offline. It also specifies that the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-onlinewhitelist-wildcard" title="concept-appcache-onlinewhitelist-wildcard">online whitelist wildcard flag</a> is <i title="">open</i>, meaning that accesses to resources on other sites will not be blocked. (Resources on the same site are already not blocked because of the catch-all fallback namespace.)</p> <p>So long as all pages on the site reference this manifest, they will get cached locally as they are fetched, so that subsequent hits to the same page will load the page immediately from the cache. Until the manifest is changed, those pages will not be fetched from the server again. When the manifest changes, then all the files will be redownloaded.</p> <p>Subresources, such as style sheets, images, etc, would only be cached using the regular HTTP caching semantics, however.</p> <pre> CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * </pre></div> <h5 id="writing-cache-manifests"><span class="secno">5.7.2.2</span> Writing cache manifests</h5> <p>Manifests must be served using the <code><a href="http://dev.w3.org/html5/spec/single-page.html#text/cache-manifest" id="text-cache-manifest_1">text/cache-manifest</a></code> <a href="http://dev.w3.org/html5/spec/single-page.html#mime-type" id="mime-type_14">MIME type</a>. All resources served using the <code><a href="http://dev.w3.org/html5/spec/single-page.html#text/cache-manifest" id="text-cache-manifest_2">text/cache-manifest</a></code> <a href="http://dev.w3.org/html5/spec/single-page.html#mime-type" id="mime-type_15">MIME type</a> must follow the syntax of application cache manifests, as described in this section.</p> <p>An application cache manifest is a text file, whose text is encoded using UTF-8. Data in application cache manifests is line-based. Newlines must be represented by "LF" (U+000A) characters, "CR" (U+000D) characters, or "CR" (U+000D) "LF" (U+000A) pairs. <a href="http://dev.w3.org/html5/spec/single-page.html#refsRFC3629">[RFC3629]</a></p> <p class="note">This is a <a href="http://dev.w3.org/html5/spec/single-page.html#willful-violation" id="willful-violation_2">willful violation</a> of RFC 2046, which requires all <code title="">text/*</code> types to only allow CRLF line breaks. This requirement, however, is outdated; the use of CR, LF, and CRLF line breaks is commonly supported and indeed sometimes CRLF is <em>not</em> supported by text editors. <a href="http://dev.w3.org/html5/spec/single-page.html#refsRFC2046">[RFC2046]</a></p> <p>The first line of an application cache manifest must consist of the string "CACHE", a single U+0020 SPACE character, the string "MANIFEST", and either a U+0020 SPACE character, a "tab" (U+0009) character, a "LF" (U+000A) character, or a "CR" (U+000D) character. The first line may optionally be preceded by a "BOM" (U+FEFF) character. If any other text is found on the first line, it is ignored.</p> <p>Subsequent lines, if any, must all be one of the following:</p> <dl><dt>A blank line</dt> <dd> <p>Blank lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters only.</p> </dd> <dt>A comment</dt> <dd> <p>Comment lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, followed by a single "http://dev.w3.org/html5/spec/single-page.html#" (U+0023) character, followed by zero or more characters other than "LF" (U+000A) and "CR" (U+000D) characters.</p> <p class="note">Comments must be on a line on their own. If they were to be included on a line with a URL, the "http://dev.w3.org/html5/spec/single-page.html#" would be mistaken for part of a fragment identifier.</p> </dd> <dt>A section header</dt> <dd> <p>Section headers change the current section. There are four possible section headers:</p> <dl><dt><code>CACHE:</code></dt> <dd>Switches to the <dfn id="concept-appcache-manifest-explicit" title="concept-appcache-manifest-explicit">explicit section</dfn>.</dd> <dt><code>FALLBACK:</code></dt> <dd>Switches to the <dfn id="concept-appcache-manifest-fallback" title="concept-appcache-manifest-fallback">fallback section</dfn>.</dd> <dt><code>NETWORK:</code></dt> <dd>Switches to the <dfn id="concept-appcache-manifest-network" title="concept-appcache-manifest-network">online whitelist section</dfn>. </dd> </dl><p>Section header lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, followed by one of the names above (including the ":)" (U+003A) character followed by zero or more U+0020 SPACE and "tab" (U+0009) characters.</p> <p>Ironically, by default, the current section is the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-explicit" id="concept-appcache-manifest-explicit_0" title="concept-appcache-manifest-explicit">explicit section</a>.</p> </dd> <dt>Data for the current section</dt> <dd> <p>The format that data lines must take depends on the current section.</p> <p>When the current section is the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-explicit" id="concept-appcache-manifest-explicit_1" title="concept-appcache-manifest-explicit">explicit section</a>, data lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, a <a href="http://dev.w3.org/html5/spec/single-page.html#valid-url" id="valid-url_3">valid URL</a> identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and "tab" (U+0009) characters.</p> <p>When the current section is the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-fallback" id="concept-appcache-manifest-fallback_0" title="concept-appcache-manifest-fallback">fallback section</a>, data lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, a <a href="http://dev.w3.org/html5/spec/single-page.html#valid-url" id="valid-url_4">valid URL</a> identifying a resource other than the manifest itself, one or more U+0020 SPACE and "tab" (U+0009) characters, another <a href="http://dev.w3.org/html5/spec/single-page.html#valid-url" id="valid-url_5">valid URL</a> identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and "tab" (U+0009) characters.</p> <p>When the current section is the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-network" id="concept-appcache-manifest-network_0" title="concept-appcache-manifest-network">online whitelist section</a>, data lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, either a single "*" (U+002A) character  or a <a href="http://dev.w3.org/html5/spec/single-page.html#valid-url" id="valid-url_6">valid URL</a> identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and "tab" (U+0009) characters.</p>  </dd> </dl><p>Manifests may contain sections more than once. Sections may be empty.</p> <p>URLs that are to be fallback pages associated with <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">fallback namespaces</a>, and those namespaces themselves, must be given in <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-fallback" id="concept-appcache-manifest-fallback_1" title="concept-appcache-manifest-fallback">fallback sections</a>, with the namespace being the first URL of the data line, and the corresponding fallback page being the second URL. All the other pages to be cached must be listed in <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-explicit" id="concept-appcache-manifest-explicit_2" title="concept-appcache-manifest-explicit">explicit sections</a>.</p> <p><a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">Fallback namespaces</a> and <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-fallback" title="concept-appcache-fallback">fallback entries</a> must have the <a href="http://dev.w3.org/html5/spec/single-page.html#same-origin">same origin</a> as the manifest itself.</p> <p>A <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">fallback namespace</a> must not be listed more than once.</p> <p>Namespaces that the user agent is to put into the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> must all be specified in <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-manifest-network" id="concept-appcache-manifest-network_1" title="concept-appcache-manifest-network">online whitelist sections</a>. (This is needed for any URL that the page is intending to use to communicate back to the server.) To specify that all URLs are automatically whitelisted in this way, a "*" (U+002A) character may be specified as one of the URLs. </p> <p>Authors should not include namespaces in the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> for which another namespace in the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> is a <a href="http://dev.w3.org/html5/spec/single-page.html#prefix-match" id="prefix-match_0">prefix match</a>.</p> <p>Relative URLs must be given relative to the manifest's own URL. All URLs in the manifest must have the same <a href="http://dev.w3.org/html5/spec/single-page.html#url-scheme" title="url-scheme"><scheme></a> as the manifest itself (either explicitly or implicitly, through the use of relative URLs).</p> <p>URLs in manifests must not have fragment identifiers (i.e. the U+0023 NUMBER SIGN character isn't allowed in URLs in manifests).</p> <p><a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">Fallback namespaces</a> and namespaces in the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> are matched by <a href="http://dev.w3.org/html5/spec/single-page.html#prefix-match" id="prefix-match_1">prefix match</a>.</p> <h4 id="application-cache-api"><span class="secno">5.7.3</span> Application cache API</h4> <pre class="idl"> interface <dfn id="applicationcache">ApplicationCache</dfn> : <a href="http://dev.w3.org/html5/spec/single-page.html#eventtarget">EventTarget</a> { // <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-status" title="concept-appcache-status">update status</a> const unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-uncached" id="dom-appcache-uncached_0" title="dom-appcache-UNCACHED">UNCACHED</a> = 0; const unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-idle" id="dom-appcache-idle_0" title="dom-appcache-IDLE">IDLE</a> = 1; const unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-checking" id="dom-appcache-checking_0" title="dom-appcache-CHECKING">CHECKING</a> = 2; const unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-downloading" id="dom-appcache-downloading_0" title="dom-appcache-DOWNLOADING">DOWNLOADING</a> = 3; const unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-updateready" id="dom-appcache-updateready_0" title="dom-appcache-UPDATEREADY">UPDATEREADY</a> = 4; const unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-obsolete" id="dom-appcache-obsolete_0" title="dom-appcache-OBSOLETE">OBSOLETE</a> = 5; readonly attribute unsigned short <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-status" title="dom-appcache-status">status</a>; // updates void <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-update" title="dom-appcache-update">update</a>(); void <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-abort" title="dom-appcache-abort">abort</a>(); void <a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-swapcache" title="dom-appcache-swapCache">swapCache</a>(); // events attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_218">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-onchecking" title="handler-appcache-onchecking">onchecking</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_219">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-onerror" title="handler-appcache-onerror">onerror</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_220">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-onnoupdate" title="handler-appcache-onnoupdate">onnoupdate</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_221">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-ondownloading" title="handler-appcache-ondownloading">ondownloading</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_222">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-onprogress" title="handler-appcache-onprogress">onprogress</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_223">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-onupdateready" title="handler-appcache-onupdateready">onupdateready</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_224">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-oncached" title="handler-appcache-oncached">oncached</a>; attribute <a href="http://dev.w3.org/html5/spec/single-page.html#eventhandler" id="eventhandler_225">EventHandler</a> <a href="http://dev.w3.org/html5/spec/single-page.html#handler-appcache-onobsolete" title="handler-appcache-onobsolete">onobsolete</a>; }; </pre> <dl class="domintro"><dt><var title="">cache</var> = <var title="">window</var> . <code title="dom-applicationCache"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-applicationcache"> applicationCache</a></code></dt> <dd> <p>(In a window.) Returns the <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_2">ApplicationCache</a></code> object that applies to the <a href="http://dev.w3.org/html5/spec/single-page.html#active-document" id="active-document_8">active document</a> of that <code><a href="http://dev.w3.org/html5/spec/single-page.html#window" id="window_16">Window</a></code>.</p> </dd> <dt><var title="">cache</var> = <var title="">self</var> . <code title="dom-applicationCache"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-applicationcache"> applicationCache</a></code></dt> <dd> <p>(In a shared worker.) Returns the <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_3">ApplicationCache</a></code> object that applies to the current shared worker. <a href="http://dev.w3.org/html5/spec/single-page.html#refsWEBWORKERS">[WEBWORKERS]</a></p> </dd> <dt><var title="">cache</var> . <code title="dom-appcache-status"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-status"> status</a></code></dt> <dd> <p>Returns the current status of the application cache, as given by the constants defined below.</p> </dd> <dt><var title="">cache</var> . <code title="dom-appcache-update"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-update"> update</a></code>()</dt> <dd> <p>Invokes the <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-download-process"> application cache download process</a>.</p> <p>Throws an <code><a href="http://dev.w3.org/html5/spec/single-page.html#invalidstateerror">InvalidStateError</a></code> exception if there is no application cache to update.</p> <p>Calling this method is not usually necessary, as user agents will generally take care of updating <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache" title="application cache">application caches</a> automatically.</p> <p>The method can be useful in situations such as long-lived applications. For example, a Web mail application might stay open in a browser tab for weeks at a time. Such an application could want to test for updates each day.</p> </dd> <dt><var title="">cache</var> . <code title="dom-appcache-abort"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-abort">abort</a></code>()</dt> <dd> <p>Cancels the <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-download-process"> application cache download process</a>.</p> <p>This method is intended to be used by Web application showing their own caching progress UI, in case the user wants to stop the update (e.g. because bandwidth is limited).</p> </dd> <dt><var title="">cache</var> . <code title="dom-appcache-swapCache"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-swapcache"> swapCache</a></code>()</dt> <dd> <p>Switches to the most recent application cache, if there is a newer one. If there isn't, throws an <code><a href="http://dev.w3.org/html5/spec/single-page.html#invalidstateerror">InvalidStateError</a></code> exception.</p> <p>This does not cause previously-loaded resources to be reloaded; for example, images do not suddenly get reloaded and style sheets and scripts do not get reparsed or reevaluated. The only change is that subsequent requests for cached resources will obtain the newer copies.</p> <p>The <code title="event-appcache-updateready"><a href="http://dev.w3.org/html5/spec/single-page.html#event-appcache-updateready" id="updateready_1">updateready</a></code> event will fire before this method can be called. Once it fires, the Web application can, at its leisure, call this method to switch the underlying cache to the one with the more recent updates. To make proper use of this, applications have to be able to bring the new features into play; for example, reloading scripts to enable new features.</p> <p>An easier alternative to <code title="dom-appcache-swapCache"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-appcache-swapcache"> swapCache()</a></code> is just to reload the entire page at a time suitable for the user, using <code title="dom-location-reload"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-location-reload"> location.reload()</a></code>.</p> </dd> </dl><dl><dt><dfn id="dom-appcache-uncached" title="dom-appcache-UNCACHED"><code>UNCACHED</code></dfn> (numeric value 0)</dt> <dd> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_4">ApplicationCache</a></code> object's <a href="http://dev.w3.org/html5/spec/single-page.html#cache-host">cache host</a> is not associated with an <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> at this time.</p> </dd> <dt><dfn id="dom-appcache-idle" title="dom-appcache-IDLE"><code>IDLE</code></dfn> (numeric value 1)</dt> <dd> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_5">ApplicationCache</a></code> object's <a href="http://dev.w3.org/html5/spec/single-page.html#cache-host">cache host</a> is associated with an <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> whose <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a>'s <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-status" title="concept-appcache-status">update status</a> is <i>idle</i>, and that <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> is the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-newer" title="concept-appcache-newer">newest</a> cache in its <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a>, and the <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a> is not marked as <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-obsolete" title="concept-appcache-obsolete">obsolete</a>.</p> </dd> <dt><dfn id="dom-appcache-checking" title="dom-appcache-CHECKING"><code>CHECKING</code></dfn> (numeric value 2)</dt> <dd> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_6">ApplicationCache</a></code> object's <a href="http://dev.w3.org/html5/spec/single-page.html#cache-host">cache host</a> is associated with an <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> whose <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a>'s <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-status" title="concept-appcache-status">update status</a> is <i>checking</i>.</p> </dd> <dt><dfn id="dom-appcache-downloading" title="dom-appcache-DOWNLOADING"><code>DOWNLOADING</code></dfn> (numeric value 3)</dt> <dd> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_7">ApplicationCache</a></code> object's <a href="http://dev.w3.org/html5/spec/single-page.html#cache-host">cache host</a> is associated with an <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> whose <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a>'s <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-status" title="concept-appcache-status">update status</a> is <i>downloading</i>.</p> </dd> <dt><dfn id="dom-appcache-updateready" title="dom-appcache-UPDATEREADY"><code>UPDATEREADY</code></dfn> (numeric value 4)</dt> <dd> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_8">ApplicationCache</a></code> object's <a href="http://dev.w3.org/html5/spec/single-page.html#cache-host">cache host</a> is associated with an <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> whose <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a>'s <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-status" title="concept-appcache-status">update status</a> is <i>idle</i>, and whose <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a> is not marked as <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-obsolete" title="concept-appcache-obsolete">obsolete</a>, but that <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> is <em>not</em> the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-newer" title="concept-appcache-newer">newest</a> cache in its group.</p> </dd> <dt><dfn id="dom-appcache-obsolete" title="dom-appcache-OBSOLETE"><code>OBSOLETE</code></dfn> (numeric value 5)</dt> <dd> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#applicationcache" id="applicationcache_9">ApplicationCache</a></code> object's <a href="http://dev.w3.org/html5/spec/single-page.html#cache-host">cache host</a> is associated with an <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache">application cache</a> whose <a href="http://dev.w3.org/html5/spec/single-page.html#application-cache-group"> application cache group</a> is marked as <a href="http://dev.w3.org/html5/spec/single-page.html#concept-appcache-obsolete" title="concept-appcache-obsolete">obsolete</a>.</p> </dd> </dl><h4 id="browser-state"><span class="secno">5.7.4</span> Browser state</h4> <pre class="idl"> [NoInterfaceObject] interface <dfn id="navigatoronline">NavigatorOnLine</dfn> { readonly attribute boolean <a href="http://dev.w3.org/html5/spec/single-page.html#dom-navigator-online" title="dom-navigator-onLine">onLine</a>; }; </pre> <dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-navigator">navigator</a></code> . <code title="dom-navigator-onLine"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-navigator-online"> onLine</a></code></dt> <dd> <p>Returns false if the user agent is definitely offline (disconnected from the network). Returns true if the user agent might be online.</p> <p>The events <code title="event-online"><a href="http://dev.w3.org/html5/spec/single-page.html#event-online">online</a></code> and <code title="event-offline"><a href="http://dev.w3.org/html5/spec/single-page.html#event-offline">offline</a></code> are fired when the value of this attribute changes.</p> </dd> </dl><p class="note">This attribute is inherently unreliable. A computer can be connected to a network without having Internet access.</p> <div class="example"> <p>In this example, an indicator is updated as the browser goes online and offline.</p> <pre> <!DOCTYPE HTML> <html> <head> <title>Online status</title> <script> function updateIndicator() { document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; } </script> </head> <body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> <p>The network is: <span id="indicator">(state unknown)</span> </body> </html> </pre></div> 