[ Cordova ] 為何應該以Notification取代alert

alert 是寫JavaScript的開發人員很常用的功能之一,因此在撰寫Cordova App 時許多開發人員也會常拿alert來製作彈出訊息的功能,然而就個人的經驗會建議大家應該以Notification來取代alert。

為何應該以Notification Pulgin來取代alert?首先我們來看看採用alert時所表現出來效果,下圖為android模擬器所展現的樣式,甚至於如果你是部署為windows 平台的APP,會直接發生錯誤(這是因為平台的限制)。

從android模擬器所展現的樣式來看,會發現在訊息框的標頭出現了Alert的字樣,而且無法修改,再來是按鈕的部份同樣也只能顯示OK,除此之外整個訊息框的樣式與Natvie App的樣式是有差異的。接下來我們來看一下採用Notification Pulgin所展現的樣式,下圖分別是android模擬器與Windows平台所呈現的樣式。

很明顯的發現幾項差異,首先不同平台執行起來時會呈現該平台原生的樣式,再來就是標題及按鈕的部份都可以視需求進行調整。

接著讓我們來看一下如何使用Notification Pulgin,首先在專案內把Notification Pulgin給加入進來。

程式碼的部份也相當簡單,如下範例,先取得button後,接著註冊監聽click事件,當使用者按下button後,就秀出訊息框,從程式碼可以看到除了訊息內容之外,可以自訂標題、按鈕文字,以及按鈕callback事件(在這個範例中由於不會再有訊息確認按鈕的事件,所以給予 null)。

var btn2 = document.getElementById("btn2");
btn2.addEventListener('click', function () {
	navigator.notification.alert(
	   '恭喜你過關了',             // message
       null,        	//callback
	   '第5關',                   // title
	   '確認'                     // buttonName
   );
})

Notification Pulgin除了alert之外,其它訊息框例如confirm也都是可以利用Notification Pulgin來處理,讓整個訊息style會更趨近於Native App。

 

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18