為什么說HTML5適合進(jìn)行移動WebApp開發(fā)?
離線緩存
HTML5 Web Storage API可以看做是加強(qiáng)版的cookie,不受數(shù)據(jù)大小限制,有更好的彈性以及架構(gòu),可以將數(shù)據(jù)寫入到本機(jī)的ROM中,還可以在關(guān)閉瀏覽器后再次打開時恢復(fù)數(shù)據(jù),以減少網(wǎng)絡(luò)流量。
Web Storage是HTML5引入的一個非常重要的功能,可以在客戶端本地存儲數(shù)據(jù),類似HTML4的cookie,但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多,cookie大小被限制在4KB,Web Storage官方建議為每個網(wǎng)站5MB。
Web Storage又分為兩種:sessionStorage和localStorage
從字面意思就可以很清楚的看出來,sessionStorage將數(shù)據(jù)保存在session中,瀏覽器關(guān)閉也就沒了;而localStorage則一直將數(shù)據(jù)保存在客戶端本地;
不管是sessionStorage,還是localStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):
1、保存數(shù)據(jù):localStorage.setItem(key,value);
2、讀取數(shù)據(jù):localStorage.getItem(key);
3、刪除單個數(shù)據(jù):localStorage.removeItem(key);
4、刪除所有數(shù)據(jù):localStorage.clear();
5、得到某個索引的key:localStorage.key(index);
移動APP設(shè)計師要知道,什么時候讓用戶下載離線緩存(注意在線和離線app的區(qū)別)。
音頻視頻自由嵌入,多媒體形式更為靈活
原生開發(fā)方式對于文字和音視頻混排的多媒體內(nèi)容處理相對麻煩,需要拆分開文字、圖片、音頻、視頻,解析對應(yīng)的URL并分別用不同的方式處理。
HTML5在這個方面完全不受限制,可以完全放在一起進(jìn)行處理。
移動APP設(shè)計師要知道,如果新聞類、微博類、社交類應(yīng)用的信息呈現(xiàn)中實(shí)現(xiàn)文字與多媒體混排,而不用專門嵌入webview,將是一件多美好的事情,至少現(xiàn)在原生方式實(shí)現(xiàn)起來還有困難。
地理定位
地理位置定位,讓定位和導(dǎo)航不再專屬導(dǎo)航軟件,地圖也不用下載非常大的地圖包,可以通過緩存來解決,到哪兒下哪兒,更靈活。
移動APP設(shè)計師要知道,現(xiàn)在嵌入LBS功能的應(yīng)用越來越多,這也是移動設(shè)備與臺式PC相比最大的優(yōu)勢之一,HTML5能把這個優(yōu)勢再度擴(kuò)大化,好好想想怎么在你設(shè)計的應(yīng)用里用上吧!
Canvas繪圖,提升移動平臺的繪圖能力
使用Canvas API可以簡單繪制熱點(diǎn)圖收集用戶體驗(yàn)資料,支持圖片的移動、旋轉(zhuǎn)、縮放等常規(guī)編輯。而且也支持2D和3D。
豐富的交互方式
提升互動能力:拖拽、撤銷歷史操作、文本選擇等。比如
Transition – 組件的移動效果
Transform – 組件的變形效果
Animation – 將移動和變形加入動畫支持
加上js的動畫效果等等,HTML5提供的交互方式是非常豐富的。各位移動APP設(shè)計師盡可能的發(fā)揮想象吧!