10 ข้อที่ต้องรู้ ก่อนใช้ Crosswalk เพิ่มสปีดให้แอพ PhoneGap, Cordova, Ionic

เรียนกับโค้ชพล: คอร์สออนไลน์ สอนสร้าง Cross Platform Mobile App ได้ทั้ง iOS และ Android ใน 24 ชม. จากเริ่มต้นจนถึงโปร คลิกเลย

การทำแอพ Android แบบ Hybrid จะมีหลายคนที่ทนทุกข์ (ต้องเรียกทนทุกข์เลยนะ) จาก WebView ใน Android เวอร์ชั่นที่เก่ากว่า 4.4 เช่น 4.0 – 4.3 แน่นอน

เพราะในช่วงเวลานั้น ทาง Google ยังไม่ได้ย้ายมาใช้ Chrome เป็น WebView หลักของระบบ Android ทำให้ประสิทธิภาพเวลาแสดงหน้าแอพพลิเคชั่นของแอพแบบ Hybrid เศร้าเหลือทน

แต่พอมาเป็น Android เวอร์ชั่น 4.4 เป็นต้นไป นี่เหมือนบินจากห้วงนรกไปอยู่บนสรวงสวรรค์เลยล่ะ

แต่ทีนี้เราคุมไม่ได้นี่ว่า “ต้องให้ลูกค้าใช้ Android 4.4 ขึ้นไปนะ” เพราะเรื่องของความหลากหลายในโลกของ Android เป็นสิ่งที่นักพัฒนาควรรู้ไว้ว่าต้องเจออยู่แล้ว

ดังนั้น Crosswalk จึงเหมือนเทวดาบินลงมาดึงเราขึ้นไปสู่สรวงสวรรค์ โดยที่เราไม่ต้องบังดับให้ลูกค้าซื้อเครื่องใหม่ 4.4+ นั่นเองครับ

เอาล่ะที่นี้มาดูกันว่า 10 ข้อที่เราควรรู้ก่อนไปใช้ Crosswalk มีอะไรกันบ้าง

1.Crosswalk คืออะไร?

Crosswalk เป็นโปรเจคโอเพ่นซอร์ส ที่มีเป้าหมายในการนำเอนจิ้น WebView ของ Chrome for Android ไปใช้ในแอพพลิเคชั่นตัวอื่นได้ เพื่อเพิ่มประสิทธิภาพการแสดงผล และลดข้อผิดพลาดจากความแตกต่าง (fragmentation) ใน WebView ของ Android รุ่นเก่าครับ

โค้ชพลเคยแนะนำพื้นฐานเรื่อง Crosswalk ไว้ก่อนหน้านี้ ลองไปทำความเข้าใจกันก่อนได้

2. จำเป็นต้องใช้ Crosswalk ไหม?

ถ้าเราคุมได้ว่า สเปกเครื่อง Android ของแอพเรา ต้องใช้เวอร์ชั่น 4.4 ขึ้นไป ก็ไม่น่าเป็นปัญหาหรอกครับ

ตื่นๆๆ โลกจริงมันหาเคสนั้นยากนะ (จนกว่าเราจะไป Android 8 อะไรประมาณนั้น คนอาจจะเลิกใช้ Android เวอร์ชั่นต่ำกว่า 4.4 แล้วก็ได้)

ดังนั้นถ้าเรามีปัญหาเรื่องความผิดปกติในการทำงานของ HTML, CSS, หรือ JavaScript ใน Android เวอร์ชั่น 4.0 – 4.3 หรือต้องการประสิทธิภาพแรงๆ เพิ่มขึ้น

ต้องการลดปัญหาเรื่อง fluctuations และ fragmentation ที่แตกต่างกันใน Android แต่ละเวอร์ชั่น

ก็ควรใช้ Crosswalk ครับ

3. Crosswalk ทำให้แอพ Android ที่สร้างจาก PhoneGap, Cordova, Ionic ดีขึ้นอย่างไร?

• ไม่ต้องเจออาการแปลกๆ ในแต่ละเวอร์ชั่น เพราะใช้ Chrome ตัวเดียวจากเวอร์ชั่น 4.4 กันหมดตั้งแต่ 4.0 – 4.3
• ประสิทธิภาพเพิ่มขึ้นประมาณ 10 เท่า (อ่านต่อได้ด้านล่างครับ)
• ง่ายต่อการ Debug ด้วย Chrome Dev Tools

4. Crosswalk มีผลกับความเร็ว และขนาดไฟล์อย่างไร?

โดยปกติแล้ว ทางทีมพัฒนา Crosswalk การันตีประสิทธิภาพที่เพิ่มขึ้น 10 เท่า ใน Android เวอร์ชั่นเก่า ระหว่าง 4.0 – 4.3 โดยเฉพาะการทำงานของ HTML, CSS, และ JavaScript

แต่ก็จะมีการเพิ่มพื้นที่ของแอพพลิเคชั่น มาประมาณ 10 – 15 MB เพราะได้มีการนำ Chrome ใส่ลงไปในแอพนั่นเอง

