11點前昏睡

Offline?什麼是離線？離線意味著，我們有一個自訂的icon和介面讓他們看起來像本機應用程式，無論手機是否連上了網路都能夠使用。

Prework

About the App

Icon and Startup Screen

Some tips before you start

• 小：手機程式開發需要暫存文件，所以要保持文件的大小。
• 少：需要處理的文件的數量越少越好.
• 簡單：從一些簡單的想法開始，在做的過程中把持住複雜度，這樣你會完成的更快。

Application Cache

Screen Size

HTML

• Safari HTML Reference
• Safari CSS Reference

Let's get coding

首先，注意Doctype，這難道不值得為HTML5歡呼嗎？ 

其中標籤中的manifest=”cache.manifest” 屬性告訴瀏覽器，我們需要暫存這個離線頁面。 

這些是蘋果在HTML5中獨有的markup，簡單的介紹下： 

 apple-mobile-web-app-capable: 另一種聲明這是一個offline app。 
 apple-mobile-web-app-status-bar-style: 當程式離線時隱藏status bar和nav bar。 
 apple-touch-icon:指向需要成為icon的圖片。 
 apple-touch-startup-image:指向首頁圖片的url。 
同時要注意，把CSS至頂而把JavaScript放在底下（最好這樣做）。 

CSS 
與大多數網頁一樣，你還可以使用-webkit 規則的CSS做一些像動畫一樣非常酷的特效。但是這個話題有點超出本文的範圍了。 

下面的CSS很樸素

body {
overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}
這個樣式只是為了確保div元素能適應iPhone的顯示界面。 

JavaScript 
我用了一個改裝過的javascript版本，來自於Dalton Ridenhour ;我在Github上發現的.JS本來是用在網頁瀏覽器中的。而我不得不做了一點點修改讓它支援鍵盤。 

一般來說，JS 方法在iPhone中運行正常-雖然有些小問題。想想一些類似mouseover在iPhone中存在的事件，我不確定當你沒有標準的點擊設備時（如：滑鼠）能幫到多少。 Quirksmode發表了一篇關於events on the iPhone的文章，受益良多。 

當你全完成了，你可以在iPhone中打開index.html 測試，應該能夠可以見所有運行正常。 

接著，下一步是從一個真實的伺服器上設置暫存manifest。 

然後你可以新增到主桌面上，然後查看離線模式。 

你可以參考一個可以運行的版本，我建立在： 

 http://tetris.alexkessinger.net 
Bonus Section: Offline Data 
隨著需要離線的文件越來越複雜，你也可以講用戶數據存儲在一個離線資料庫中。有兩個主要的API，一個是保存每個用戶的數據，另一個是用來保存每個頁面的資料。 

第一種是localStorage。 localStorage，一種簡單的鍵值對存儲方式。 

localStorage.dataToStore = 5;
console.log(localStorage.dataToStore);
// 5
舉個例子，你可以用它來存儲用戶的得分。 

第二種實際上時一個離線的SQL引擎，一個webdatabase 。 API更先進一些，這需要一點程式碼： 

// Try and get a database object
var db;

try {
if (window.openDatabase) {
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
if (!db)
alert("Failed to open the database on disk. This is probably because the version was /
bad or there is not enough space left in this domain's quota");
} else
alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled");
} catch(err) { }

// Check and see if you need to initalize the DB
db.transaction(function(tx) {
tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
loadNotes();
}, function(tx, error) {
tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /
REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
loadNotes();
});
});
});

// Insert a test Note.
var note = {
id: "1",
text:" This is a test note",
timestamp: "112123000",
left:10,
top:10,
zIndex:2
};
db.transaction(function (tx)
{
tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /
(?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);
});

// Get all the notes out of the database.
db.transaction(function(tx) {
tx.executeSql("SELECT id, note, timestamp, left, top, zindex /
FROM WebKitStickyNotes", [], function(tx, result) {
for (var i = 0; i var row = result.rows.item(i);
var note = new Note();
note.id = row['id'];
note.text = row['note'];
note.timestamp = row['timestamp'];
note.left = row['left'];
note.top = row['top'];
note.zIndex = row['zindex'];

if (row['id'] > highestId)
highestId = row['id'];
if (row['zindex'] > highestZ)
highestZ = row['zindex'];
}

if (!result.rows.length)
newNote();
}, function(tx, error) {
alert('Failed to retrieve notes from database - ' + error.message);
return;
});
});
Wrap Up 
離線HTML程式可以做很多東西，遊戲，像俄羅斯方塊，沒有什麼是不可能的，但是你需要事先考慮你想做什麼是否有必要做成離線程式。雷神之鎚3競技場，可能不行，做一個確信可行的to-do程序表。讓應用程序遍地開花吧！

資料來源： Sixrevisions


本站文章除註明轉載外，均為本站原創編譯，轉載請註明：文章轉載自： 雲端狂人-Justing賈斯汀 [http://justing.fcld.tw ]