html5构建离线web应用

最新推荐文章于 2025-05-26 23:08:15 发布

原创最新推荐文章于 2025-05-26 23:08:15 发布 · 329 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #离线web应用 #applicationCache

本文深入探讨HTML5离线应用的构建，包括离线状态下的网站访问、文件存储本地化带来的加载速度提升、以及通过仅加载已修改文件降低服务器负载压力。详细介绍了如何配置服务器端支持HTML5、给HTML元素添加manifest特性、编写manifest文件及功能代码。同时，解析了应用缓存API操作，包括应用缓存状态、事件触发及缓存更新过程，确保开发者能全面掌握离线应用的核心技术。

最近在研究html5的一些相关内容，其过程真是苦不堪言，由于被一些东西所吸引着所以也就硬着头皮挺了过来，结果还是有一些收获，相信也有很多初学者正在和我当时一样的痛苦中，所以把一些研究收获写了出来与大家一起分享讨论：

这次主要写的是构建web离线应用，顾名思义离线就是当网络无法连接时也可以做一些简单的操作或者是继续浏览一些网页的一个网站。这个应用至少给我们带来了三个好处：

1、离线状态下访问

2、文件被存储在本地，页面加载速度得到提升

3、只加载被修改的文件，可以降低用户请求对服务器的造成的负载压力

由于目前html5还在draft中所以，支持问题就成了当前最重要的一个话题，下图是目前各大浏览器厂商对html5的支持情况：

说了这么多，可能已经有人迫不及待了，那么现在就让我带你们进入离线应用世界来看一下吧：

第一步：服务器端

首先，你的服务器必须支持html5；由于离线应用包含一个manifest清单文件，此文件的 MIME类型是 text/cache-manifest,所以配置服务器端

Tomcat服务器：在tomcat下的conf/web.xml添加一个mime_type 如下：

<mime-mapping>
		<extension>manifest</extension>
		<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

Apache服务器： Apache 中可在 .htaccess 中添加：

AddType text/cache-manifest manifest

第二步：给html元素添加manifest特性：

<html manifest="path/myApplication.manifest">

第三步：编写manifest文件myApplication.manifest:

manifest文件第一行必须是 CACHE MANIFEST其次是其它标记

CACHE标记：直接要缓存的文件

NETWORK标记：需要在线访问的文件

FALLBACK标记：当没有响应的页面，如：当请求某个页面时，而此页面服务器不在正常工作中，那么可以显示一个指定页面

CACHE MANIFEST
#VERSION 10.0

#直接缓存文件
CACHE:
applicationCache.jsp
js/offline.js
js/jquery-1.4.1.min.js
#图片文件
images/1.jpg
images/2.jpg

#需要在线的文件
NETWORK:
formapi.jsp

#替代方案
FALLBACK:
index.jsp

第四步：编写功能代码：

jsp文件：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html manifest="myApplication.manifest">
<head>
 

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
 <script type="text/javascript" src="js/offline.js"></script>
<script>
	
 	
</script>
<style>
	
</style>
 
</head>
    <body>
    	
    	<header>Offline Example</header>
    	<section>
    		<img src="images/1.jpg" />
    		<article>
    			<button id="switchButton">切换</button>
    			<button id="installButton">缓存</button>
    			<h3>Log</h3>
    			*****start 离线应用进程列表 开始start*****
    			<div id="info">
    				
    			</div>
    			*****end 离线应用进程列表结束 end*****
    		</article>
    	</section>
    </body>
</html>

js文件：要写js文件就涉及到了applicatioCache API操作应用缓存的接口。新的window.applicationCache对象可触发一系列缓存状态相关事件，该对象有一个status属性为数值型代表了缓存的状态，该状态共有6种：

缓存状态	数值属性
UNCACHED(未缓存)	0
IDLE(空闲)	1
CHECKING(检查中)	2
DOWNLOADING(下载中)	3
UPDATEREADY(更新就绪)	4
OBSOLETE(过期)	5

目前由于大多数网页都没有缓存，所以都处于UNCACHED状态，而IDLE代表所有资源都已被浏览器缓存，当前不需要更新，如果缓存曾经有效但现在manifest文件丢失怎进入OBSOLETE(过期)状态

对于以上各种状态相应会触发相应的事件：

事件	关联的缓存状态
onchecking	CHECKING
ondownloading	DOWNLOADING
onupdateready	UPDATEREADY
onobsolete	OBSOLETE
oncached	IDLE

