从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,支持状态和事件绑定等,详细的文档可参见:
1
http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone
2
http://www.w3schools.com/html/html5_app_cache.asp
分享到:
相关推荐
从指定的文件列表生成HTML5 AppCache清单的艰巨任务。 入门 这个插件需要~0.4.1 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装...
标题中的"PyPI 官网下载 | django-html5-appcache-0.2.0.tar.gz"指的是Python的包管理器PyPI(Python Package Index)上发布的名为`django-html5-appcache`的软件包的0.2.0版本,该版本被压缩为一个tar.gz文件。...
应用程序缓存源基于目录内容为静态网站生成 HTML5 AppCache 清单的节点模块。安装 $ npm install appcachegen --save安装在您的项目中或 $ sudo npm install -g appcachegen全局安装用法appcachegen 可以在命令行或 ...
1. **HTML5 AppCache(Application Cache)**:`demo_html.appcache`可能涉及到HTML5的离线存储功能。AppCache允许开发者创建一个缓存清单文件,指定哪些资源需要在用户首次访问时下载并缓存,这样即使在网络断开的...
清除HTML 5 appcache和缓存。 构建离线应用程序? 需要一个简单高效的工具来清理appcache和缓存吗? 此扩展名适合您! 它允许您清除HTML 5应用程序缓存和缓存(JS,...)。 当前页面的清单将根据范围删除。 它非常...
3. **HTML5 AppCache或Service Worker**:为了离线使用Web桌面,开发者可能利用HTML5的AppCache或者Service Worker技术,将必要的资源缓存到本地,使得用户在无网络连接时仍能使用部分功能。 4. **Electron或PWA**...
5. **事件通知**: AppCache的更新过程伴随着一系列事件,如`checking`(检查更新)、`downloading`(下载资源)、`progress`(下载进度)、`cached`(资源已缓存)、`updateready`(更新就绪)等,开发者可以通过...
1. **HTML5新特性**:包括新的语义化标签(如、、等)、离线存储(AppCache)、拖放功能、媒体元素(和)等。 2. **Canvas与SVG**:这两个图形绘制API让开发者可以动态生成图像,Canvas适合像素级操作,SVG则用于...
HTML5是现代网页开发的核心技术,它在2014年被正式确立为W3C标准,极大地丰富了网页内容的展示方式和交互性。这篇关于"HTML5毕业论文实例"的压缩包包含了多份原创设计的毕业论文,这些论文主要探讨了HTML5在前端网页...
HTML5还引入了离线存储机制,如AppCache和IndexedDB,使得网页应用可以在离线状态下继续运行。这对于构建离线优先的应用,或者需要大量数据存储的项目非常有用。 Web Workers和Web Storage也是HTML5的重要组成部分...
《HTML5 in Action》是一本深入探讨HTML5技术的专业书籍,其英文版为读者提供了全面了解和掌握HTML5的详细指南。HTML5是超文本标记语言(HTML)的最新版本,自2008年发布以来,它已经成为现代网页开发的核心技术。这...
HTML5是现代网页开发的核心标准,它在原有HTML4的基础上引入了诸多新特性,极大地提升了网页的交互性和表现力。本实例将详细讲解如何利用HTML5来构建一个完整的网站,包括布局、登录功能以及内容展示。 一、HTML5的...
- HTML5的离线存储(AppCache)和Service Worker可以实现离线应用,提高网页性能。 - Geolocation API用于获取用户的地理位置信息,增强位置服务功能。 - Web Workers和Web Storage提升后台处理能力和本地数据...
这个项目的核心是利用HTML5的新特性,如Canvas、SVG、WebSocket、离线存储(AppCache)以及媒体元素等,来构建一个具有窗口管理、任务栏、通知中心等功能的Web界面。HTML5的Canvas元素允许开发者通过JavaScript绘制...
HTML5还引入了离线存储(AppCache)、Web Storage(包括localStorage和sessionStorage)以及Web Workers等特性,提高了网页应用的性能和用户体验。 CSS3(层叠样式表)是CSS的第三个主要版本,它带来了许多新的选择...
2. **离线存储与本地存储**:HTML5的离线存储(AppCache)允许网页在离线状态下访问部分数据,Web Storage(包括localStorage和sessionStorage)则提供了客户端数据持久化的解决方案,改善了对用户数据的处理。...
清除html 5 appcache和缓存。 构建脱机应用程序? 需要一个简单而有效的工具来清理AppCache和缓存? 这个延期适合您! 它允许您清除HTML 5 AppCache和Cache(JS,...)。 根据范围删除来自当前页面的清单。 它非常...
HTML5还强化了离线存储能力,通过离线存储API(如AppCache和IndexedDB),开发者可以创建离线应用,即使在无网络连接的情况下也能正常运行。Web Workers和Web Storage则进一步提高了网页的多任务处理能力和数据存储...
HTML5的AppCache或Service Worker特性可用于实现离线访问和内容更新。 总结,HTML5金山英文打字游戏源码是一个综合运用HTML5、CSS3和JavaScript技术的实例,展示了如何利用这些技术创建互动性强、教育意义的游戏。...