離線iOS應用的HTML 5制作指南
你或許已沮喪許久。眾多Objective-C開發(fā)高手憑借制作iOS應用取得顯著成就。你或許嘗試閱讀iOS應用開發(fā)指南，但Objective-C或類似語言確實沒那么簡單。
我不是說應該放棄目標，你最終定能夠?qū)崿F(xiàn)。但你同時還有其他選擇。
憑借已有技術，你完全能夠勝任如下內(nèi)容：HTML 5、CSS、和JavaScript。
作者會詳細說明如何制作離線HTML 5 iOS應用。更具體地說，作者將演示《俄羅斯方塊》游戲制作過程。
離線應用
所謂離線是什么意思?是指我們擁有定制圖標、定制啟動屏幕以及原生外觀和風格，你能夠在手機沒連網(wǎng)情況下使用應用。
應用離線功能應保持一致，就像正常原生手機應用。
此開發(fā)指南是就iPhone而言，但其實也適用采取HTML5瀏覽器的手機設備。
是的，不妨參考下圖，應用底部沒有URL欄和導航圖標，看起來就像個原生手機應用。
final result html5 iphone from sixrevisions.com
預先準備工作
你要能夠訪問服務器，以改變文件HTTP Headers信息。原因是我們需充分利用HTML5的離線緩存功能。
Apache在此表現(xiàn)突出，你只需在.htaccess文件中添加內(nèi)容便能夠順利實現(xiàn)操作。這是使用htaccess修改HTTP標題信息指南。
另一需要完成的任務是確保iPhone 瀏覽器Safari設有調(diào)試欄。進入iPhone Settings.app > Safari > Developer，啟動調(diào)試控制臺。這能夠幫你辨識潛在JavaScript錯誤。
完成應用創(chuàng)建后，應關閉該功能，這樣你才能在測試HTML5 iPhone應用過程中獲得完整體驗。
debug console iphone from sixrevisions.com#p#
應用方面
圖標和啟動屏幕
圖像大小為57 X 57像數(shù)。
iPhone將會繞行圖標四角，創(chuàng)造陰影效果，給圖標添加光澤。
圖標應采用PNG或JPG格式。
以下是我制作俄羅斯方塊游戲采用的圖標。
iphone icon from sixrevisions.com
啟動頁面應是320 X 320像數(shù)，且需采用PNG或JPG格式。
下面是我采用的啟動屏幕。
opening screen from sixrevisions.com
項目開始前的幾大建議
規(guī)模小、數(shù)量少和構思簡單。
◆ 規(guī)模小：這是開發(fā)手機應用，所以即便能夠緩存內(nèi)容，壓縮文件大小依然是明智之舉。
◆ 數(shù)量少：應盡量減少處理文件數(shù)量。
◆ 構思簡單：先從簡單想法入手。減少覆蓋范圍，以便項目能夠快速落實。
應用緩存
這是個新標準，我們這里將詳細說明。
應用緩存讓瀏覽器能夠提前決定網(wǎng)頁所需文件，以順利實現(xiàn)網(wǎng)頁運作。
應用會存儲這些文件。文件語法很簡單：羅列文件在文件清單(/picture.png)中的絕對(游戲邦注：例如http://yourwebserver.com/picture.png)或相對位置。瀏覽器離線狀態(tài)也會保存這些文件。
你也可以羅列少量不應保存的URL鏈接，但這和離線應用無關。
整個操作最關鍵的部分是清單文件(文件應進行線下保存)需以Header格式傳輸。這就是為什么你需訪問能夠設定HTTP標題的網(wǎng)頁瀏覽器。
頁面大小
設計應用的一個注意事項：應用模式的頁面大小是320X460像數(shù)。網(wǎng)頁模式的頁面大小是320X356像數(shù)。這會影響離線HTML5應用的用戶界面。
下面我們就來逐一闡述它們不同之處。
iphone ui side comp from sixrevisions.com
HTML
這是個真實瀏覽器，所以HTML完全相同。iPhone瀏覽器也是處在HTML5前端。接著就來看其中具體要求。
想要獲悉更多深入細節(jié)，參考Safari Developer的以下兩個內(nèi)容：
◆ Safari HTML Reference
◆ Safari CSS Reference
應用編碼
應用首先要定義標記。下面就是我制作的《俄羅斯方塊》游戲的標記。
首先注意文檔類型，HTML5表現(xiàn)是否出色?
標簽的manifest=”cache.manifest”屬性就是瀏覽器判斷我們離線網(wǎng)頁存儲方式的依據(jù)。
以下是蘋果在HTML5頁面的專屬標記。我們將逐一闡述：
◆ apple-mobile-web-app-capable：這表明我們是真的想要制作離線應用。
◆ apple-mobile-web-app-status-bar-style：這隱藏應用離線狀態(tài)欄和導航欄。
◆ apple-touch-icon：這是圖像指示器(游戲邦注：主要針對那些想要轉(zhuǎn)換成圖標的圖像)。
◆ apple-touch-startup-image：這是指向啟動頁面的URL。
需注意的是你需把CSS和JavaScript分別置于頂端和底端。
CSS(層疊樣式表)
這幾乎和標準網(wǎng)頁相差無幾。這里有些Webkit CSS具體規(guī)則，能夠用來制作動畫之類的美妙內(nèi)容，但這不過是應急指南，不在文章陳述范圍。
CSS不過是普通頁面。
CSS fom sixrevisions.com
這個頁面是網(wǎng)頁區(qū)分元素，確保能夠匹配iPhone視口。
JavaScript
我使用Dalton Ridenhour修訂版JavaScript，我是在Github發(fā)現(xiàn)的。JS原本只瞄準標準網(wǎng)頁瀏覽器。我唯一要調(diào)整的是讓其不再要求具備關鍵字。
總之，JS功能在iPhone設備運作良好(游戲邦注：雖然有少數(shù)例外情況)。不妨看看iPhone設備的鼠標指向功能，但若沒有標準定點設備(如鼠標)，其功能顯然無法實現(xiàn)。
把握所有內(nèi)容后，你便能夠進行測試，打開iPhone設備的index.html文件，便實現(xiàn)運作。
接著就是使用真實網(wǎng)頁瀏覽器(游戲邦注：其能夠設置cache.manifest背景)提供服務。
然后你就能把該功能添加至主頁面，植入所有附加內(nèi)容，查看離線模式。#p#
離線數(shù)據(jù)
除具備離線保存功能外，你還要能在離線數(shù)據(jù)中庫存儲用戶數(shù)據(jù)。每個用戶或頁面數(shù)據(jù)都有兩個主要API(游戲邦注：應用程序界面)。首先是localStorage，這是個具備簡單API的便捷鍵值商店。例如，你能夠使用其存儲用戶積分。
localStorage from sixrevisions.com
其次就是離線SQL引擎，這是網(wǎng)頁數(shù)據(jù)庫。其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 < 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;
- });
- });
總結
離線HTML應用有很多可供挖掘的空間。諸如《俄羅斯方塊》之類的游戲已成為可能。你最好想想自己想要制作的內(nèi)容，確定其是否適應離線應用模式。《Quake 3 Arena》顯然是行不通的.
