6. Applications
Offline Cache
使用傳統Web Application的使用者只能夠在有辦法連線到網路的情況下使用。當他們離線的時候，他們無法確認e-mail、瀏覽行事曆或利用online tool準備簡報。這種時候使用者依賴他們的HTTP cache來取得整個application。
HTML5為此提供兩種規格的solution：SQL-based database API用來在本地端儲存資料、offline application HTTP cache用來確認在offline的時候application是否可使用。
Offline Application Caching APIs
在Offline Application Caching APIs中用來確認Web application在離線的狀態下是否可使用的機制，就是html element上的manifest attribute。
URI被記錄到manifest中用來指定那些檔案應該要被cache起來，manifest有一個text/caceh-manifest MIME type。
典型的檔案看起來像這樣：
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/background.png
NETWORK:
server.cgi
這個檔案指定了許多個檔案應該要被cache起來，也指定了server.cgi不需要被cache，因此任何試圖讀取server.cgi的動作都會跳過尋找cache的這個步驟。
Web Storage
HTML5的Web Storage分為兩種分別是永久儲存的localStorage與當瀏覽器關閉就立即清除的sessionStorage。
Web Storage使用的語法較存取cookie方便，但並沒有像cookie一樣可以設定刪除時間的能力。
寫入資料方法：
windows.localStorage.setItem('aaa', '111');
windows.sessionStorage.setItem('bbb', '222');
localStorage.aaa='111';
sessionStorage.bbb='222';
localStorage['aaa']='111';
sessionStorage['bbb']='222';
讀取資料方法：
var aaa = window.localStorage.getItem('aaa');
var bbb = window.sessionStorage.getItem('bbb');
var aaa = window.localStorage.aaa;
var bbb= window.sessionStorage.bbb;
var aaa = window.localStorage['aaa'];
var bbb = window.sessionStorage['bbb'];
移除資料方法：
window.localStorage.removeItem('aaa');
window.sessionStorage.removeItem('bbb');
delete window.localStorage.aaa;
delete window.sessionStorage.bbb;
delete window.localStorage['aaa'];
delete window.sessionStorage['bbb'];
移除整個Web Storage的資料：
window.localStorage.clear();
window.sessionStorage.clear();
取得Web Storage的資料筆數：
var size = window.localStorage.length;
var size = window.sessionStorage.length;
取得某一行資料的key：
eg. 拿第一行資料的key
var key = window.localStorage.key(1);
var key = window.sessionStorage.key(1);
Web localStorage/sessionStorage Demo: http://robertnyman.com/html5/webstorage/webStorage.html
Workers
Workers可以讓我們在背景做運算而不影響現存的GUI介面，當Worker執行期間使用者仍然可以自由的在頁面做任何動作而不受影響。
使用Web Workers的方式：
首先先建立一個worker，並給予它一個想在背景執行的javascript。
var worker = new Worker("worker.js");
如果要執行的那段script需要給值，我們可以利用postMessage傳送值過去。
worker.postMessage(0);
若要接收worker送回的訊息可以利用onmessage。
worker.onmessage = function(evt) {
// evt.data 就是從worker接收回來的值。
};
如果worker執行間發生錯誤會透過onerror把錯誤丟出來。
worker.onerror = function(evt) {
// 同上evt.data就是從worker接收回來的錯誤訊息。
};
如果要中斷worker的工作可以使用terminate
worker.terminate();
worker.js
onmessage = function(evt) {
//同樣的道理evt.data就是主程式利用postMessage丟過來的值，我們可以對這個值做處裡。
postMessage("blablabla");
在需要送值回到主程式時一樣也可以透過postMessage送回，主程式也會透過onmessage接收。
};
Web Workers Demo: http://robertnyman.com/html5/webworkers/webWorkers.html
Web SQL Database
宣告資料庫
var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
四個參數分別代表：
- Database name
- Version number
- Text description
- Estimated size of database
- Creation callback: 即使沒有callback，資料庫也能正確地宣告出來。
Transaction & executeSql
在transaction中可以執行多個SQL指令，transaction提供rollback功能，當我們執行一連串的SQL指令之後不幸遇到錯誤生時，rollback可以將資料恢復到執行前的狀態，就像沒有發生過任何事一樣。
在transaction中可以使用executeSql執行SQL指令，executeSql涵式包含四個參數分別是：
- SQL指令
- 傳入參數陣列
- successCallback
- errorCallback
db.transaction(function (tx) {
tx.executeSql('SQL指令1', [], successCallback, errorCallback);
tx.executeSql('INSERT INTO abc (id, name) VALUES (?, ?)', [id, userName]);
tx.edecuteSql('SELECT * FROM abc', [], function(tx, results) {
alert(results.rows.item(i).text);
});
});
Geolocation API
Geolocation API定了幾個interface來讀取設備的location information，location information的來源包括GPS、RFID、WiFi、藍芽MAC地址、GSM/CDMA cell ID或者人工輸入。
使用方式：
一次性取得位址
navigator.geolocation.getCurrentPosition();
持續更新位址
var watchID = navigator.geolocation.watchPosition();
// 若要停止持續抓取位址可以使用clearWatch
navigator.geolocation.clearWatch(watchId);
持續更新位址並處理error
function handleError(error) {
// update error message blabla
}
var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);
若要停止持續抓取位址可以使用：
navigator.geolocation.clearWatch(watchId);
得到暫存的位址
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {maximumAge:600000});
function successCallback(position) {
// 由於使用了maximumAge參數，這個location位址保證是在最近10分鐘之內抓取的。
}
function errorCallback(error) {
// update error message blabla
}
Geolocation API Demo
Demo：http://maxheapsize.com/static/html5geolocationdemo.html
Reference:
web storage
HTML5 - Web Storage | Programming Design Notes
HTML5 Web Storage | Ecommerce Developer
web sql
Introducing Web SQL Databases | HTML5 Doctor
HTML5: Web SQL Database « Keep an Open Eye Eye, Sir
[HTML5試試看-24] 儲存 - Web SQL及其他資料庫 - iT邦幫忙::IT知識分享社群
web worker
Using HTML5 Web Workers to have background computational power - Robert's talk
geolocation api