`

html5的appcache

阅读更多
从HTML5开始,支持将页面资源(包括.html、.css、.js、.png)等缓存起来,从而实现离线应用

步骤如下:

1、准备appcache清单文件

清单文件可以使用任何扩展名,只需要在步骤2中,在web server里注册即可

这里起名为demo.appcache,文件内容是
CACHE MANIFEST

CACHE:
5.html
5.css
jquery-1.8.0.js
5.js


2、注册appcache清单文件的MIME

对于tomcat,在%TOMCAT_HOME%/conf/web.xml里配置
<mime-mapping>
        <extension>appcache</extension>
        <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>


3、在要缓存的html里关联清单文件
<!DOCTYPE html>
<html manifest="demo.appcache">

<head>
	<meta charset="UTF-8">
	<link type="text/css" rel="stylesheet" href="5.css" />
	<script type="text/javascript" src="jquery-1.8.0.js"></script>
	<script type="text/javascript" src="5.js"></script>
	<title>5</title>
</head>

<body>
	<div id="myDiv">hello world</div>
	<button id="btn">run</button>
</body>

</html>


4、编程(javascript)控制applicationCache对象
$(document).ready(function() {
	
	$("#btn").click(showCache);

	function showCache(){
		alert(applicationCache.status);
		applicationCache.update();
	}

});


5、效果

通过上面的配置,5.html页面相关的资源就会被支持ApplicationCache的浏览器缓存起来,支持离线操作

关于applicationCache对象,其实还有一些别的API,支持状态和事件绑定等,详细的文档可参见:
http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone
http://www.w3schools.com/html/html5_app_cache.asp
分享到:
评论

相关推荐

    grunt-appcache:用于生成HTML5 AppCache清单的Grunt任务

    从指定的文件列表生成HTML5 AppCache清单的艰巨任务。 入门 这个插件需要~0.4.1 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装...

    PyPI 官网下载 | django-html5-appcache-0.2.0.tar.gz

    标题中的"PyPI 官网下载 | django-html5-appcache-0.2.0.tar.gz"指的是Python的包管理器PyPI(Python Package Index)上发布的名为`django-html5-appcache`的软件包的0.2.0版本,该版本被压缩为一个tar.gz文件。...

    appcachegen:根据目录内容为静态网站生成 HTML5 AppCache 清单

    应用程序缓存源基于目录内容为静态网站生成 HTML5 AppCache 清单的节点模块。安装 $ npm install appcachegen --save安装在您的项目中或 $ sudo npm install -g appcachegen全局安装用法appcachegen 可以在命令行或 ...

    HTML5 PPT演示稿

    1. **HTML5 AppCache(Application Cache)**:`demo_html.appcache`可能涉及到HTML5的离线存储功能。AppCache允许开发者创建一个缓存清单文件,指定哪些资源需要在用户首次访问时下载并缓存,这样即使在网络断开的...

    Appcache清洁「Appcache cleaner」-crx插件

    清除HTML 5 appcache和缓存。 构建离线应用程序? 需要一个简单高效的工具来清理appcache和缓存吗? 此扩展名适合您! 它允许您清除HTML 5应用程序缓存和缓存(JS,...)。 当前页面的清单将根据范围删除。 它非常...

    web桌面源码

    3. **HTML5 AppCache或Service Worker**:为了离线使用Web桌面,开发者可能利用HTML5的AppCache或者Service Worker技术,将必要的资源缓存到本地,使得用户在无网络连接时仍能使用部分功能。 4. **Electron或PWA**...

    前端开发技术分享 浏览器怎么实现 AppCache - Offline Application Cache 共17页.pdf

    5. **事件通知**: AppCache的更新过程伴随着一系列事件,如`checking`(检查更新)、`downloading`(下载资源)、`progress`(下载进度)、`cached`(资源已缓存)、`updateready`(更新就绪)等,开发者可以通过...

    HTML5书籍(HTML5高级程序设计.pdf+深入HTML5应用开发.pdf)

    1. **HTML5新特性**:包括新的语义化标签(如、、等)、离线存储(AppCache)、拖放功能、媒体元素(和)等。 2. **Canvas与SVG**:这两个图形绘制API让开发者可以动态生成图像,Canvas适合像素级操作,SVG则用于...

    HTML5毕业论文实列.zip

    HTML5是现代网页开发的核心技术,它在2014年被正式确立为W3C标准,极大地丰富了网页内容的展示方式和交互性。这篇关于"HTML5毕业论文实例"的压缩包包含了多份原创设计的毕业论文,这些论文主要探讨了HTML5在前端网页...

    HTML5项目实战 HTML5项目实战 HTML5项目实战

    HTML5还引入了离线存储机制,如AppCache和IndexedDB,使得网页应用可以在离线状态下继续运行。这对于构建离线优先的应用,或者需要大量数据存储的项目非常有用。 Web Workers和Web Storage也是HTML5的重要组成部分...

    HTML5 in Action-英文版

    《HTML5 in Action》是一本深入探讨HTML5技术的专业书籍,其英文版为读者提供了全面了解和掌握HTML5的详细指南。HTML5是超文本标记语言(HTML)的最新版本,自2008年发布以来,它已经成为现代网页开发的核心技术。这...

    html5网站实例

    HTML5是现代网页开发的核心标准,它在原有HTML4的基础上引入了诸多新特性,极大地提升了网页的交互性和表现力。本实例将详细讲解如何利用HTML5来构建一个完整的网站,包括布局、登录功能以及内容展示。 一、HTML5的...

    html5 网页设计合集

    - HTML5的离线存储(AppCache)和Service Worker可以实现离线应用,提高网页性能。 - Geolocation API用于获取用户的地理位置信息,增强位置服务功能。 - Web Workers和Web Storage提升后台处理能力和本地数据...

    HTML5高仿Win10桌面,可快速开发web界面

    这个项目的核心是利用HTML5的新特性,如Canvas、SVG、WebSocket、离线存储(AppCache)以及媒体元素等,来构建一个具有窗口管理、任务栏、通知中心等功能的Web界面。HTML5的Canvas元素允许开发者通过JavaScript绘制...

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    HTML5还引入了离线存储(AppCache)、Web Storage(包括localStorage和sessionStorage)以及Web Workers等特性,提高了网页应用的性能和用户体验。 CSS3(层叠样式表)是CSS的第三个主要版本,它带来了许多新的选择...

    HTML5参考手册大全7本合集.chm

    2. **离线存储与本地存储**:HTML5的离线存储(AppCache)允许网页在离线状态下访问部分数据,Web Storage(包括localStorage和sessionStorage)则提供了客户端数据持久化的解决方案,改善了对用户数据的处理。...

    Appcache cleaner-crx插件

    清除html 5 appcache和缓存。 构建脱机应用程序? 需要一个简单而有效的工具来清理AppCache和缓存? 这个延期适合您! 它允许您清除HTML 5 AppCache和Cache(JS,...)。 根据范围删除来自当前页面的清单。 它非常...

    HTML5.rar_HTML 手册_HTML5 asp_html5

    HTML5还强化了离线存储能力,通过离线存储API(如AppCache和IndexedDB),开发者可以创建离线应用,即使在无网络连接的情况下也能正常运行。Web Workers和Web Storage则进一步提高了网页的多任务处理能力和数据存储...

    html5金山英文打字游戏源码下载

    HTML5的AppCache或Service Worker特性可用于实现离线访问和内容更新。 总结,HTML5金山英文打字游戏源码是一个综合运用HTML5、CSS3和JavaScript技术的实例,展示了如何利用这些技术创建互动性强、教育意义的游戏。...

Global site tag (gtag.js) - Google Analytics