http://kayosite.com/web-app-by-jquery-mobile-and-html5-principles.html Web App 与原生 App
webapp是在浏览器，移动端运行的应用程序
原生app是在各个系统，移动端运行的应用程序
可将webapp转为原生的app
html5 webstorage:可以保存非机密信息:http://kayosite.com/web-app-by-jquery-mobile-and-html5-web-storage.html 说的很详细，讲得都差不多。
$(document).on('pageinit', '#html5', function(){
// html5
var name = $('#name');
var comment = $('#comment');
function loadUserInfo(){
console.log('load loadUserInfo');
$('#name').val(localStorage.name);
$('#comment').val(localStorage.comment);
}
loadUserInfo();
console.log('load page');
function saveUserInfo(){
localStorage.name = name.val();
localStorage.comment = comment.val();
}
$('#submit').on('click', function(e){
e.preventDefault();
saveUserInfo();
})
})
localStorage：永久，同源：选项设置，用户偏好 sessionStorage：浏览器打开时，标签页内：记录暂时的状态 cookie需要在服务器的请求间传递；web storage存在客户端 浏览器对API和事件支持程度不同 方法：clear(), key(n), length 事件：storage
function triggerEvent(e){
var tips = 'key:' + e.key + ', newValue:' + e.newValue + ', oldValue:' + e.oldValue + ', url:' + e.url + ', storageArea:' + e.storageArea;
alert(tips);
}
window.addEventListener('storage', triggerEvent, true);
chrome F12 resources中可看到localstorage
离线缓存
使webapp减少对网络的依赖
会将引用缓存清单的页面缓存起来
chrome中查看本地的离线缓存：chrome://appcache-internals/
清除已缓存的文件，可以用过删除manifest文件来实现
在manifest中加载的js，css文件，不要再在html中加载。
教程：http://www.cnblogs.com/chyingp/archive/2012/12/01/explore_html5_cache.html
问题：会缓存当前页面，如果当前页面更新的话，缓存中的当前页面不会更新？ 需要将manifest文件更新一下
首次缓存
Document was loaded from Application Cache with manifest http://localhost:3000/demo.appcache Application Cache Checking event Application Cache Downloading event Application Cache Progress event (0 of 3) http://localhost:3000/handsontable/jquery-2.1.1.js Application Cache Progress event (1 of 3) http://localhost:3000/index.html Application Cache Progress event (2 of 3) http://localhost:3000/temp.html Application Cache Progress event (3 of 3) Application Cache UpdateReady event Application Cache Checking event Application Cache NoUpdate event
没有更新
Application Cache Checking event Application Cache NoUpdate event
有更新
Document was loaded from Application Cache with manifest http://localhost:3000/demo.appcache Application Cache Checking event Application Cache Downloading event Application Cache Progress event (0 of 3) http://localhost:3000/handsontable/jquery-2.1.1.js Application Cache Progress event (1 of 3) http://localhost:3000/index.html Application Cache Progress event (2 of 3) http://localhost:3000/temp.html Application Cache Progress event (3 of 3) Application Cache UpdateReady event
cache.update():主动更新
cache.swapCache():updateready之后，把原来的main.js清除，重新加载新的main.js，才会有更新。如果update之后，不加swapCache(),就算重新加载了mian.js，还是会加载原来的main.js。主要体现在test和ready test不同。
function load(url, callback){
var script = document.createElement('script');
script.src = url;
script.onload = function(){
callback && callback();
}
document.body.appendChild(script);
}
var cache = window.applicationCache;
console.log('test:'+test);
cache.update();
cache.addEventListener('updateready', function(){
cache.swapCache();
load('../javascripts/main.js', function(){
console.log('ready test:'+test);
})
})
web workers
在后台运行js，在web worker中可以访问navigator对象，只读访问location；message事件的callback中进行DOM操作
if(typeof(Worker) !== 'undefined'){
var w = new Worker('../mobile/workers.js');
var str = 'sfp';
w.postMessage(str);
w.onmessage = function(event){
console.log(event.data);
w.terminate();
};
w.onerror = function(event){
console.log(event.message);
console.log(event.lineno);
console.log(event.filename);
};
}else{
console.log('浏览器不支持');
}
onmessage=function(e){
var data=e.data;
data += data;
postMessage(data);
//close
//importScripts('a.js', 'b.js'); 顺序执行
}
subworker sharedworker
html5对webapp的影响，还是要好好看看的。
http://kayosite.com/web-app-by-jquery-mobile-and-html5-influence.html
1、获取手机的高度和宽度
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;