iOS平台快速发布HT for Web拓扑图应用
? ? ? iOS平臺一直是封閉的生態圈，iOS開發者要繳納年費加入開發者計劃才可進行iOS平臺的APP開發測試，所開發的APP需要上傳到App Store經過蘋果審核以后才可對外發布。如果要開發企業內部應用，則要繳納更高的費用購買企業賬戶才可以。
? ? ? 對于現在火如荼的HTML5應用，我們可以借助PhoneGap對其打包，然后像原生APP一樣發布它們；或者要求用戶直接通過瀏覽器訪問。前一種方式的優點是用戶體驗好，用戶可以像使用原生APP那樣使用它們，缺點是發布很繁瑣，而且要等待蘋果審核。后一種方式則完全不用考慮發布的問題，但是用戶體驗比較差，畢竟讓用戶打開瀏覽器，自行輸入網址對用戶操作水平要求較高。今天我們介紹另外一種方式，這種方式綜合了前面兩種方式的優點，特別適合部署企業內部應用。
? ? ? 手邊有iPhone或iPad的同學可以先按照下面的方式實驗：
1、用iPhone或iPad上的Safari瀏覽器打開鏈接：http://pattern.dk/sun/，點擊底部的發送按鈕
?
2、 點擊發送到主屏幕
?3、確認添加
?4、查看主屏上新增加的APP圖標
?
? ? ? 大家可以看到我們的主屏幕上已經多了一個”APP”，如果細心優化，用戶完全無法區分這是一個原生應用還是HTML5應用，極大提升了用戶體驗。
? ? ? 是不是很神奇？接下來我們以HT for Web的拓撲應用為例，試著實現這樣一個”高仿”的APP，先看一下我們的頁面在iPhone瀏覽器中的效果：
? ? ? 為了使這個頁面看起來像原生APP，我們需要在HTML頁面中加入一些特殊標記：
<!--頁面縮放方式--> <meta name="viewport" content="user-scalable=0, initial-scale=1.0”> <!--是否全屏顯示-->? <meta name="apple-mobile-web-app-capable" content=“yes"> <!--狀態欄透明-->? <meta name="apple-mobile-web-app-status-bar-style" content=“black-translucent"> <!--APP在主屏上顯示的名字--><meta name="apple-mobile-web-app-title" content="ht" />? <!--App在主屏上顯示的圖標--><link rel="apple-touch-icon" href="res/icon.png"><!--啟動畫面-->? <!-- iPhone5--><link rel="apple-touch-startup-image" href="res/girl_iphone5.png">? <!-- iPhone6-->? <link rel="apple-touch-startup-image" href="res/girl_iphone6.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />? ? ? viewport的設置可以參考蘋果的官方文檔，寫的非常棒。
? ? ? 其它meta標簽的用法也有很好的參考文檔，推薦大家仔細閱讀：
? ? ? 1、配置Web應用程序
? ? ? 2、支持的Meta標簽?
? ? ? 還有一個細節需要注意，如果頁面中的資源(JS腳本，圖片等)非常多，每次打開重新加載也會影響到用戶體驗，這時我們可以將一些資源緩存起來：
<!--指定緩存控制文件--> <html manifest="cache.manifest">? ? ? 這個文件的內容如下：
CACHE MANIFESTCACHE: ht.js res/girl_iphone5.png res/girl_iphone6.png res/1.png res/2.png res/icon.png 在這個文件中，我們緩存ht.js和一堆圖片文件，這些資源只會加載一次，第二次打開頁面時不會重復從網絡加載，所以顯示非常快，這樣我們的頁面看起來就非常像一個原生應用了！? ? ? 緩存的用法也有兩篇很好的文檔：
? ? ? 1、HTML5離線緩存
? ? ? 2、在客戶端存儲數據
? 最后上一段操作視頻，看一下最終效果，優酷鏈接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的iOS平台快速发布HT for Web拓扑图应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 照相功能
- 下一篇： ZooKeeper学习笔记—配置管理