HTML5+CSS3网页设计基础教程第8章 离线应用程序

HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第19页
8.3.2 applicationCache对象的 事件



applicationCache对象除了具有update方法和 swapCache方法外，还有一系列的事件: checking事件 error事件 downloading事件 cached事件 noupdate事件 updateready事件

Python的配置:
打开PYTHON_HOME/Lib/mimetypes.py文件并添加一 行代码： '.manifest':'text/cache-manifest manifest';
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第12页
8.2.2 manifest文件结构与含义


8.2.1 8.2.2 8.2.3 8.2.4
Web服务器配置 manifest文件结构与含义 搭建离线应用程序 离线应用中浏览器和服务器交互过程
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第11页
8.2.1 Web服务器配置

本节主要以常用的Web服务器Apache和Python 举例进行配置。 Apache:
第8章 离线应用程序
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第1页
本章概述


HTML5应用不需要始终保持与网络连接，目前主流浏览 器的最新版本都提供了HTML5缓存技术的支持。HTML5 提供了一个本地缓存使用的API——ApplicationCache， 使用这个API，可以实现离线Web应用程序的开发。 HTML5离线缓存的核心应用是：在用户没有与因特网连 接时，依然能够访问站点或应用；当用户和因特网连接时， 自动更新缓存数据。 离线缓存包含了两部分内容：manifest缓存清单和 JavaScript接口。其中，manifest缓存文件包含了一些需 要缓存的资源清单；JavaScript接口提供了用于更新缓存 文件的方法以及对缓存文件的操作。
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第2页
本章的学习目标
掌握离线Web应用程序的基本概念； 掌握manifest文件在离线缓存中的使用； 掌握使用applicationCache对象来手动更 新缓存的方法。

HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第3页
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第8页
8.1.4 浏览器支持检测

目前各大浏览器都支持HTML5离线应用。在使用离线应 用API前，最好使用脚本先检测浏览器是否支持。检测方 法如下：
if(window.applicationCache){ //浏览器支持离线应用 }else{ //浏览器不支持离线应用 }
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第20页
主要内容
8.1 8.2 8.3 8.4 8.5 离线Web应用程序详解 HTML5离线应用详解 applicationCache对象 缓存网站的首页 本章小结
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第21页
8.4 缓存网站的首页
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第9页
主要内容
8.1 8.2 8.3 8.4 8.5 离线Web应用程序详解 HTML5离线应用详解 applicationCache对象 缓存网站的首页 本章小结
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第10页
8.2 HTML5离线应用详解

swapCache方法用来手工执行本地缓存的更新，它只能 在applicationCache对象的updateReady事件被触发时 调用。updateReady事件只有在服务器上的manifest文 件被更新，并且把manifest文件中所要求的资源文件下载 到本地后触发。顾名思义，这个事件的含义是“本地缓存 准备被更新”。当这个事件被触发后，可以用 swapCache方法来手工进行本地缓存的更新。
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第23页
8.5 本章小结


HTML5提供了一个本地缓存使用的API—— ApplicationCache，使用这个API，可以实现离 线Web应用程序的开发。HTML5离线缓存的核心 应用是：在用户没有与因特网连接时，依然能够 访问站点或应用；当用户和因特网连接时，自动 更新缓存数据。 离线缓存包含了两部分内容：manifest缓存清单 和JavaScript接口。其中，manifest缓存文件包 含了一些需要缓存的资源清单；JavaScript接口 提供了用于更新缓存文件的方法以及对缓存文件 的操作。

manifest文件的用途是列出需要缓存的文件清单。 manifest文件是一个文本文件，编码格式必须为 UTF-8。该文件没有强制的后缀名，但习惯以 manifest为后缀名。
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第13页
8.2.2 manifest文件结构与含义
manifest文件:
第8章 离线应用程序
HTML5+CSS3网页设计基础教程
第24页

缓存网站的首页的操作过程如下：
►新建HTML5页面 ►添加.htaccess支持 ►创建manifest文件 ►关联manifest文件到HTML5页面 ►测试离线应用
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第22页
主要内容
8.1 8.2 8.3 8.4 8.5 离线Web应用程序详解 HTML5离线应用详解 applicationCache对象 缓存网站的首页 本章小结
本地缓存技术产生的原因 本地缓存概述 本地缓存与浏览器网页缓存的区别 浏览器支持检测
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第5页
பைடு நூலகம்
8.1.1 本地缓存技术产生的原因

用户参与Web的需要 间断性网络下Web应用的使用需要
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第6页
► 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 ► NETWORK: ► imgs/button-ok.png ► imgs/button-cancle.png ► CACHE: ► imgs/login-slider-bg.png ► FALLBACK: HTML5+CSS3 网页设计基础教程 第8章 离线应用程序 ► imgs/alipay-bank-icbc.png imgs/alipay-bank-cmb.png
第15页
8.2.4 离线应用中浏览器和服务 器交互过程

首次访问网站时的交互过程 已有本地缓存的交互过程 已有本地缓存但manifest文件已更新的交互过程
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第16页
主要内容
8.1 8.2 8.3 8.4 8.5 离线Web应用程序详解 HTML5离线应用详解 applicationCache对象 缓存网站的首页 本章小结
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第17页
8.3 applicationCache对象
8.3.1 swapCache方法 8.3.2 applicationCache对象的事件

HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第18页
8.3.1 swapCache方法

这个manifest的文件路径用绝对路径和相对路径 都行，甚至可以引用其他服务器上的manifest文 件。该文件所对应的mime-type应该是 text/cache-manifest，所以需要配置服务器来发 送对应的MIME类型信息（前面已介绍配置）。
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
8.1.2 本地缓存概述


HTML5的离线应用缓存使得在无网络链接状态下运行应 用程序成为可能，这类应用程序用处很多，如起草电子邮 件草稿时就不需要链接因特网。HTML5中引入的离线应 用缓存，使得Web应用程序可以在没有网络连接的情况下 运行。 通过HTML5的本地缓存技术，开发人员可以直接控制应 用程序缓存。利用缓存清单文件manifest可以将相关资源 组织到同一个逻辑应用中，这样Web应用就拥有了本来只 属于桌面应用的特性。
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第7页
8.1.3 本地缓存与浏览器网页缓 存的区别

在没有HTML5的本地缓存之前，Web应用程序开发依赖 的是网页缓存来实现离线使用。Web应用程序的本地缓存 与浏览器的网页缓存在许多方面都存在着明显的区别。首 先，本地缓存是为整个Web应用程序服务的，而浏览器的 网页缓存只服务于单个网页。任何网页都具有网页缓存， 而本地缓存只缓存那些你指定缓存的网页。其次，网页缓 存也是不安全、不可靠的，因为我们不知道在网站中到底 缓存了哪些网页，以及缓存了网页上的哪些资源。而本地 缓存是可靠的
applicationCache.onupdateready = function(){ //本地缓存已被更新，通知用户 alert("正在更新本地缓存……"); applicationCache.swapCache(); alert("本地缓存已被更新，您可以按F5键刷新页面来得 到最新内容"); };
第14页
8.2.3 搭建离线应用程序

创建好了cacheContent.manifest文件之后，下 面在HTML文件中指定文档的manifest属性为 cacheContent.manifest文件的路径。
<html manifest="cacheContent.manifest">……</html>
主要内容
8.1 8.2 8.3 8.4 8.5 离线Web应用程序详解 HTML5离线应用详解 applicationCache对象 缓存网站的首页 本章小结
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第4页
8.1 离线Web应用程序详解


8.1.1 8.1.2 8.1.3 8.1.4