Apache Cordova — คืออะไร สถาปัตยกรรม และหลักการทำงานของเฟรมเวิร์กแบบไฮบริด

Apache Cordova คืออะไร?

Apache Cordova เป็นแพลตฟอร์มโอเพนซอร์สที่ห่อหุ้มแอปพลิเคชันเว็บไว้ในคอนเทนเนอร์เนทีฟและให้ JavaScript API สำหรับเข้าถึงความสามารถด้านฮาร์ดแวร์ของอุปกรณ์มือถือ โปรเจกต์เดิมมีชื่อว่า PhoneGap และถูกสร้างขึ้นโดย Nitobi Software ในปี 2009

ในปี 2011 Adobe เข้าซื้อ Nitobi และบริจาคซอร์สโค้ดของ PhoneGap ให้กับ Apache Software Foundation ซึ่งโปรเจกต์ได้เปลี่ยนชื่อเป็น Apache Cordova Adobe ยังคงเผยแพร่ PhoneGap ในฐานะการแจกจ่ายของ Cordova พร้อมบริการเพิ่มเติม ในขณะที่เฟรมเวิร์กเองกลายเป็นโปรเจกต์อิสระภายใต้การบริหารของ Apache

ตามสถิติโปรเจกต์ Apache Cordova (2024) เฟรมเวิร์กรองรับ 10 แพลตฟอร์มมือถือ รวมถึง iOS, Android, Windows, macOS และ Electron แพลตฟอร์มหลักยังคงเป็น Android และ iOS ซึ่งคิดเป็นมากกว่า 95% ของโปรเจกต์ Cordova ทั้งหมด

สถาปัตยกรรม Cordova: WebView และสะพานทำงานอย่างไร

สถาปัตยกรรมของ Apache Cordova ประกอบด้วยสี่ชั้น: แอปพลิเคชันเว็บ, WebView, สะพานปลั๊กอิน และปลั๊กอินเนทีฟ แต่ละชั้นถูกแยกออกจากกัน ทำให้สามารถเปลี่ยนส่วนประกอบได้โดยไม่ต้องเปลี่ยนระบบส่วนที่เหลือ

WebView และการแสดงอินเทอร์เฟซ

WebView ใน Cordova เป็นส่วนประกอบของระบบปฏิบัติการที่แสดงหน้าเว็บเป็นส่วนหนึ่งของแอปพลิเคชันเนทีฟ บน iOS ใช้ WKWebView (ตั้งแต่ iOS 9+) บน Android — Android System WebView (ตั้งแต่ Android 5+) เฟรมเวิร์กโหลดจุดเริ่มต้น index.html พร้อมทรัพยากรทั้งหมดของแอปพลิเคชันลงใน WebView

ตามข้อมูลของ WebKit Team (2024) WKWebView ใช้หน่วยความจำน้อยกว่า 50% เมื่อเทียบกับ UIWebView ที่ใช้ใน Cordova เวอร์ชันแรกเริ่ม ซึ่งสำคัญสำหรับอุปกรณ์มือถือที่มี RAM จำกัด

สะพานระหว่าง JavaScript และโค้ดเนทีฟ

สะพานเป็นกลไกสำคัญของ Cordova ที่ช่วยให้โค้ด JavaScript สามารถเรียกฟังก์ชันเนทีฟได้ เมื่อแอปพลิเคชันเรียกปลั๊กอิน Cordova จะแปลงคำขอเป็น JSON และส่งผ่านโปรโตคอล URL ของ WebView (เปลี่ยน location.href ด้วยสคีมาที่กำหนดเอง) ฝั่งเนทีฟจะสกัดกั้นคำขอนี้ ดำเนินการที่จำเป็น และส่งคืนผลลัพธ์

กลไกนี้ทำงานแบบอะซิงโครนัส: การเรียกปลั๊กอินจะคืนค่า Promise ที่ได้รับการแก้ไขหลังจากดำเนินการเนทีฟเสร็จสมบูรณ์ จากการทดสอบของ IBM Research (2023) ความหน่วงของสะพานคือ 2–5 มิลลิวินาทีสำหรับการดำเนินการอย่างง่าย และสูงถึง 50 มิลลิวินาทีสำหรับการดำเนินการ I/O

ปลั๊กอินเนทีฟ

