你或許已沮喪許久。眾多Objective-C開(kāi)發(fā)高手憑借制作iOS應(yīng)用取得顯著成就。你或許嘗試閱讀iOS應(yīng)用開(kāi)發(fā)指南，但Objective-C或類(lèi)似語(yǔ)言確實(shí)沒(méi)那么簡(jiǎn)單。

我不是說(shuō)應(yīng)該放棄目標(biāo)，你最終定能夠?qū)崿F(xiàn)。但你同時(shí)還有其他選擇。

憑借已有技術(shù)，你完全能夠勝任如下內(nèi)容：HTML 5、CSS、和JavaScript。

作者會(huì)詳細(xì)說(shuō)明如何制作離線(xiàn)HTML 5 iOS應(yīng)用。更具體地說(shuō)，作者將演示《俄羅斯方塊》游戲制作過(guò)程。

離線(xiàn)應(yīng)用

所謂離線(xiàn)是什么意思?是指我們擁有定制圖標(biāo)、定制啟動(dòng)屏幕以及原生外觀(guān)和風(fēng)格，你能夠在手機(jī)沒(méi)連網(wǎng)情況下使用應(yīng)用。

應(yīng)用離線(xiàn)功能應(yīng)保持一致，就像正常原生手機(jī)應(yīng)用。

此開(kāi)發(fā)指南是就iPhone而言，但其實(shí)也適用采取HTML5瀏覽器的手機(jī)設(shè)備。

是的，不妨參考下圖，應(yīng)用底部沒(méi)有URL欄和導(dǎo)航圖標(biāo)，看起來(lái)就像個(gè)原生手機(jī)應(yīng)用。

final result html5 iphone from sixrevisions.com

預(yù)先準(zhǔn)備工作

你要能夠訪(fǎng)問(wèn)服務(wù)器，以改變文件HTTP Headers信息。原因是我們需充分利用HTML5的離線(xiàn)緩存功能。

Apache在此表現(xiàn)突出，你只需在.htaccess文件中添加內(nèi)容便能夠順利實(shí)現(xiàn)操作。這是使用htaccess修改HTTP標(biāo)題信息指南。

另一需要完成的任務(wù)是確保iPhone 瀏覽器Safari設(shè)有調(diào)試欄。進(jìn)入iPhone Settings.app > Safari > Developer，啟動(dòng)調(diào)試控制臺(tái)。這能夠幫你辨識(shí)潛在JavaScript錯(cuò)誤。

完成應(yīng)用創(chuàng)建后，應(yīng)關(guān)閉該功能，這樣你才能在測(cè)試HTML5 iPhone應(yīng)用過(guò)程中獲得完整體驗(yàn)。

debug console iphone from sixrevisions.com#p#

應(yīng)用方面

圖標(biāo)和啟動(dòng)屏幕

圖像大小為57 X 57像數(shù)。

iPhone將會(huì)繞行圖標(biāo)四角，創(chuàng)造陰影效果，給圖標(biāo)添加光澤。

圖標(biāo)應(yīng)采用PNG或JPG格式。

以下是我制作俄羅斯方塊游戲采用的圖標(biāo)。

iphone icon from sixrevisions.com

啟動(dòng)頁(yè)面應(yīng)是320 X 320像數(shù)，且需采用PNG或JPG格式。

下面是我采用的啟動(dòng)屏幕。

opening screen from sixrevisions.com

項(xiàng)目開(kāi)始前的幾大建議

規(guī)模小、數(shù)量少和構(gòu)思簡(jiǎn)單。

◆ 規(guī)模?。哼@是開(kāi)發(fā)手機(jī)應(yīng)用，所以即便能夠緩存內(nèi)容，壓縮文件大小依然是明智之舉。

◆ 數(shù)量少：應(yīng)盡量減少處理文件數(shù)量。

◆ 構(gòu)思簡(jiǎn)單：先從簡(jiǎn)單想法入手。減少覆蓋范圍，以便項(xiàng)目能夠快速落實(shí)。

應(yīng)用緩存

這是個(gè)新標(biāo)準(zhǔn)，我們這里將詳細(xì)說(shuō)明。

應(yīng)用緩存讓瀏覽器能夠提前決定網(wǎng)頁(yè)所需文件，以順利實(shí)現(xiàn)網(wǎng)頁(yè)運(yùn)作。

