iOS平臺一直是封閉的生態(tài)圈，iOS開發(fā)者要繳納年費(fèi)加入開發(fā)者計劃才可進(jìn)行iOS平臺的APP開發(fā)測試，所開發(fā)的APP需要上傳到App Store經(jīng)過蘋果審核以后才可對外發(fā)布。如果要開發(fā)企業(yè)內(nèi)部應(yīng)用，則要繳納更高的費(fèi)用購買企業(yè)賬戶才可以。

      對于現(xiàn)在火如荼的HTML5應(yīng)用，我們可以借助PhoneGap對其打包，然后像原生APP一樣發(fā)布它們；或者要求用戶直接通過瀏覽器訪問。前一種方式的優(yōu)點是用戶體驗好，用戶可以像使用原生APP那樣使用它們，缺點是發(fā)布很繁瑣，而且要等待蘋果審核。后一種方式則完全不用考慮發(fā)布的問題，但是用戶體驗比較差，畢竟讓用戶打開瀏覽器，自行輸入網(wǎng)址對用戶操作水平要求較高。今天我們通過采用Hightopo的HT for Web組件，介紹另外一種方式，這種方式綜合了前面兩種方式的優(yōu)點，特別適合部署企業(yè)內(nèi)部應(yīng)用。

     手邊有iPhone或iPad的同學(xué)可以先按照下面的方式實驗：

1、用iPhone或iPad上的Safari瀏覽器打開鏈接：http:///sun/，點擊底部的發(fā)送按鈕

2、 點擊發(fā)送到主屏幕

 3、確認(rèn)添加

 4、查看主屏上新增加的APP圖標(biāo)

      大家可以看到我們的主屏幕上已經(jīng)多了一個”APP”，如果細(xì)心優(yōu)化，用戶完全無法區(qū)分這是一個原生應(yīng)用還是HTML5應(yīng)用，極大提升了用戶體驗。

      是不是很神奇？接下來我們以HT for Web的拓?fù)鋺?yīng)用為例，試著實現(xiàn)這樣一個”高仿”的APP，先看一下我們的頁面在iPhone瀏覽器中的效果：

        為了使這個頁面看起來像原生APP，我們需要在HTML頁面中加入一些特殊標(biāo)記：

      viewport的設(shè)置可以參考蘋果的官方文檔，寫的非常棒。

      其它meta標(biāo)簽的用法也有很好的參考文檔，推薦大家仔細(xì)閱讀：

      1、配置Web應(yīng)用程序

      2、支持的Meta標(biāo)簽

      還有一個細(xì)節(jié)需要注意，如果頁面中的資源(JS腳本，圖片等)非常多，每次打開重新加載也會影響到用戶體驗，這時我們可以將一些資源緩存起來：

      這個文件的內(nèi)容如下：

      在這個文件中，我們緩存ht.js和一堆圖片文件，這些資源只會加載一次，第二次打開頁面時不會重復(fù)從網(wǎng)絡(luò)加載，所以顯示非?？?，這樣我們的頁面看起來就非常像一個原生應(yīng)用了！

        緩存的用法也有兩篇很好的文檔：

        1、HTML5離線緩存

        2、在客戶端存儲數(shù)據(jù)

    最后上一段操作視頻，看一下最終效果，優(yōu)酷鏈接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2