此外还有一些事件：

onerror：更新时发生错误

onprogress：更新进程

onnoupdate：没有可用更新

ononline：往前网络连接

onoffline:当前网络中断

下面将为大家详细介绍各个事件的触发：如图

如图所示：

用户第一次访问web时，页面首先检查存在缓存文件，如果不存在则是第一次访问触发第一访问相应事件，否则触发不是第一次访问的相应事件。需要注意的是，当访问web缓存文件已经存在时（即已经不是第一次访问此web）并且有更新时所触发的完成事件是onupdateready事件而不是oncached事件。

此外，applicationCache api还为我们提供了ononline/onoffline事件这个个事件是当计算当前连接和中断时触发。相应也有window.navigator.online和window.navigator.offline两个布尔属性来检测当前网络的连接状况。applicationCache的事件就已经结束了，接下来我们讨论一下缓存更新的问题。

当web已经被缓存后，下一次访问浏览器首先检测是否存在缓存文件，如果存在直接到缓存中获取文件完成后向服务器发送一个请求来检测服务器端是否有更新，如果有更新则更新相应的缓存文件。

说道更新这里有个小插曲，当我们将页面或js文件等内容更新后无论你怎么狂刷浏览器或无数次的清除缓存页面都没有被更新，这是为什么呢，原因在于浏览器缓存文件只与manifest文件比对，只有当manifest文件更新时缓存文件才会更新，所以通常给manife文件加上一个版本号，当文件无改动时，只需更改一下相依的版本号就可以了。

js文件相应代码：

var n=1;
window.applicationCache.onprogress=function(e){
	$("#info").append("<br/>Resource loading..."+n);
	n++;
}
window.applicationCache.oncached=function(e){
	$("#info").append("<br/>oncached");
}
window.applicationCache.onchecking=function(e){
	$("#info").append("<br/>onchecking");
}
window.applicationCache.onnoupdate=function(e){
	$("#info").append("<br/>onnoupdate");
}
window.applicationCache.onupdateready=function(e){
	$("#info").append("<br/>onupdateready");
}
window.applicationCache.onobsolete=function(e){
	$("#info").append("<br/>onobsolete");
}
window.applicationCache.ondownloading=function(e){
	$("#info").append("<br/>ondownloading");
}

window.applicationCache.onerror=function(e){
	$("#info").append("<br/>onerror");
}
window.addEventListener("online",function(){
	alert("在线");
},true);
window.addEventListener("offline",function(){
	alert("离线");
},true);
$(function(){
showCacheStatus=function(n){
	statusMessage=["Uncache","Idle","Checking","Downloading","Update Ready","Obsolete"];
	return statusMessage[n];
}
$("#installButton").click(function(e){
	try{
		window.applicationCache.update();
	}catch(e){
		alert("更新错误！")
	}
});
window.onload=function(e){
	if(!window.applicationCache){
		alert("当前浏览器不支持离线缓存");
		return;
	}
	if(!navigator.geolocation){
		alert("当前浏览器不支持位置信息");
	}
	if(!window.localStorage){
		alert("当前浏览器不支持本地存储Storage");
	}
	
	
	cache = window.applicationCache;  
	//返回应用于当前window对象文档的ApplicationCache对象  
	//ache = self.applicationCache;  
	//返回应用于当前shared worker的ApplicationCache对象 [shared worker]  
	//cache.status  
	//返回当前应用的缓存状态，status有五种无符号短整型值的状态：   
	cache.update();  
	//调用当前应用资源下载过程  
	cache.swapCache();  
	//更新到最新的缓存，这个不会使得之前加载的资源突然被重新加载。图片不会重新加载，样式和脚本也不会重新渲染或解析，唯一的变化是在此之后发出请求页面的资源是最新的  
}
$("#switchButton").toggle(function(){
	$("img:first").attr("src","/test/images/2.jpg");
},function(){
	$("img:first").attr("src","/test/images/1.jpg");
});
});//--------ready结束

更新时applicationCache提供两个更新方法 update()/swapCache()

//调用当前应用资源下载过程

cache.update();

//更新到最新的缓存，这个不会使得之前加载的资源突然被重新加载。图片不会重新加载，样式和

// 本也不会重新渲染或解析，唯一的变化是在此之后发出请求页面的资源是最新的

cache.swapCache();