轉載自：http://www.iphone-geek.cn/程式設計/建立離線iphone-web-app
建立Web App的好處很多，比如：
- 可以運作在任何平台上 （當然要考慮浏覽器的相容性和螢幕大小問題）
- 不需要學習iPhone程式設計語言
- 最大的好處是不需要經過App Store準許
随着Internet技術的迅速發展，使得Web App越來越強大，從簡單的應用甚至到遊戲，都可能通過Web App實作。但是，它要求随時連接配接到Internet，大大降低了Web App的實用性。随着Safari對HTML 5的支援，使得Web App的離線運作成為可能。這意味着你可以在沒有Internet連接配接的情況下運作你的應用程式。
下面的例子改編自How to Make an HTML5 iPhone App，它介紹了建立一個離線“積木”遊戲的全過程，我加上了建立使用者自定義的桌面圖示和啟動畫面的方法，使它看上去完全像一個真正的iPhone應用程式，而這是完全不需要通過Apple的App Store準許的。
基本要求
網頁程式設計技術：HTML(5)， CSS 以及 JavaScript。
準備工作
由于我們要利用HTML5的離線緩存技術，我們需要通路網頁伺服器以便對檔案的HTTP Headers進行修改（稍後我們會詳細讨論）。
Apache伺服器很容易通過修改 .htaccess 檔案完成你需要的工作。這裡是一篇教程關于 m使用htaccess修改HTTP header。
然後你需要打開Safari浏覽器的調試窗以幫助你進行調試。在Settings > Safari > Developer中打開調試終端，它能夠幫助你發現一些潛在的Javascript錯誤。記住在完成調試後，關閉調試窗。
應用程式緩存
HTML5 有關離線的标準參考這裡。
應用程式緩存允許浏覽器預先确定網頁所需的所有檔案，然後它将儲存這些檔案。格式是絕對位址如http://yourwebserver.com/picture.png 或者相對位址(/picture.png)，浏覽器将離線儲存這些檔案。
你還可以列出不需要緩存的URL。最主要的部分是清單檔案（需要離線緩存檔案的清單）在Http Header中的filetype必須設定為text/manifest。
螢幕尺寸
在設計iPhone Web App時必須注意，當處于app模式時，螢幕尺寸為 320px X 460px，而在web模式時為 320px X 356px。這也許會影響你的使用者界面設計。
代碼
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html manifest="tetris.manifest"> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"> <title>offline Tetris </title> </head> <body> <!-- Put your Markup Here --> <script type="text/javascript" src="tetris.js"></script> </body> </html> |
中的 manifest=”cache.manifest” 屬性将告訴浏覽器我們可能需要對檔案進行離線緩存。
下面是Apple專用的HTML 5屬性：
- : 設定為離線模式
1 apple-mobile-web-app-capable - : 當處于離線時隐藏狀态條，導覽列
1 apple-mobile-web-app-status-bar-style - :指向作為圖示的圖像
1 apple-touch-icon - : 指向作為啟動圖像的url
1 apple-touch-startup-image
CSS
這幾乎與普通網頁完全一樣。還有一些webkit專用的CSS能實作一些特殊效果如動畫等。
我們使用的CSS如下：
body {
overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
} JavaScript
我使用的是 Dalton Ridenhour 的Javascript，源代碼在 Github。原JS是為普通網頁設計的，我們僅需要修改一下拿掉對鍵盤的支援。
通常JS在iPhone上完全能正常工作，當然有一些例外。請參閱 events on the iPhone 。
下面是完成的網頁，你可以進行測試，看看它是怎樣離線運作的：
http://tetris.alexkessinger.net
設定圖示和啟動畫面
使用iPhone Safari浏覽器，很容易将應用程式的圖示添加到你iPhone上的Home Screen。
- 首先，建立一個57×57的png圖示。将其放在網站的文檔根目錄下（注意不是伺服器的文檔根目錄）
- 在html中加入（見上面HTML代碼部分） ，指向圖示檔案。
- 在html中加入（見上面HTML代碼部分） ，指向啟動畫面圖像檔案。
- 打開浏覽器，在位址欄輸入你Web App的URL，按下浏覽器下方的加号，選擇“Add To Home Screen”,然後輸入Web App的名稱，比如Tetris。
這樣一個積木遊戲的圖示就添加到了你的iPhone螢幕上，啟動後即使你的iPhone沒有線上，也可以正常運作。
我的設想
這樣的Web App看上去與普通程式沒什麼大差別，不過卻需要使用者自己添加圖示，這雖然不是什麼大問題，但還不是很完美。我想要是在你的網頁上添加一項“安裝到iPhone/iPod Touch/iPad”，在按下後可以自動添加圖示，那麼一切就完美了。我現在還沒有解決方法，大家有什麼建議嗎？