欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

构建web离线应用

程序员文章站 2022-07-08 07:58:32
...
一 构建步骤
1、搭建web服务器
2、给<Html>元素增加manifest属性
3、编辑manifest文件。
 
二 代码
核心代码：
1、HTML文件（index.html）
  1. <!DOCTYPE html>
  2. <htmlmanifest="index.manifest">
  3. <head>
  4. <metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/>
  5. <metahttp-equiv="Content-Type"content="text/html; charset=GBK"/>
  6. <title> 测试页面 </title>
  7. <scripttype="text/javascript"src="test.js">
  8. </script>
  9. </head>
  10. <body>
  11. <imgsrc="logo.jpg"alt="疯狂Java联盟"/>
  12. <inputid="bn"type="button"value="单击"/>
  13. </body>
  14. </html>
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. };
 
三 运行结果
服务器在启动状态和在关闭状态下的运行结果如下：

构建web离线应用 博客分类： JavaScript web离线应用 
 
  • 构建web离线应用 博客分类： JavaScript web离线应用 
  • 大小: 39.4 KB
相关标签： web 离线应用

上一篇： 神器Opera , 嘎子定制版(2013.07.31更新)

下一篇： 跨文档消息传递应用

推荐阅读