一 构建步骤
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("您处于离线状态,您单击了按钮!");
};
};
三 运行结果
服务器在启动状态和在关闭状态下的运行结果如下:
相关推荐
基于FLEX技术构建可离线Web应用程序的研究与实现
今天我们的内容是关于如何创建离线web应用,他的好处是可以让浏览器下载我们指定的web资源,这样用户在离线状态下也能正常使用我们的站点
HTML5离线应用###一、离线应用的特点和优势(1)允许web应用程序将app保存在浏览器中;(2)能够保存运行程序所需的所有文件,包括html,css,js,图片等;(3)不会被浏览器缓存清除;(4)同时在新的数据加载的时候,...
分析了在线导学平台中“在线跟踪学习”业务上存在的不足,提出了基于 HTML5的 Web离线技 术的离线学习形式,阐述了离线学习需要的基本功能,构建了离线学习模型。利用在线状态检测、应用 缓存、本地数据存储等技术,让...
我通过Application Cache+localStorage+web sql构建了一个离线应用,同时我也把逻辑按照Application cache+localStorage+indexedDB写了一次,有兴趣的同学可以下载,同时代码逻辑按照MVC组织。可以让大家很快理解...
第4章 移动WEB的离线应用 第5章 移动设备的常见HTML5表单元素 第6章 移动WEB界面样式 第7章 GEOLOCATION地理定位 第8章 轻量级框架JQUERY MOBILE初探 第9章 重量级富框架SENCHA TOUCH入门 第10章 跨平台的PHONEGAP...
rack-offline, 用于构建脱机web应用程序的rack 和 Rails 插件 HTML5离线HTML5提供了两种在流行的移动设备( 如iPhone和 Android ) 以及基于 webkit 和on的现代桌面浏览器实现。用法使用 Rack::Offline 最简单的方法是...
与React,React Native一起使用,或作为任何Web应用程序的独立状态容器使用。 现在,由社区驱动的团队维护Redux Offline。 该库的新版本现在将在npm组织@redux-offline 。 非常感谢创建了这个惊人的库。 快速开始 ...
此存储库包含使用 Xamarin 组件商店中提供的 App Web 组件构建的 MIT 许可应用 Web 运行时/查看器,可用于在移动设备中离线查看基于静态/动态 (Ajax) 的 Web 应用 它是用于开发去中心化便携式应用程序的工具包的一...
10.2.2 搭建简单的离线应用程序 203 10.2.3 支持离线行为 204 10.2.4 manifest文件 204 10.2.5 applicationcache api 205 10.3 使用html5离线web应用构建应用 206 10.3.1 创建记录资源的manifest文件 208 ...
这个具有离线功能的渐进式Web应用程序是使用PouchDB,CouchDB,服务工作者和Web应用程序清单构建的。 它仅使用客户端代码。 您可以在下面阅读有关其离线优先设计模式的更多信息,在GitHub上浏览代码,或按照以下...
无涯教程网整理提供:Angular是一款十分流行且好用的构建WebWeb应用程序框架,由 Google 维护。
是一个完全开源的图标集,其中包含1300个图标,这些图标是专为Web,iOS,Android和桌面应用程序而设计的。 Ionicons是为构建的,因此图标同时具有Material Design和iOS版本。 注意:所有品牌图标均为其各自所有者的...
学习笔记专案餐厅评论应用:第3阶段 配套课程 第1部分-构建可访问和响应式Web应用程序响应式网页设计基础响应式图像网络可访问性 第2部分-构建具有离线功能的Web应用程序异步JavaScript请求ES6 JavaScript改进脱机...
12.2.2 搭建简单的离线应用程序 256 12.2.3 支持离线行为 257 12.2.4 manifest文件 257 12.2.5 applicationCache API 259 12.2.6 运行中的应用缓存 260 12.3 使用HTML5离线Web应用构建应用 261 12.3.1 创建...
一个离线、完全缓存、平台不可知、基于 html5 的网络应用程序,专为从本地和偏远地区(即多米尼加共和国拉罗马纳的 bateys)收集患者数据而构建。 它将如何运作: 这将是一个 Web 应用程序,使用 javascipt 构建,...
无涯教程网(learnfk)整理提供:Django是一个Web开发框架,可帮助构建和维护高质量的Web应用程序。
Free Math是用于管理数字数学作业的开源离线React Web应用程序。 加入我们的革命,免费数学已经被成千上万的学生和教师用来改善他们在数学课上的交流和反馈。 建筑 安装依赖项并启动开发服务器: $ npm install $ ...
HTML5提供的多种新技术如:本地数据库、多线程开发、视频支持、离线编程等构建一个基本的Web操作系统。传统的操作系统有着一些难以克服的缺点,如仅能在本地终端访问,或仅支持有限的远程访问,限于本地终端的资源,...
我的日记移动应用##Description 使用 HTML5、本地存储、地理定位、离线功能、CSS3 转换和 Google Maps API 构建的简单日记移动应用程序。 “移动 Web 2:应用程序”课程的最终作业(由 W3C Dev Campus 提供)。 ##...