PhoneGap/Cordova

รู้จักกับ Crosswalk: ตัวแสดงผล HTML 5 สำหรับ Android ทุกชนชั้น

เรื่องที่เกี่ยวข้อง - Crosswalk, PhoneGap/Cordova, PhoneGap/Cordova for Android

เป็นไปได้ไหม ที่จะทำให้ Android รุ่นเก่า แสดงผล HTML 5 ได้เหมือน Android รุ่นล่าสุด?

เป็นคำถามของนักพัฒนา Mobile Web Application หลายๆ

คน และเป็นคำถามที่ถามกันโคตรบ่อยในวงการนักพัฒนา Mobile Application ด้วย HTML 5 อย่างเช่น PhoneGap, Cordova, และ Ionic Framework

เพราะระบบ Android นั้น แต่ละเวอร์ชั่นรองรับความสามารถต่างๆ ของ HTML 5 และความลื่นไหลในการทำงานไม่เท่ากัน เพราะมันขึ้นตรงกับความสามารถของ WebView (ตัวแสดงผล Web) ซึ่ง Android แต่ละรุ่นก็มี WebView ที่ไม่เหมือนกัน

ทำให้ยุคแรกๆ ของแอพ Hybrid บนระบบ Android นั้นเป็นปัญหาปวดใจสำหรับนักพัฒนาแอพด้วยภาษาเว็บเป็นอย่างมาก

แต่ Crosswalk ก็ได้เข้ามาเพื่อแก้ไขปัญหานั้นครับ

Crosswalk คืออะไร?

Crosswalk คือตัวแสดงผลเว็บที่สามารถฝังไปกับ Hybrid Mobile App ได้ และสามารถรองรับ HTML 5 และความสามารถอื่นๆ ที่ Android ต่ำกว่า 4.0 ลงมา

ให้ลองนึกถึงรถที่มีเครื่องยนต์ดีเซล เราเติมน้ำมันเบนซินลงไปแทนไม่ได้ใช่ไหม?​ เครื่องยนต์เบนซินก็เช่นกัน

ทีนี้นึกต่อ พอดีมีคนคิดเครื่องยนต์ที่สามารถเติมได้ทั้ง ดีเซล, เบนซิน, และแถมโซฮอลล์ด้วย สิ่งที่เราต้องทำ ไม่ใช่ซื้อรถใหม่ แต่เป็นการเปลี่ยนเครื่องยนต์เท่านั้นเอง

ในการพัฒนาแอพพลิเคชั่นให้กับอุปกรณ์พกพาในระบบต่างๆ มันจะมีส่วนที่เรียกกันว่า ‘WebView’ ซึ่งให้นักพัฒนาสามารถแสดงส่วนที่เป็นภาษาเว็บอย่าง HTML, CSS,  และ Javascript ภายในแอพของตัวเองได้ เหมือนมี Web browser ในแอพของตัวเองล่ะครับ

Crosswalk คือการพัฒนา WebView อีกรูปแบบหนึ่งขึ้นมา เพื่อลดข้อด้อยของ WebView เดิมที่มีอยู่ในระบบ Android รุ่นก่อนๆ นั่นเองครับ

ปัญหาของ WebView ในระบบ Android

หากเปรียบ WebView เป็นกลไกที่อยู่ในรถยนต์ ใน Android ก็จะมีกลไกที่ใช้ตั้งแต่พลังไอน้ำ จนถึงระบบไฮบริด ไปจนถึงใช้ไฟฟ้าได้เลยทีเดียว

ซึ่งนั่นทำให้ WebView เป็นโจทย์ที่ท้าทายสำหรับนักพัฒนาที่ต้องการใช้เทคโนโลยีเว็บในแอพของตัวเอง เพราะใน Android แต่ละรุ่นนั้น WebView มีความสามารถไม่เท่ากัน

เช่นรุ่นเก่าๆ อย่าง Android 2.0 ตัว WebView ไม่รองรับ HTML 5 เยอะเหมือน WebView ของ Android 4.4 หรือ 5.0