ปลั๊กอิน Cordova แต่ละตัวคือแพ็คเกจที่มีอินเทอร์เฟซ JavaScript และการใช้งานเนทีฟสำหรับแต่ละแพลตฟอร์ม บน iOS ปลั๊กอินเขียนด้วย Objective-C หรือ Swift บน Android — ด้วย Java หรือ Kotlin ส่วน JavaScript ของปลั๊กอินมอบ API ที่อิงตาม Promise ให้กับนักพัฒนา ในขณะที่ส่วนเนทีฟดำเนินการเรียกระบบ

ชุดมาตรฐานประกอบด้วยปลั๊กอินมากกว่า 30 ตัว: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration และอื่น ๆ

Cordova CLI และระบบจัดการปลั๊กอิน

บรรทัดคำสั่ง Cordova CLI เป็นเครื่องมือหลักสำหรับการสร้าง สร้าง และจัดการโปรเจกต์ โดยมีคำสั่งสำหรับการเริ่มต้นโปรเจกต์ การเพิ่มแพลตฟอร์ม และการติดตั้งปลั๊กอินผ่านอินเทอร์เฟซแบบรวม

ขั้นตอนการทำงานประกอบด้วยสามคำสั่งพื้นฐาน: cordova create สำหรับสร้างโปรเจกต์, cordova platform add ios/android สำหรับเพิ่มแพลตฟอร์มเป้าหมาย และ cordova plugin add สำหรับติดตั้งปลั๊กอินจากรีจิสทรี npm

• cordova create — สร้างโครงสร้างโปรเจกต์ด้วย www/, hooks/ และ config.xml
• cordova platform add — ดาวน์โหลดและกำหนดค่าโปรเจกต์เนทีฟสำหรับ iOS หรือ Android
• cordova plugin add — ติดตั้งปลั๊กอินและลงทะเบียนในกำหนดค่าโปรเจกต์
• cordova build — คอมไพล์แอปพลิเคชันเป็น APK หรือ IPA ผ่าน Xcode และ Android Studio

การตั้งค่าโปรเจกต์ทั้งหมดถูกเก็บไว้ในไฟล์ config.xml ในไดเรกทอรีราก โดยระบุชื่อแอปพลิเคชัน ตัวระบุแพ็คเกจ การวางแนวหน้าจอที่รองรับ ไอคอน และรายการปลั๊กอินที่ติดตั้ง ไฟล์ใช้รูปแบบ XML W3C Widget Package ซึ่งช่วยให้สามารถรวมโปรเจกต์เข้ากับเครื่องมือสร้างใด ๆ รวมถึงระบบ CI/CD อย่าง Jenkins และ GitHub Actions

ตัวอย่างโค้ด: ปลั๊กอินและการกำหนดค่า

มาดูตัวอย่างไฟล์กำหนดค่า config.xml สำหรับโปรเจกต์ Cordova ที่รองรับกล้องและการระบุตำแหน่งทางภูมิศาสตร์

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.example.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:cdv='http://cordova.apache.org/ns/1.0'>
    <name>MyApp</name>
    <description>
        ตัวอย่างแอปพลิเคชัน Cordova
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

ไฟล์ config.xml นี้ประกาศปลั๊กอินกล้องและการระบุตำแหน่ง และอนุญาตการเชื่อมต่อ HTTP/HTTPS สำหรับโหลดข้อมูลจากเซิร์ฟเวอร์ Cordova จะเชื่อมต่อโดยอัตโนมัติระหว่างการสร้างและทำให้เข้าถึงได้ผ่านออบเจกต์ส่วนกลาง navigator.camera และ navigator.geolocation

ตัวอย่างการเรียกปลั๊กอินกล้องจากโค้ด JavaScript ของแอปพลิเคชัน:

function capturePhoto() {
  navigator.camera.getPicture(
    function(imageData) {
      const img = document.getElementById('myImage');
      img.src = 'data:image/jpeg;base64,' + imageData;
    },
    function(error) {
      console.error('Camera error:' + error);
    },
    { quality: 50, destinationType: 0 }
  );
}

ฟังก์ชัน capturePhoto เรียกกล้องเนทีฟผ่านปลั๊กอิน cordova-plugin-camera ตัว callback ความสำเร็จจะรับภาพในรูปแบบ base64 จากนั้นจึงแสดงบนหน้าเว็บ การจัดการข้อผิดพลาดเป็นสิ่งจำเป็น — ผู้ใช้อาจปฏิเสธคำขอเข้าถึงกล้อง

ข้อจำกัดของ Cordova และการย้ายไปยัง Capacitor

