HTML 5 应用程序缓存(下)

Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分:

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。

NETWORK
下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的:

NETWORK:
login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接:

NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:

FALLBACK:
/html5/ /404.html
注释:第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:

用户清空浏览器缓存
manifest 文件被修改(参阅下面的提示)
由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。

注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。

时间: 2024-10-26 01:14:20

HTML 5 应用程序缓存(下)的相关文章

HTML5 应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. Cache Manifest 基础 启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性: 1 <!DOCTYPE HTML> 2 <html manifest="d

HTML5应用程序缓存Application Cache详解.RP

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application

HTML 5 应用程序缓存

HTML 5 应用程序缓存的介绍 http://www.w3school.com.cn/html5/html_5_app_cache.asp 接下来通过实际案例介绍HTML5应用程序缓存的介绍. 一 应用服务器 应用服务器使用tomcat. 在tomcat的web.xml 添加如下配置,因为manifest文件返回时MIME-type必须为 text/cache-manifest   <mime-mapping>     <extension>appcache</extens

HTML5应用程序缓存实现离线Web网页或应用

HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点.只会收到一条错误信息.而使用离线web应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站. 如何实现HTML5应用程序缓存.实现HTML5应用程序缓存非常简单,只需三步,并且不需要任何API.只需要告诉浏

HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption></figcaption>: 多媒体标题 方法: load() 加载.play()播放.pause()暂停 属性: currentTime 视频播放的当前进度. duration:视频的总时间. paused:视频播放的状态 事件:   oncanplay:事件在用户可以开始播放视频/音频(aud

HTML5应用程序缓存

使用HTML5,通过创建一个cache manifest文件,可以轻松地创建web应用的离线版本. 什么是HTML5应用程序缓存? 自从HTML5引入了应用程序缓存,这意味着web可以进行缓存,可以在没有连接网络的情况下继续访问web. 应用程序缓存为应用带来了三个优势: 1.离线浏览-用户可以应用离线时使用它 2.速度-已缓存资源加载更快 3.减轻服务器的负载-浏览器只从服务器下载更新过或更改过的文件 实例: <!DOCTYPE html><html manifest="de

HTML5应用程序缓存Application Cache

HTML5应用程序缓存Application Cache 什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存

HTML 5 学习之应用程序缓存

什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. 浏览器支持 所有主流浏览器均支持应用程序缓存,除了 Internet Explorer. Cache Manifest 基础 如需启用应用程序缓存,请在文档的 <ht

HTML5应用程序缓存Application Cache详解

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application