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

 

一、獲取手機的高度和寬度

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;