第4讲移动设备web的离线应用.pptVIP

第4讲 移动设备web的离线应用 请到 240FTP ../ HTML5移动Web开发 下载第4讲文件夹 主要内容 概述 检测支持情况 manifest文件 applicationCache 离线web应用 习题 1、概述 1、概述 查看浏览器的缓存文件 Firefox中，about:cache 查看浏览器的缓存文件 2、支持情况 例子： ex4_1_test.html 例子： ex4_1_test.html 例子： ex4_1_test.html 3、manifest文件 4、applicationCache 以ex3_4_session为例，增加离线应用。 见文件夹：“ex4_(ex3_4_session)” 选择需要本地存储的文件 例如： 新建文件ex4_session.manifest 添加内容 CACHE MANIFEST modernizr.js h5utils.js ex3_4_session.html NETWORK ex3_4_session_next.html FALLBACK ex3_4_session_next.html offline.html 修改ex3_4_session.html 完成 5、离线web应用 离线clock 已给代码（文件夹ex4_2）为普通页面，如果离线，则不能显示。 clock.html clock.css clock.js 1、创建clock.html !-- clock.html -- !DOCTYPE HTML html head titleClock/title script src=clock.js/script link rel=stylesheet href=clock.css /head body pThe time is: output id=clock/output/p /body /html 2、clock.css 和 clock.js /* clock.css */ output { font: 2em sans-serif; } /* clock.js */ setTimeout(function () { document.getElementById(clock).value = new Date(); }, 1000); 现在，如果没有网络，则网页无法显示。 当用户在离线状态下访问“clock.html”时，页面将无法展现。为了支持离线访问，开发者必须添加 cache manifest 文件，指明需要缓存的资源。这个例子中的 cache manifest 文件为“clock.manifest”，它声明了 3 个需要缓存的资源文件“clock.html”、“clock.css”和“clock.js”。 请大家动手修改代码，使得页面在离线状态下也能访问。 解答 案例--便签 简单的网页便签，用户点击“New Note”按钮可以在弹出框中创建新的便签，双击某便签就表示删除它。 HTML5移动Web开发 第*页 HTML5移动Web开发 *广州大学华软软件学院 HTML5移动Web开发 第*页 此页内容的解释在书上37页 * *