web app

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;