Mobile web front-end learning-HTML5 common features part-construction of offline notes

In the previous article, we simply built a node.js background, in order to verify the offline cache application cache and serviceWorker

First is applicationCache

We create a file in the project test package: offline.manifest

CACHE MANIFEST   
Resources after #cache will be cached  
ApplicationcacheDemo.html
css / mui.min.css
js/mui.min.js  
Resources will not be cached after #network, always obtained from online
NETWORK:  
#FALLBACK is to replace all files in the /html5/ directory with "404.html" if an internet connection cannot be established
FALLBACK:   
/test-project-packages/ /file/error404.html

Then create 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" />
		<!--Remove favicon.ico request-->
		<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 ();
			//Get the text field of the record content
			var el = document.getElementById("content");
			el.addEventListener('blur',function(){
				//Get the content of the text field
				var data = el.innerText;
				if(navigator.onLine){
					// save the content to the server
					saveOnline(data);
				}else{
					localStorage.setItem('data',data);
				}
				
			});
			//listen for online events
			window.onLine = function(){
				// get data from local
				var data = localStorage.getItem('data');
				if(!!!data){
					//If the data exists, save it to the server
					saveOnline(data);
					// Also clear the local cache
					localStorage.removeItem('data');
				}
			}
			function saveOnline(data){
				var xhr = new XMLHttpRequest();
				//Define the callback of the request response, which will be executed every time the readyState changes
				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>

Next is the server construction server.js for 3000 requests

//Get the mime module
var mime = require("mime");
var http = require('http');
var fs = require("fs");
var querystring = require('querystring');
http.createServer(function(req, res, filePath) {
	//solve cross domain
	res.setHeader('Access-Control-Allow-Origin', '*');
	// A post variable is defined to temporarily store the information of the request body
	var body = "";
	// Through the data event listener function of req, whenever the data of the request body is received, it is accumulated into the post variable
	req.on('data', function(chunk) {
		body += chunk;
	});
	req.on('end', function() {
		// parsing parameters
		body = querystring.parse(body);
		// Set the response header information and encoding
		res.writeHead(200, {
			'Content-type': mime.getType(filePath)
		});
		//Write the request content to the file
		console.log("Ready to write to file");
		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("Server started");
});

Then shift+right->node server.js

Then the browser runs this page, you can find these caches in the application in Chrome, and then you can try the offline effect and compare the effect of other pages without cache.

Mobile web front-end learning-HTML5 common features part-construction of offline notes

Guess you like