移动设备web的离线应用.ppt

HTML5移动移动Web开发开发第第4讲讲 移动设备移动设备web的离线应用的离线应用请到请到 240FTP ./HTML5移动移动Web开发开发下载下载第第4讲文件夹讲文件夹广州大学华软软件学院广州大学华软软件学院HTML5移动移动Web开发开发第第2页页主要内容主要内容1.概述概述2.检测支持情况检测支持情况3.manifest文件文件4.applicationCache5.离线离线web应用应用6.习题习题HTML5移动移动Web开发开发第第3页页1、概述、概述HTML5移动移动Web开发开发第第4页页1、概述、概述HTML5移动移动Web开发开发第第5页页HTML5移动移动Web开发开发第第6页页查看浏览器的缓存文件查看浏览器的缓存文件Firefox中，中，about:cacheHTML5移动移动Web开发开发第第8页页查看浏览器的缓存文件查看浏览器的缓存文件HTML5移动移动Web开发开发第第9页页2、支持情况、支持情况HTML5移动移动Web开发开发第第10页页例子：例子：ex4_1_test.htmlHTML5移动移动Web开发开发第第11页页例子：例子：ex4_1_test.htmlHTML5移动移动Web开发开发第第12页页例子：例子：ex4_1_test.htmlHTML5移动移动Web开发开发第第13页页3、manifest文件文件HTML5移动移动Web开发开发第第14页页HTML5移动移动Web开发开发第第15页页4、applicationCacheHTML5移动移动Web开发开发第第16页页HTML5移动移动Web开发开发第第17页页以以ex3_4_session为例，增加离线应用。为例，增加离线应用。见文件夹：见文件夹：“ex4_(ex3_4_session)”选择需要本地存储的文件选择需要本地存储的文件例如：例如：HTML5移动移动Web开发开发第第18页页新建文件新建文件ex4_session.manifest添加内容添加内容CACHE MANIFESTmodernizr.jsh5utils.jsex3_4_session.htmlNETWORKex3_4_session_next.htmlFALLBACKex3_4_session_next.html offline.htmlHTML5移动移动Web开发开发第第19页页修改修改ex3_4_session.htmlHTML5移动移动Web开发开发第第20页页完成完成HTML5移动移动Web开发开发第第21页页5、离线、离线web应用应用离线离线clock已给代码（文件夹已给代码（文件夹ex4_2）为普通页面，如果离）为普通页面，如果离线，则不能显示。线，则不能显示。clock.htmlclock.cssclock.jsHTML5移动移动Web开发开发第第22页页1、创建、创建clock.html Clock The time is:HTML5移动移动Web开发开发第第23页页2、clock.css 和和 clock.js /*clock.css*/output font:2em sans-serif;/*clock.js*/setTimeout(function()document.getElementById(clock).value=new Date();,1000);HTML5移动移动Web开发开发第第24页页现在，如果没有网络，则网页无法显示。现在，如果没有网络，则网页无法显示。HTML5移动移动Web开发开发第第25页页当用户在离线状态下访问当用户在离线状态下访问“clock.html”时，页面时，页面将无法展现。为了支持离线访问，开发者必须添加将无法展现。为了支持离线访问，开发者必须添加 cache manifest 文件，指明需要缓存的资源。这文件，指明需要缓存的资源。这个例子中的个例子中的 cache manifest 文件为文件为“clock.manifest”，它声明了，它声明了 3 个需要缓存的资个需要缓存的资源文件源文件“clock.html”、“clock.css”和和“clock.js”。HTML5移动移动Web开发开发第第26页页请大家动手修改代码，使得页面在离线状态下也能请大家动手修改代码，使得页面在离线状态下也能访问。访问。解答解答HTML5移动移动Web开发开发第第27页页案例案例-便签便签简单的网页便签，简单的网页便签，用户点击用户点击“New Note”按钮可以按钮可以在弹出框中创建新的便签，双击某便签就表示删除在弹出框中创建新的便签，双击某便签就表示删除它。它。HTML5移动移动Web开发开发第第28页页HTML5移动移动Web开发开发第第29页页