(优质文档)离线应用程序PPT演示课件.pptVIP

. 第8章 离线应用程序 . 第*页 第8章 离线应用程序 本章概述 本章的学习目标 主要内容 . 第*页 本章概述 HTML5应用不需要始终保持与网络连接，目前主流浏览器的最新版本都提供了HTML5缓存技术的支持。HTML5提供了一个本地缓存使用的API——ApplicationCache，使用这个API，可以实现离线Web应用程序的开发。HTML5离线缓存的核心应用是：在用户没有与因特网连接时，依然能够访问站点或应用；当用户和因特网连接时，自动更新缓存数据。 离线缓存包含了两部分内容：manifest缓存清单和JavaScript接口。其中，manifest缓存文件包含了一些需要缓存的资源清单；JavaScript接口提供了用于更新缓存文件的方法以及对缓存文件的操作。 . 第*页 本章的学习目标 掌握离线Web应用程序的基本概念； 掌握manifest文件在离线缓存中的使用； 掌握使用applicationCache对象来手动更新缓存的方法。 . 第*页 主要内容 8.1 离线Web应用程序详解 8.2 HTML5离线应用详解 8.3 applicationCache对象 8.4 缓存网站的首页 8.5 本章小结 . 第*页 8.1 离线Web应用程序详解 8.1.1 本地缓存技术产生的原因 8.1.2 本地缓存概述 8.1.3 本地缓存与浏览器网页缓存的区别 8.1.4 浏览器支持检测 . 第*页 8.1.1 本地缓存技术产生的原因 用户参与Web的需要 间断性网络下Web应用的使用需要 . 第*页 8.1.2 本地缓存概述 HTML5的离线应用缓存使得在无网络链接状态下运行应用程序成为可能，这类应用程序用处很多，如起草电子邮件草稿时就不需要链接因特网。HTML5中引入的离线应用缓存，使得Web应用程序可以在没有网络连接的情况下运行。 通过HTML5的本地缓存技术，开发人员可以直接控制应用程序缓存。利用缓存清单文件manifest可以将相关资源组织到同一个逻辑应用中，这样Web应用就拥有了本来只属于桌面应用的特性。 . 第*页 8.1.3 本地缓存与浏览器网页缓存的区别 在没有HTML5的本地缓存之前，Web应用程序开发依赖的是网页缓存来实现离线使用。Web应用程序的本地缓存与浏览器的网页缓存在许多方面都存在着明显的区别。首先，本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存，而本地缓存只缓存那些你指定缓存的网页。其次，网页缓存也是不安全、不可靠的，因为我们不知道在网站中到底缓存了哪些网页，以及缓存了网页上的哪些资源。而本地缓存是可靠的 . 第*页 8.1.4 浏览器支持检测 目前各大浏览器都支持HTML5离线应用。在使用离线应用API前，最好使用脚本先检测浏览器是否支持。检测方法如下： if(window.applicationCache){ //浏览器支持离线应用 }else{ //浏览器不支持离线应用 } . 第*页 主要内容 8.1 离线Web应用程序详解 8.2 HTML5离线应用详解 8.3 applicationCache对象 8.4 缓存网站的首页 8.5 本章小结 . 第*页 8.2 HTML5离线应用详解 8.2.1 Web服务器配置 8.2.2 manifest文件结构与含义 8.2.3 搭建离线应用程序 8.2.4 离线应用中浏览器和服务器交互过程 . 第*页 8.2.1 Web服务器配置 本节主要以常用的Web服务器Apache和Python举例进行配置。 Apache: Python的配置: 打开PYTHON_HOME/Lib/mimetypes.py文件并添加一行代码： .manifest:text/cache-manifest manifest; . 第*页 8.2.2 manifest文件结构与含义 manifest文件的用途是列出需要缓存的文件清单。manifest文件是一个文本文件，编码格式必须为UTF-8。该文件没有强制的后缀名，但习惯以manifest为后缀名。 . 第*页 8.2.2 manifest文件结构与含义 manifest文件: CACHE MANIFEST #version 1.0 login.html register.html findpwd.html css/style.css imgs/alipay-i-logo-big.png imgs/alipay-i-icons.png js/mui-min.js CACHE index.html home.css imgs/logo.png js/main.js NETW