5. ต้องการลอง Crosswalk ทำไง?

แน่นอนว่าต้องลง ionic framework และสร้างโปรเจคก่อน

nam install -g ionic
ionic start NFApp
cd NFApp
ionic browser add crosswalk
ionic run android

หรือดูผ่านวิดีโอได้ในคอร์สออนไลน์ที่นี่

6. ถ้าเจอ Error ในการใช้งาน จะทำอย่างไร?

ใช้คำสั่ง ionic info  แล้วก๊อปปี้ข้อมูลที่ปรากฎบนหน้าจอ

จากนั้นให้โพสอาการที่เกิดขึ้น กับข้อมูลที่ก๊อปปี้มา ไปที่ Ionic CLI บน Github ครับ

7. งั้นเวลาทดสอบต้องสังเกตอะไรบ้าง?

ถึงแม้ว่า Crosswalk จะมีการพัฒนาอย่างต่อเนื่อง แต่เพราะมันเป็นระบบอีกระบบหนึ่ง จึงมีโอกาสที่จะเจอ bug หรือข้อผิดพลาดตอนใช้งานได้

เราตอนเอาไปใช้ควรจะสังเกตการทำงานดังนี้ครับ

• ความเร็วที่เพิ่มขึ้นในอุปกรณ์ Android รุ่นเก่า รวมถึงการ debug ด้วย Chrome Dev Tools
• ทดสอบการทำงานกับ Cordova Plugin เช่น กล้องถ่ายรูป, จีพีเอส, ตัวสแกนบาร์โค้ด เป็นต้น
• อาการประหลาดที่อาจเกิดขึ้นระหว่างการ build และ run ตัวแอพ

8. จะ Debug Crosswalk หรือ Chrome WebView ได้อย่างไร?

สามารถใช้ Chrome Dev Tools และเปิดส่วนของ Chrome Inspect Device ขึ้นมาได้

9. สถาปัตยกรรมของอุปกรณ์ Android ส่งผลต่อ Crosswalk อย่างไรบ้าง?

ถ้าเรายังไม่ลงลึกเรื่องระบบ Android OS พอ อาจจะยังไม่รู้ว่าตอนนี้ Android มันมีแยกสถาปัตยกรรมของฮาร์ดแวร์เป็น 2 แบบ นั่นคือ ARM และ x86 (ชิป Intel นั่นแหละ)

แล้วมันเกี่ยวอะไรกับการทำแอพพลิเคชั่น หรือใช้ Crosswalk?

เกี่ยวครับ เกี่ยวมากด้วย

ลองนึกถึงการปลูกบ้านแบบเดียวกันบนที่ดินที่แตกต่างกัน อย่างดินทราย และดินภูเขา ถึงแม้ว่าด้านบนบ้านจะดูเหมือนกัน แต่ตอนวางรากฐานให้บ้าน ต้องใช้เครื่องมือและวิธีที่แตกต่างกัน

แบบเดียวกับ ARM และ x86 ครับ จะเคยได้ยินข่าวว่าแอพบางตัวที่ทำมาให้ใช้บน ARM ไปมีปัญหาการใช้งานบน x86

นักพัฒนาเลยต้อง Build ตัวแอพพลิเคชั่นแยก 2 เวอร์ชั่น แบบเดียวกับที่สถาปนิกต้องใช้รากฐานบ้าน สำหรับที่ดินแต่ละแบบ

ดังนั้นถ้าคุณ build แอพที่ใช้ Crosswalk แบบเพียวๆ ตัว Crosswalk จะใส่การทำงานที่รองรับทั้ง ARM และ x86 มาให้แบบคู่เลย ทำให้ขนาดแอพใหญ่ขึ้นอีก 50 – 60 MB

ทางแก้คือ: ตอน build ก็ให้ build ทีละเวอร์ชั่น สำหรับ ARM และ x86 ตามลำดับ จะได้ช่วยให้ขนาดไฟล์แอพลดลงครับ

10. ทำไมถึงเปลี่ยนจาก Ant ไปใช้ Gradle?

ทีมพัฒนาหลักของระบบ Android ตัดสินใจเปลี่ยนระบบ Build จาก Apache Ant ที่เราเคยรู้จักกันดีไปใช้ Gradle ได้สักพักแล้ว เราจึงไม่เห็นข้อความสถานะการทำงานจาก Ant อีก

ส่งท้าย

นั่นคือสุดยอดคำถามจากหลายๆ คนที่ใช้ PhoneGap, Cordova, และ Ionic กำลังต้องการเอาไปใช้ในโปรเจคแอพพลิเคชั่นของตัวเอง โดยเฉพาะ Android รุ่นเก่าที่มีปัญหาเรื่อง Performance กันนะครับ

โค้ชพลลองแล้วไหลลื่นทีเดียว ลองเอา Crosswalk ไปใช้งานกันดู

อ้างอิง – CrossWalk Project, Ionic Blog