iOS平臺快速發佈HT for Web拓撲圖APP應用

時間 2019-11-21

標籤 ios 平臺快速發佈 web 拓撲 app 應用欄目 iOS 简体版

原文原文鏈接

iOS平臺一直是封閉的生態圈，iOS開發者要繳納年費加入開發者計劃纔可進行iOS平臺的APP開發測試，所開發的APP須要上傳到App Store通過蘋果審覈之後纔可對外發布。若是要開發企業內部應用，則要繳納更高的費用購買企業帳戶才能夠。html

對於如今火如荼的HTML5應用，咱們能夠藉助PhoneGap對其打包，而後像原生APP同樣發佈它們；或者要求用戶直接經過瀏覽器訪問。前一種方式的優勢是用戶體驗好，用戶能夠像使用原生APP那樣使用它們，缺點是發佈很繁瑣，並且要等待蘋果審覈。後一種方式則徹底不用考慮發佈的問題，可是用戶體驗比較差，畢竟讓用戶打開瀏覽器，自行輸入網址對用戶操做水平要求較高。今天咱們經過採用Hightopo的HT for Web組件，介紹另一種方式，這種方式綜合了前面兩種方式的優勢，特別適合部署企業內部應用。
手邊有iPhone或iPad的同窗能夠先按照下面的方式實驗：ios

一、用iPhone或iPad上的Safari瀏覽器打開連接：http://pattern.dk/sun/，點擊底部的發送按鈕web

二、點擊發送到主屏幕
瀏覽器

三、確認添加
緩存

四、查看主屏上新增長的APP圖標
網絡

你們能夠看到咱們的主屏幕上已經多了一個」APP」，若是細心優化，用戶徹底沒法區分這是一個原生應用仍是HTML5應用，極大提高了用戶體驗。app

是否是很神奇？接下來咱們以HT for Web的拓撲應用爲例，試着實現這樣一個」高仿」的APP，先看一下咱們的頁面在iPhone瀏覽器中的效果：iphone

爲了使這個頁面看起來像原生APP，咱們須要在HTML頁面中加入一些特殊標記：ide

<!--頁面縮放方式-->
<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標籤的用法也有很好的參考文檔，推薦你們仔細閱讀：
一、配置Web應用程序
二、支持的Meta標籤

還有一個細節須要注意，若是頁面中的資源(JS腳本，圖片等)很是多，每次打開從新加載也會影響到用戶體驗，這時咱們能夠將一些資源緩存起來：

<!--指定緩存控制文件-->
<html manifest="cache.manifest">

這個文件的內容以下：

CACHE MANIFEST

CACHE:
ht.js
res/girl_iphone5.png
res/girl_iphone6.png
res/1.png
res/2.png
res/icon.png

在這個文件中，咱們緩存ht.js和一堆圖片文件，這些資源只會加載一次，第二次打開頁面時不會重複從網絡加載，因此顯示很是快，這樣咱們的頁面看起來就很是像一個原生應用了！
緩存的用法也有兩篇很好的文檔：
一、HTML5離線緩存
二、在客戶端存儲數據

最後上一段操做視頻，看一下最終效果，優酷連接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。