构建web离线应用

阅读更多

一 构建步骤

1、搭建web服务器

2、给元素增加manifest属性

3、编辑manifest文件。

 

二 代码

核心代码：

1、HTML文件（index.html）

2. manifest="index.manifest">
4. name="author"content="Yeeku.H.Lee(CrazyIt.org)"/>
5. http-equiv="Content-Type"content="text/html; charset=GBK"/>
7. type="text/javascript"src="test.js">
11. src="logo.jpg"alt="疯狂Java联盟"/>
12. id="bn"type="button"value="单击"/>

2、manifest文件（index.manifest）

1. CACHE MANIFEST
2. #该文件的第一行必须是CACHE MANIFEST
3. #下面指定该清单文件的版本号
4. #version 1
5. #CACHE:后面列出的是需要缓存的资源
6. CACHE:
7. index.html
8. logo.jpg
9. #NETWORK:后面列出的不进行缓存的资源
10. NETWORK:
11. *
12. #FALLBACK:后面每行需要列出两个资源。
13. #第一个资源是处于在线状态时使用的资源。
14. #第二个资源是处于离线状态时所使用的资源。
15. FALLBACK:
16. test.js offline.js

3、JS文件（test.js和offline.js）

tet.js代码如下：

1. window.onload =function()
2. {
3. document.getElementById("bn").onclick =function()
4. {
5. alert("您单击了按钮！");
6. };
7. };

office.js代码：

1. window.onload =function()
2. {
3. document.getElementById("bn").onclick =function()
4. {
5. alert("您处于离线状态，您单击了按钮！");
6. };
7. };

 

三 运行结果

服务器在启动状态和在关闭状态下的运行结果如下：

 

• 
• 大小: 39.4 KB

• 查看图片附件