移动web前端学习-HTML5常用特性部分-离线随手记的构建

在上一篇文章中我们简单搭建了一个node.js的后台，为的其实就是验证离线缓存application cache和serviceWorker

首先是applicationCache

我们在项目测试包中创建一个文件：offline.manifest

CACHE MANIFEST   
#cache之后的资源都会被缓存  
ApplicationcacheDemo.html
css/mui.min.css
js/mui.min.js  
#network之后资源不会被缓存，总是从线上获取
NETWORK:  
#FALLBACK是如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件
FALLBACK:   
/测试项目包/ /file/error404.html

然后创建ApplicationcacheDemo.html

<!DOCTYPE html>
<html manifest="offline.manifest">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<!--去除favicon.ico请求-->
		<link rel="shortcut icon" href="#" />
	</head>
	<body>
		<div>			
			<p id="content" contenteditable="true">随手记</p>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init();
			//获取记录内容的文本域
			var el = document.getElementById("content");
			el.addEventListener('blur',function(){
				//获取文本域的内容
				var data = el.innerText;
				if(navigator.onLine){
					//将内容保存到服务器
					saveOnline(data);
				}else{
					localStorage.setItem('data',data);
				}
				
			});
			//监听上线事件
			window.onLine = function(){
				//从本地获取数据
				var data = localStorage.getItem('data');
				if(!!!data){
					//如果数据存在，则保存到服务器
					saveOnline(data);
					//同时清空本地缓存
					localStorage.removeItem('data');
				}
			}
			function saveOnline(data){
				var xhr = new XMLHttpRequest();
				//定义请求响应的回调，每次readyState变化都会执行
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4) {
						if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
							mui.alert(xhr.responseText);
						} else {
							mui.alert("Request was unsuccessful " + xhr.status);
						}
					}
				};
				xhr.open('POST','http://127.0.0.1:3000');
				xhr.send('data =' + data);				
			}
		</script>
	</body>
	
</html>

接下来就是3000请求的server构建 server.js

//获取mime模块
var mime = require("mime");
var http = require('http');
var fs = require("fs");
var querystring = require('querystring');
http.createServer(function(req, res, filePath) {
	//解决跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 定义了一个post变量，用于暂存请求体的信息
	var body = "";
	// 通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
	req.on('data', function(chunk) {
		body += chunk;
	});
	req.on('end', function() {
		// 解析参数
		body = querystring.parse(body);
		// 设置响应头部信息及编码
		res.writeHead(200, {
			'Content-type': mime.getType(filePath)
		});
		//将请求内容写入文件
		console.log("准备写入文件");
		fs.writeFile('input.txt', JSON.stringify(body), function(err) {
			if(err) {
				return console.error(err);
			}
			fs.readFile('input.txt', function(err, data) {
				if(err) {
					return console.error(err);
				}
				res.end(data.toString());
			});
		});
	});
}).listen(3000, function() {
	console.log("服务器启动");
});

然后shift+右键->node server.js

然后浏览器运行一下这个页面，可以在Chrome中的application中找到这些缓存，然后可以试试offline的效果，同时对比其他没有缓存的页面的效果。

移动web前端学习-HTML5常用特性部分-离线随手记的构建

猜你喜欢