แม้จะได้รับความนิยม แต่ Apache Cordova มีข้อจำกัดหลายประการที่นำไปสู่การเกิดขึ้นของทางเลือก Capacitor จากทีม Ionic ปัญหาหลักเกี่ยวข้องกับประสิทธิภาพของสะพาน การสนับสนุนมาตรฐานเว็บสมัยใหม่ และความซับซ้อนในการดีบัก

สะพานผ่านโปรโตคอล URL ของ WebView ช้ากว่าสะพาน JavaScript โดยตรงใน Capacitor เมื่อมีการเรียก API เนทีฟบ่อยครั้ง เช่น เมื่อทำงานกับกล้องแบบเรียลไทม์ ความแตกต่างนี้จะเห็นได้ชัด Cordova ยังไม่รองรับความสามารถของ WebView สมัยใหม่อย่างเต็มที่หากไม่มีปลั๊กอินเพิ่มเติม

ข้อจำกัดอีกประการคือ การขาดการสนับสนุน Live Reload ในตัว บนอุปกรณ์โดยไม่มีเครื่องมือของบุคคลที่สาม การพัฒนาด้วย Cordova ต้องสร้างโปรเจกต์ใหม่ทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ซึ่งทำให้วงจรการพัฒนาช้าลงเมื่อเทียบกับ Capacitor หรือ React Native

ตามข้อมูลของทีม Ionic (2024) โปรเจกต์ไฮบริดใหม่มากกว่า 60% เลือก Capacitor แทน Cordova อย่างไรก็ตาม โปรเจกต์ Cordova ที่มีอยู่ยังคงทำงานได้ — เฟรมเวิร์กยังคงได้รับการอัปเดตความปลอดภัยจาก Apache Software Foundation

ระบบนิเวศ Cordova: PhoneGap, Monaca และอื่น ๆ

Apache Cordova กลายเป็นพื้นฐานสำหรับแพลตฟอร์มและบริการเชิงพาณิชย์หลายแห่งที่ขยายฟังก์ชันการทำงานและให้เครื่องมือพัฒนาเพิ่มเติม PhoneGap จาก Adobe เป็นโปรแกรมแจกจ่ายตัวแรกและเป็นที่รู้จักมากที่สุดของ Cordova

PhoneGap เพิ่มบริการคลาวด์ PhoneGap Build ซึ่งอนุญาตให้คอมไพล์แอปพลิเคชันโดยไม่ต้องติดตั้ง Xcode หรือ Android Studio นักพัฒนาอัปโหลดซอร์สโค้ดไปยังเซิร์ฟเวอร์ Adobe และรับไฟล์ APK และ IPA ที่พร้อมใช้งาน ซึ่งสะดวกเป็นพิเศษสำหรับทีมที่ไม่มีโครงสร้างพื้นฐาน Mac

แพลตฟอร์มอื่น ๆ ที่ใช้ Cordova ได้แก่ Monaca (IDE บนคลาวด์) และ Framework7 Monaca มอบสภาพแวดล้อมการพัฒนาที่สมบูรณ์ในเบราว์เซอร์พร้อมโปรแกรมจำลองอุปกรณ์และการรวมปลั๊กอิน Cordova Framework7 ใช้ Cordova เป็นแบ็กเอนด์สำหรับการเรนเดอร์ โดยมีชุดส่วนประกอบ UI ของตัวเอง

แม้ความนิยมของ Cordova จะลดลงหลังจากการเปิดตัว Flutter และ React Native แต่ระบบนิเวศยังคงมีความเกี่ยวข้องสำหรับการบำรุงรักษาโปรเจกต์เดิมและสถานการณ์เฉพาะที่ความง่ายในการเริ่มต้นสำหรับนักพัฒนาเว็บเป็นสิ่งสำคัญ แอปพลิเคชันองค์กรที่มีข้อกำหนดการเข้าถึงฮาร์ดแวร์ที่ไม่ปกติมักจะยังคงใช้ Cordova เนื่องจากมีไลบรารีปลั๊กอินที่ผ่านการพิสูจน์แล้วมากมาย

สำหรับการย้ายจาก Cordova ไปยัง Capacitor มีคำแนะนำทีละขั้นตอนจากทีม Ionic ซึ่งรวมถึงการแทนที่สคริปต์เริ่มต้นใน index.html และอัปเดตการกำหนดค่า ความท้าทายหลักคือการตรวจสอบความเข้ากันได้ของ ปลั๊กอิน Cordova ที่กำหนดเองกับสถาปัตยกรรมสะพาน Capacitor ใหม่