應(yīng)用會(huì)存儲(chǔ)這些文件。文件語(yǔ)法很簡(jiǎn)單：羅列文件在文件清單(/picture.png)中的絕對(duì)(游戲邦注：例如http://yourwebserver.com/picture.png)或相對(duì)位置。瀏覽器離線(xiàn)狀態(tài)也會(huì)保存這些文件。

你也可以羅列少量不應(yīng)保存的URL鏈接，但這和離線(xiàn)應(yīng)用無(wú)關(guān)。

整個(gè)操作最關(guān)鍵的部分是清單文件(文件應(yīng)進(jìn)行線(xiàn)下保存)需以Header格式傳輸。這就是為什么你需訪(fǎng)問(wèn)能夠設(shè)定HTTP標(biāo)題的網(wǎng)頁(yè)瀏覽器。

頁(yè)面大小

設(shè)計(jì)應(yīng)用的一個(gè)注意事項(xiàng)：應(yīng)用模式的頁(yè)面大小是320X460像數(shù)。網(wǎng)頁(yè)模式的頁(yè)面大小是320X356像數(shù)。這會(huì)影響離線(xiàn)HTML5應(yīng)用的用戶(hù)界面。

下面我們就來(lái)逐一闡述它們不同之處。

iphone ui side comp from sixrevisions.com

HTML

這是個(gè)真實(shí)瀏覽器，所以HTML完全相同。iPhone瀏覽器也是處在HTML5前端。接著就來(lái)看其中具體要求。

想要獲悉更多深入細(xì)節(jié)，參考Safari Developer的以下兩個(gè)內(nèi)容：

◆ Safari HTML Reference

◆ Safari CSS Reference

應(yīng)用編碼

應(yīng)用首先要定義標(biāo)記。下面就是我制作的《俄羅斯方塊》游戲的標(biāo)記。 

首先注意文檔類(lèi)型，HTML5表現(xiàn)是否出色?

標(biāo)簽的manifest=”cache.manifest”屬性就是瀏覽器判斷我們離線(xiàn)網(wǎng)頁(yè)存儲(chǔ)方式的依據(jù)。

以下是蘋(píng)果在HTML5頁(yè)面的專(zhuān)屬標(biāo)記。我們將逐一闡述：

◆ apple-mobile-web-app-capable：這表明我們是真的想要制作離線(xiàn)應(yīng)用。

◆ apple-mobile-web-app-status-bar-style：這隱藏應(yīng)用離線(xiàn)狀態(tài)欄和導(dǎo)航欄。

◆ apple-touch-icon：這是圖像指示器(游戲邦注：主要針對(duì)那些想要轉(zhuǎn)換成圖標(biāo)的圖像)。

◆ apple-touch-startup-image：這是指向啟動(dòng)頁(yè)面的URL。

需注意的是你需把CSS和JavaScript分別置于頂端和底端。

CSS(層疊樣式表)

這幾乎和標(biāo)準(zhǔn)網(wǎng)頁(yè)相差無(wú)幾。這里有些Webkit CSS具體規(guī)則，能夠用來(lái)制作動(dòng)畫(huà)之類(lèi)的美妙內(nèi)容，但這不過(guò)是應(yīng)急指南，不在文章陳述范圍。

CSS不過(guò)是普通頁(yè)面。

CSS fom sixrevisions.com

這個(gè)頁(yè)面是網(wǎng)頁(yè)區(qū)分元素，確保能夠匹配iPhone視口。

JavaScript

我使用Dalton Ridenhour修訂版JavaScript，我是在Github發(fā)現(xiàn)的。JS原本只瞄準(zhǔn)標(biāo)準(zhǔn)網(wǎng)頁(yè)瀏覽器。我唯一要調(diào)整的是讓其不再要求具備關(guān)鍵字。

總之，JS功能在iPhone設(shè)備運(yùn)作良好(游戲邦注：雖然有少數(shù)例外情況)。不妨看看iPhone設(shè)備的鼠標(biāo)指向功能，但若沒(méi)有標(biāo)準(zhǔn)定點(diǎn)設(shè)備(如鼠標(biāo))，其功能顯然無(wú)法實(shí)現(xiàn)。

把握所有內(nèi)容后，你便能夠進(jìn)行測(cè)試，打開(kāi)iPhone設(shè)備的index.html文件，便實(shí)現(xiàn)運(yùn)作。

接著就是使用真實(shí)網(wǎng)頁(yè)瀏覽器(游戲邦注：其能夠設(shè)置cache.manifest背景)提供服務(wù)。

然后你就能把該功能添加至主頁(yè)面，植入所有附加內(nèi)容，查看離線(xiàn)模式。#p#

離線(xiàn)數(shù)據(jù)

除具備離線(xiàn)保存功能外，你還要能在離線(xiàn)數(shù)據(jù)中庫(kù)存儲(chǔ)用戶(hù)數(shù)據(jù)。每個(gè)用戶(hù)或頁(yè)面數(shù)據(jù)都有兩個(gè)主要API(游戲邦注：應(yīng)用程序界面)。首先是localStorage，這是個(gè)具備簡(jiǎn)單API的便捷鍵值商店。例如，你能夠使用其存儲(chǔ)用戶(hù)積分。

localStorage from sixrevisions.com

其次就是離線(xiàn)SQL引擎，這是網(wǎng)頁(yè)數(shù)據(jù)庫(kù)。其API更先進(jìn)，以下部分僅供參考。

// 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 < result.rows.length; ++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; 
 
}); 
 
}); 

總結(jié)

離線(xiàn)HTML應(yīng)用有很多可供挖掘的空間。諸如《俄羅斯方塊》之類(lèi)的游戲已成為可能。你最好想想自己想要制作的內(nèi)容，確定其是否適應(yīng)離線(xiàn)應(yīng)用模式?！禥uake 3 Arena》顯然是行不通的.