HTML5程序设计及实践第8章 HTML5 应用程序缓存.pptVIP

实现离线应用 1、构建HTML页面，部署到tomcat服务器，在线状态和离线状态浏览结果为 实现离线应用 2、构建manifest清单文件:离线应用包含一个manifest清单文件，此文件中列出了浏览器为离线应用缓存的所有资源。实际上，manifest文件是一个文本文件，列出了离线访问应用时所需缓存的文件清单。新建一个以manifest为扩展名的文件，命名为offline.manifest，在该文件中编写清单信息。 编写完manifest文件后，在index.html文件引用清单文件 CACHE MANIFEST #version 1.0 ? #指明缓存入口 CACHE: index.html images/banner1.jpg ? #以下资源必须在线访问 NETWORK: ? #如果index.html无法访问则用404.html代替 FALLBACK: /index.html /404.html html manifest=offline.manifest manifest清单文件的结构 #version 1.0 –缓存文件版本号。 CACHE - 在此标题下列出的文件将在首次下载后进行缓存。 CACHE是默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存。 连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存，可使用通配符。使用星号来指示所有其他资源/文件都需要因特网连接 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）。 可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。 实现离线应用 3、清单文件对应的mime-type应该是 text/cache-manifest所有需要配置服务器来发送对应的MIME类型信息。在 Apache 中提供此 MIME 类型，可直接在web.xml中指定MIME类型 mime-mapping extensionmanifest/extension mime-typetext/cache-manifest/mime-type /mime-mapping 实现离线应用 3、在index.html中添加脚本，检查浏览器是否支持应用程序缓存。 重新发布网页到Tomcat服务器，第一次运行程序后，浏览器会对网站进行离线缓存，然后停止Tomcat服务器，在浏览器中打开页面，仍然可以正常显示 script if(window.applicationCache){ } else{ alert(该浏览器不支持HTML5离线应用缓存！); } /script 更新缓存 1、在index.html中添加脚本，更新缓存。 或者注册缓存更新就绪事件 var appCache = window.applicationCache; appCache.update(); if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); } window.applicationCache.addEventListener(updateready,function(){ if(window.applicationCache.status == window.applicationCache.UPDATEREADY){ //更新到最新的缓存，但不会加载修改后的内容 window.applicationCache.swapCache(); if(confirm(有新的网页版本，是否更新？)){ //重新加载页面，重新缓存 window.location.reload(); } } },false); 更新缓存 2、修改manifest文件版本号 CACHE MANIFEST #version 1.1 #指明缓存入口 CACHE: index.html images/banner1.png offline.manifest #以下资源必须在线访问 NETWORK: #如果index.html无法访问则用404.html代替 FALLBACK: index.html 404.html a