ใครเคยทำเว็บแอพ น่าจะคุ้นเคยกับปัญหา IE 6, 7, 8, 9, 10 เป็นอย่างดี ที่โค้ดของเว็บแอพเราเหมือนเดิม แต่ใช้งานได้ไม่เหมือนกันใน Internet Explorer แต่ละรุ่น (ร้องไห้หนักมาก)

บริษัท Intel เป็นผู้เล็งเห็นปัญหานี้ เลยริเริ่มโครงการ Crosswalk โดยนำเทคโนโลยีสมัยใหม่ที่อยู่ใน Chrome ของ Google มาสร้างเป็นระบบ Web Runtime ให้ใช้ในการทำ Mobile application แทนการใช้ WebView มาตรฐานใน Android นั่นเอง

โดย Crosswalk เป็นการรวมเทคโนโลยี Open source ต่างๆ อย่าง Chromium, Blink, และ PhoneGap/Cordova ก็ถูกนำมาใช้ในโครงการนี้ด้วย

ความสามารถของ Crosswalk

อย่างที่บอกไว้ว่า Crosswalk ตั้งใจนำความสามารถของเทคโนโลยีเว็บใน Web รุ่นใหม่ๆ อย่าง Chromium หรือ Blink มาใช้ใน Android รุ่นเก่าๆ ดังนั้น Crosswalk จะทำให้:

  • ใช้ HTML 5 และ CSS รุ่นใหม่ๆ ใน Android Application รุ่นที่เก่ากว่า 4.0 ได้ เช่น
    • CSS FlexBox
    • WebGL
    • WebRTC
    • SVG
  • ไม่ต้องกังวลเรื่อง Android fragmentation เพราะตัว Runtime ให้ Crosswalk ตัวเดียวกัน
  • Debug ตัวเว็บแอพด้วย Chrome DevTools ได้
  • เพิ่มประสิทธิภาพการทำงานของ HTML, CSS, และ Javascript 

วิธีนำ Crosswalk ไปใช้

  • ใช้กับการพัฒนาแอพพลิเคชั่นบนระบบ Android ในรูปแบบของ WebView (Native)
  • ใช้พัฒนาแอพพลิเคชั่น Android ที่มีประสิทธิภาพสูง ด้วยภาษาเว็บ (Hybrid Mobile Application ผ่านระบบ PhoneGap/Cordova)
  • ใช้กับการพัฒนาแอพพลิเคชั่นบนระบบ Tizen

สรุปข้อมูลเกี่ยวกับ Crosswalk จากการนำไปใช้จริง

ตามที่ผมได้เริ่มทดลองใช้ Crosswalk ในโครงการต่างๆ และให้คำปรึกษาในการใช้งาน พบว่า Crosswalk ทดแทน WebView ในระบบ Android รุ่นเก่าๆ ได้จริง เพิ่มประสิทธิภาพในการทำงาน และยังรองรับเทคโนโลยีเว็บรุ่นใหม่ๆ ได้จริงครับ

ดังนั้นโค้ชพลของสรุปเรื่อง Crosswalk ได้ดังนี้

  • Crosswalk สามารถทดแทน WebView ที่แตกต่างกันใน Android รุ่นเก่าๆ ได้ ลดปัญหาเรื่องความแตกต่างระหว่างอุปกรณ์
  • เพิ่มประสิทธิภาพ รองรับการทำงานกับเทคโนโลยีเว็บรุ่นใหม่อย่าง HTML 5 และ CSS 3
  • เป็นโครงการ Open source มีการพัฒนาต่อเนื่อง

แล้วคอยติดตามเรื่องราวของ Crosswalk และเทคโนโลยีเว็บได้ที่ Facebook Page และ YouTube Channel ของโค้ชพลนะครับ

วันนี้ขอตัวไปลอง Crosswalk เพิ่มเติมต่อละ

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

ศึกษาเพิ่มเติม:

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save