[PhoneGap] วิธีทำให้ปุ่ม back ใน Android App เป็นการออกจากโปรแกรม

พอดีมีคน comment ถามไว้ใน video “วิธีสร้าง Android App project สำหรับ PhoneGap (Windows)” ที่ผมโพสขึ้นบน YouTube ว่าพบปัญหาประมาณว่า…

ผมเขียนฟังก์ชั่นกดปุ่ม back ในหน้าแรกแล้วให้ออกจากแอปครับ แล้วพอลองรันบน emulator มันแจ้ง error ว่า error initializing cordova class not found เกิดจากอะไรเหรอครับ ขอบคุณครับ

สาเหตุของปัญหา

ส่วนใหญ่ที่เราเจอ error แบบ error initializing cordova class not found  จะเกิดจากเราไปเรียกใช้ PhoneGap API (ในที่นี้รวมถึงการ bind event ของ PhoneGap)  ก่อนที่ cordova.js จะถูกโหลดขึ้นมาโดยสมบูรณ์นั่นเอง

อารมณ์ว่า ยังไม่พร้อม แล้วใช้เลย จะเกิดปัญหาแบบนี้ครับ

วิธีการทำที่ถูกต้อง

การกำหนดให้ปุ่ม Back ใน Android device กลายเป็นปุ่มที่ใช้ในการออกจาก Application นั้นสามารถทำได้ง่ายๆ โดยมีขั้นตอนดังนี้

1. ให้ add event listener สำหรับ event ที่ชื่อbackbutton  (ให้แน่ใจว่าเกิด event deviceready  แล้ว)
2. ให้เช็คว่าหน้าที่เปิดปัจจุบันเป็นหน้าแรก (ตัวอย่างจะใช้ JQuery Mobile และตั้งชื่อ id ของ page แรกว่าhome )
3. ใช้คำส่ัง navigator.app.exitApp()

โดยเราสามารถเขียนได้ดัง Code ต่อไปนี้

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
       if($.mobile.activePage.is('#home')){

           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory()
       }
    }, false);
}

ที่มา – StackOverflow