html5之创建离线Web应用程序的示例代码

百变鹏仔 3个月前 (10-18) #H5教程

文章标签离线

离线应用程序缓存功能允许我们指定web应用程序所需的全部资源，

这样浏览器就能在加载HTML文档时把它们都下载下来。

1)定义浏览器缓存：

启用离线缓存——创建一个清单文件，并在html元素的manifest属性里引用它；

指定离线应用程序里要缓存的资源——在清单文件的顶部或者CACHE区域里列出资源；

立即学习“前端免费学习笔记（深入）”；

指定资源不可用时要显示的备用内容——在清单文件的FALLBACK区域里列出内容；

指向始终向服务器请求的资源——在清单文件的BETWORK区域里列出内容；

示例：首先创建fruit.appcache的清单文件

    CACHE MANIFEST            example.html      banana100.png            FALLBACK:      * 404.html            NETWORK:      cherries100.png            CACHE:       apple100.png

再创建404.html文件，用于链接指向的html文件不在离线缓存中就可以用它来代替

<!DOCTYPE HTML><html manifest="fruit.appcache">    <head>        <title>Offline</title>    </head>    <body>      <h1>您要的页面找不到了！</h1>      或许您可以帮我们找找孩子！    </body></html>

最后创建需要启用离线缓存的html文件

<!DOCTYPE HTML><html manifest="fruit.appcache">    <head>        <title>Example</title>        <style>            img {border: medium double black; padding: 5px; margin: 5px;}        </style>    </head>    <body>        <img  id="imgtarget" src="banana100.png"/ alt="html5之创建离线Web应用程序的示例代码" >        <p>            <button id="banana">Banana</button>            <button id="apple">Apple</button>            <button id="cherries">Cherries</button>        </p>        <a href="otherpage.html">Link to another page</a>        <script>            var buttons = document.getElementsByTagName("button");            for (var i = 0; i < buttons.length; i++) {                buttons[i].onclick = handleButtonPress;            }                        function handleButtonPress(e) {                document.getElementById("imgtarget").src = e.target.id + "100.png";            }        </script>    </body></html>

2）检测浏览器状态：

window.navigator.online——如果浏览器确定为离线就返回false,如果浏览器可能在线则返回true；

3）使用离线缓存：

可以通过调用window.applicationCache属性直接使用离线缓存，它会返回一个ApplicationCache对象；
ApplicationCache对象成员：

update()——更新缓存以确保清单里的项目都已下载了最新的版本；

swapCache()——交换当前缓存与较新的缓存；

status——返回缓存的状态；

3.1）ApplicationCache对象的status属性值：

0——UNCACHED——此文档没有缓存，或者缓存数据尚未被下载；

1——IDLE——缓存没有执行任何操作；

2——CHECKING——浏览器正在检查清单或清单所指定项目的更新；

3——DOWNLOADING——浏览器正在下载清单或内容的更新；

4——UPDATEREADY——有更新后的缓存数据可用；

5——OBSOLETE——缓存数据已经废弃，不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的

（通常表明清单文件已被移走/删除）；

3.2）ApplicationCache对象定义的事件，在缓存状态改变时触发：

checking——浏览器正在获取初始清单或者检查清单更新；

noupdate——没有更新可用，当前的清单是最新版；

downloading——浏览器正在下载清单里指定的内容；

progress——在下载阶段中触发；

cached——清单里指定的所有内容都已被下载和缓存了；

updateready——新资源已下载并且可以使用了；

obsolete——缓存已废弃；

CACHE MANIFESTCACHE: example.htmlbanana100.pngcherries100.pngapple100.pngFALLBACK:* offline2.html

<!DOCTYPE HTML><html manifest="fruit.appcache">    <head>        <title>Example</title>        <style>            img {border: medium double black; padding: 5px; margin: 5px;}            p {margin-top: 10px; margin-bottom: 10px}            table {margin: 10px; border-collapse: collapse;}            th, td {padding: 2px;}            body > * {float: left;}        </style>    </head>    <body>        <p>            <img  id="imgtarget" src="banana100.png"/ alt="html5之创建离线Web应用程序的示例代码" >            <p>                <button id="banana">Banana</button>                <button id="apple">Apple</button>                <button id="cherries">Cherries</button>            </p>            <p>                <button id="update">Update</button>                <button id="swap">Swap Cache</button>            </p>            The status is: <span id="status"></span>        </p>        <table id="eventtable" border="1">            <tr><th>Event Type</th></tr>        </table>        <script>            var buttons = document.getElementsByTagName("button");            for (var i = 0; i < buttons.length; i++) {                buttons[i].onclick = handleButtonPress;            }                        window.applicationCache.onchecking =  handleEvent;            window.applicationCache.onnoupdate = handleEvent;            window.applicationCache.ondownloading = handleEvent;            window.applicationCache.onupdateready = handleEvent;            window.applicationCache.oncached = handleEvent;            window.applicationCache.onobselete = handleEvent;                        function handleEvent(e) {                document.getElementById("eventtable").innerHTML +=                    "<tr><td>" + e.type + "</td></td>";                checkStatus();            }                        function handleButtonPress(e) {                switch (e.target.id) {                    case &#39;swap&#39;:                        window.applicationCache.swapCache();                        break;                    case &#39;update&#39;:                        window.applicationCache.update();                        checkStatus();                        break;                    default:                        document.getElementById("imgtarget").src = e.target.id                            + "100.png";                }            }                        function checkStatus() {                var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",                                   "UPDATEREADY", "OBSOLETE"];                var status = window.applicationCache.status;                document.getElementById("status").innerHTML = statusNames[status];            }                    </script>    </body></html>

文章推荐

html5之创建离线Web应用程序的示例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集