HTML5应用程序缓存

使用HTML5,通过创建一个cache manifest文件,可以轻松地创建web应用的离线版本。

什么是HTML5应用程序缓存?

自从HTML5引入了应用程序缓存,这意味着web可以进行缓存,可以在没有连接网络的情况下继续访问web.

应用程序缓存为应用带来了三个优势:

1、离线浏览-用户可以应用离线时使用它

2、速度-已缓存资源加载更快

3、减轻服务器的负载-浏览器只从服务器下载更新过或更改过的文件

实例:

<!DOCTYPE html>
<html manifest="demoIndex.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css"></style>
<script type="text/javascript" src="Css/jquery-2.1.4.js"></script>
</head>
<body>
<script src="demoTime.js"></script>
<p id="pid"><button onclick="getTime()">获取日期和时间</button></p>
<figure>
<figcaption>HTML5LOGO</figcaption>
<img src="Images/HTML5LOGO.jpg" alt="html5logo" />
</figure>
<p>尝试打开<a href="tryhtml5HtmlManifest.html">这个页面</a>,这个页面在离线的状态下仍然可以打开进行访问。</p>
</body>
</html>

Cache Manifest基础

如果需要启用应用程序缓存,那么就要在<html>标签中包含manifest属性

如:<!DOCTYPE html>
<html manifest="demoIndex.appcache">

......

</html>

每个指定了manifest属性的页面在用户进行访问时都会被缓存,如果没有指定,则页面不会被缓存,除非在manifest文件中直接指定缓存该页面。

manifest文件的建议扩展名为.manifest

请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

时间: 2024-08-26 10:09:52

HTML5应用程序缓存的相关文章

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

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

HTML5应用程序缓存Application Cache

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

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

HTML5应用程序缓存Application Cache详解

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

HTML5应用程序缓存Application Cache.RP

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

html5—— 应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. 浏览器支持 所有主流浏览器均支持应用程序缓存,除了 Inte

Html5应用程序缓存ApplicationCache

应用缓存机制可以参考http://www.w3school.com.cn/html5/html_5_app_cache.asp,不再赘述.利用此机制,html5游戏可以实现和native app类似的更新和运行环境,减少文件的频繁下载. 1. Server设置: nginx, 修改manifest文件的mime type映射,打开文件$nginx/conf/mime.types,增加 text/cache-manifest manifest; 2. 网页文件设置: 在index.html的<ht

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