一 构建步骤
1、搭建web服务器
2、给<Html>元素增加manifest属性
3、编辑manifest文件。
二 代码
核心代码:
1、HTML文件(index.html)
<!DOCTYPE html>
<htmlmanifest="index.manifest">
<head>
<metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/>
<metahttp-equiv="Content-Type"content="text/html; charset=GBK"/>
<title> 测试页面 </title>
<scripttype="text/javascript"src="test.js">
</script>
</head>
<body>
<imgsrc="logo.jpg"alt="疯狂Java联盟"/>
<inputid="bn"type="button"value="单击"/>
</body>
</html>
2、manifest文件(index.manifest)
CACHE MANIFEST
#该文件的第一行必须是CACHE MANIFEST
#下面指定该清单文件的版本号
#version 1
#CACHE:后面列出的是需要缓存的资源
CACHE:
index.html
logo.jpg
#NETWORK:后面列出的不进行缓存的资源
NETWORK:
*
#FALLBACK:后面每行需要列出两个资源。
#第一个资源是处于在线状态时使用的资源。
#第二个资源是处于离线状态时所使用的资源。
FALLBACK:
test.js offline.js
3、JS文件(test.js和offline.js)
tet.js代码如下:
window.onload =function()
{
document.getElementById("bn").onclick =function()
{
alert("您单击了按钮!");
};
};
office.js代码:
window.onload =function()
{
document.getElementById("bn").onclick =function()
{
alert("您处于离线状态,您单击了按钮!");
};
};
三 运行结果
服务器在启动状态和在关闭状态下的运行结果如下: