在上一篇文章中我们简单搭建了一个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的效果,同时对比其他没有缓存的页面的效果。