构建web离线应用

﹏ヽ暗。殇╰゛Y 2022-05-12 00:48 408阅读 0赞

**一 构建步骤**

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.  `};`

**三 运行结果**

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

![e66f84b1-e9b0-31d3-92f2-c8de79b3c20c.png][]

[e66f84b1-e9b0-31d3-92f2-c8de79b3c20c.png]: /images/20220512/4e682215e8d34e339bf538d98f8cfacd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，408人围观）

还没有评论，来说两句吧...

相关阅读

相关构建离线应用：Apollo与本地状态管理

apollo

以你之姓@/ 2024年04月22日 22:03/ 0 赞/ 59 阅读

相关如何构建离线 Web 应用程序

随着移动设备和不可靠网络连接的日益普及，确保 Web 应用程序即使在用户离线时也能正常运行比以往任何时候都更加重要。此外，用户希望 Web 应用程序可靠且快速，停机时间和中

一时失言乱红尘/ 2024年03月16日 16:38/ 0 赞/ 68 阅读

相关离线Web应用？！

刚看到一条消息，[Firefox 3集成了SQLite以支持离线应用][Firefox 3_SQLite]。另外Google推出的[Gears][]也支持本地服务器，数据库和工

绝地灬酷狼/ 2023年10月18日 10:07/ 0 赞/ 141 阅读

相关 23_创建离线web应用程序

html5 ![Image 1][] img1 img2 img3 update swap 状态:

雨点打透心脏的1/2处/ 2022年07月16日 16:29/ 0 赞/ 192 阅读

相关原生js--应用程序存储和离线web应用

1、应用程序缓存和其它存储方式的区别：　　a、不像localStorage和sessionStorage那样只存储web应用程序的数据，它将应用程序自身存储起来。　　b

我就是我/ 2022年06月17日 07:54/ 0 赞/ 210 阅读

相关 Node -- 构建Web应用

基础功能 Node是十分贴近网络协议的，它非阻塞、事件机制使得我们在网络编程时十分轻便。下面的内容，将从http模块中服务器端的request事件开始分析。官方经

曾经终败给现在/ 2022年06月13日 13:10/ 0 赞/ 234 阅读

相关 web 离线存储

应用缓存在移动设备没有网络的情况下不出现404并且可以进行简单的使用 1.需要有一个应用缓存的文件

r囧r小猫/ 2022年06月10日 01:47/ 0 赞/ 203 阅读

相关构建web离线应用

一构建步骤 1、搭建web服务器 2、给<Html>元素增加manifest属性 3、编辑manifest文件。二代码核心代码： 1、HTML文件（i

﹏ヽ暗。殇╰゛Y/ 2022年05月12日 00:48/ 0 赞/ 409 阅读

相关 Web离线应用解决方案——ServiceWorker

什么是ServiceWorker? 　在介绍ServiceWorker之前，我们先来谈谈PWA。PWA (Progressive Web Apps) 是一种 Web Ap

蔚落/ 2021年09月16日 13:04/ 0 赞/ 448 阅读

相关手动构建Web应用

一进入Tomcat项目根目录 D:\Program\Tomcat8\webapps 二在该目录下创建如下结构 D:\Program\Tomcat8\w

女爷i/ 2021年07月24日 21:34/ 0 赞/ 501 阅读