創(chuàng)建離線iPhone Web App教程
創(chuàng)建離線iPhone Web App教程是本文要介紹的內(nèi)容，創(chuàng)建Web App的好處很多，比如：可以運(yùn)行在任何平臺(tái)上 （當(dāng)然要考慮瀏覽器的兼容性和屏幕大小問題），不需要學(xué)習(xí)iPhone編程語言，***的好處是不需要經(jīng)過App Store批準(zhǔn)
隨著Internet技術(shù)的迅速發(fā)展，使得Web App越來越強(qiáng)大，從簡單的應(yīng)用甚至到游戲，都可能通過Web App實(shí)現(xiàn)。但是，它要求隨時(shí)連接到Internet，大大降低了Web App的實(shí)用性。隨著Safari對(duì)HTML 5的支持，使得Web App的離線運(yùn)行成為可能。這意味著你可以在沒有Internet連接的情況下運(yùn)行你的應(yīng)用程序。
下面的例子改編自 How to Make an HTML5 iPhone App，它介紹了創(chuàng)建一個(gè)離線“積木”游戲的全過程，我加上了創(chuàng)建用戶自定義的桌面圖標(biāo)和啟動(dòng)畫面的方法，使它看上去完全像一個(gè)真正的iPhone應(yīng)用程序，而這是完全不需要通過Apple的App Store批準(zhǔn)的。
基本要求
網(wǎng)頁編程技術(shù)：HTML(5)， CSS 以及 JavaScript。
準(zhǔn)備工作
由于我們要利用HTML5的離線緩存技術(shù)，我們需要訪問網(wǎng)頁服務(wù)器以便對(duì)文件的 HTTP Headers 進(jìn)行修改（稍后我們會(huì)詳細(xì)討論）。
Apache服務(wù)器很容易通過修改 .htaccess 文件完成你需要的工作。這里是一篇教程關(guān)于 m使用htaccess修改HTTP header。
然后你需要打開Safari瀏覽器的調(diào)試窗以幫助你進(jìn)行調(diào)試。在Settings > Safari > Developer中打開調(diào)試終端，它能夠幫助你發(fā)現(xiàn)一些潛在的Javascript錯(cuò)誤。記住在完成調(diào)試后，關(guān)閉調(diào)試窗。
應(yīng)用程序緩存
HTML5 有關(guān)離線的標(biāo)準(zhǔn)參考這里。
應(yīng)用程序緩存允許瀏覽器預(yù)先確定網(wǎng)頁所需的所有文件，然后它將保存這些文件。格式是絕對(duì)地址如http://yourwebserver.com/picture.png 或者相對(duì)地址(/picture.png)，瀏覽器將離線保存這些文件。
你還可以列出不需要緩存的URL。最主要的部分是清單文件（需要離線緩存文件的清單）在Http Header中的filetype必須設(shè)置為text/manifest。
屏幕尺寸
在設(shè)計(jì)iPhone Web App時(shí)必須注意，當(dāng)處于app模式時(shí)，屏幕尺寸為 320px X 460px，而在web模式時(shí)為 320px X 356px。這也許會(huì)影響你的用戶界面設(shè)計(jì)。
代碼
- <!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” 屬性將告訴瀏覽器我們可能需要對(duì)文件進(jìn)行離線緩存。
下面是Apple專用的HTML 5屬性：
- apple-mobile-web-app-capable
設(shè)置為離線模式
- apple-mobile-web-app-status-bar-style
當(dāng)處于離線時(shí)隱藏狀態(tài)條，導(dǎo)航條
- apple-touch-icon
指向作為圖標(biāo)的圖像
- apple-touch-startup-image
指向作為啟動(dòng)圖像的url
CSS
這幾乎與普通網(wǎng)頁完全一樣。還有一些webkit專用的CSS能實(shí)現(xiàn)一些特殊效果如動(dòng)畫等。
我們使用的CSS如下：
- body {
- overflow:hidden;
- background: #d7d7d7;
- margin:0;
- padding:0;
- }
- #tetris {
- width: 320px;
- height: 460px;
- background:#000;
- }
JavaScript
我使用的是 Dalton Ridenhour 的Javascript，源代碼在 Github。原JS是為普通網(wǎng)頁設(shè)計(jì)的，我們僅需要修改一下拿掉對(duì)鍵盤的支持。
通常JS在iPhone上完全能正常工作，當(dāng)然有一些例外。請(qǐng)參閱 events on the iPhone 。
下面是完成的網(wǎng)頁，你可以進(jìn)行測試，看看它是怎樣離線運(yùn)行的：http://tetris.alexkessinger.net
設(shè)定圖標(biāo)和啟動(dòng)畫面
使用iPhone Safari瀏覽器，很容易將應(yīng)用程序的圖標(biāo)添加到你iPhone上的Home Screen。
首先，創(chuàng)建一個(gè)57×57的png圖標(biāo)。將其放在網(wǎng)站的文檔根目錄下（注意不是服務(wù)器的文檔根目錄）
在html中加入（見上面HTML代碼部分） ，指向圖標(biāo)文件。
在html中加入（見上面HTML代碼部分） ，指向啟動(dòng)畫面圖像文件。
打開瀏覽器，在地址欄輸入你Web App的URL，按下瀏覽器下方的加號(hào)，選擇“Add To Home Screen”,然后輸入Web App的名稱，比如Tetris。
這樣一個(gè)積木游戲的圖標(biāo)就添加到了你的iPhone屏幕上，啟動(dòng)后即使你的iPhone沒有在線，也可以正常運(yùn)行。
小結(jié)：創(chuàng)建離線iPhone Web App教程的內(nèi)容介紹完了，希望本文對(duì)你有所幫助！
原文地址：http://www.iphone-geek.cn/%E7%BC%96%E7%A8%8B/%E5%88%9B%E5%BB%BA%E7%A6%BB%E7%BA%BFiphone-web-app
