离线web应用
1.离线web应用指的是将自己“安装”在应用程序缓存中的程序，是的哪怕在浏览器
处于离线状态的时候依然可以访问他。
2.需要缓存的文件
permanote.appcache
3.permanote.html
<!DOCTYPE html>
<html lang="en" manifest="permanote.appcache">
<head>
<title>离线web应用</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="permanote.js"></script>
<style>
#editor {
width: 400px;
height: 200px;
}
#statusline {
width: 400px;
}
</style>
</head>
<body>
<div id="toolbar">
<button id="savebutton" onclick="save()">save</button>
<button onclick="sync()">sync note</button>
<button onclick="applicationCache.update">update application</button>
</div>
<textarea id="editor"></textarea>
<div id="statusline"></div>
</body>
</html>
4.permanote.js// 一些贯穿始终的变量
var editor, statusline, savebutton, idletimer;
// 首次载入应用
window.onload = function() {
// 第一次载入是初始化本地存储
if (localStorage.note == null) localStorage.note = "";
if (localStorage.lastModified == null) localStorage.lastModified = 0;
if (localStorage.lastSaved == null) localStorage.lastSaved = 0;
// 查找编辑器UI ，并初始化全局变量
editor = document.getElementById("editor");
statusline = document.getElementById("statusline");
savebutton = document.getElementById("savebutton");
//初始化编辑器，将保存的笔记数据填充为其内容
editor.value = localStorage.note;
// 同步前禁止编辑
editor.disabled = true;
// 一旦文本区内有内容输入
editor.addEventListener("input", function(e) {
// 将新的值保存到localStorage中
localStorage.note = editor.value;
localStorage.lastModified = Date.now();
// 重置闲置计时器
if (idletimer) clearTimeout(idletimer);
idletimer = setTimeout(save, 5000);
// 启用保存按钮
savebutton.disabled = false;
}, false);
// 每次载入应用程序时，尝试同步服务器
sync();
};
// 离开页面前保存数据到服务器
window.onbeforeunload = function() {
if (localStorage.lastModified > localStorage.lastSaved)
save();
};
// 离线时，通知用户
window.onoffline = function() {
status("offline");
};
// 再次返回在线状态时，进行同步
window.ononline = function() {
sync();
};
// 当有新版本应用的时候，提醒用户
// 这里我们也可以采用location.reload()方法来强制重新载入应用
window.applicationCache.onupdateready = function() {
status("a new version of this application is availble reload to run it");
};
// 当没有新版本的时候也通知用户
window.applicationCache.onnoupdate = function() {
status("you are running the latest version of the application");
};
// 用于在状态栏显示状态消息的一个函数
function status(msg) {
statusline.innerHTML = msg;
};
// 每当笔记内容更新后，如果用户停止编辑超过5分钟
// 就会自动将笔记文本上传到服务器（在线状态）
function save() {
if (idletimer) clearTimeout(idletimer);
idletimer = null;
if (navigator.onLine) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", "/note");
xhr.send(editor.value);
xhr.onload = function() {
localStorage.lastSaved = Date.now();
}
}
};
// 检车服务端时候有新版本的笔记
// 如果没有，即将当前版本保存到服务器
function sync() {
if (navigator.onLine) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/note");
xhr.send();
xhr.onload = function() {
var remoteModTime = 0;
if (xhr.status == 200) {
var remoteModTime = xht.getResponseHeader("Last-Modified");
remoteModTime = new Date(remoteModTime).getTime();
}
if (remoteModTime > localStorage.lastModified) {
status("newer note found server");
var useit = config();
var now = Date.now();
if (useit) {
editor.value = localStorage.note = xhr.responseText;
localStorage.lastSaved = now;
status("newest version downloaded");
} else {
status("ignoring newer version of the note");
}
localStorage.lastModified = now;
} else {
status("you are editing the current version of the note");
}
if (localStorage.lastModified > localStorage.lastSaved) {
save();
}
// 再次启用编辑器
editor.disabled = false;
// 将光标定位到编辑器中
editor.focus();
}
} else {
// 离线状态下不能同步
status("can not sync while offlie");
editor.disabled = false;
editor.focus();
}
};
web前端开发
