วิธีใช้คอมโพเนนต์ต่างๆ ในการแสดงผลเนื้อหาเว็บภายในแอป Android
แพลตฟอร์ม Android นี้เปิดมานานกว่า 10 ปีแล้ว และนับตั้งแต่ช่วงแรกๆ แพลตฟอร์มนี้ก็ได้รับการสนับสนุนที่ยอดเยี่ยมสำหรับเว็บ โดยมาพร้อมกับ WebView ซึ่งเป็นคอมโพเนนต์ที่ช่วยให้นักพัฒนาซอฟต์แวร์ใช้เว็บภายในแอป Android ของตนเองได้ ยิ่งไปกว่านั้น Android ยังอนุญาตให้นักพัฒนาซอฟต์แวร์นำเครื่องมือ เบราว์เซอร์ของตนเองไปไว้ในแพลตฟอร์ม เพื่อกระตุ้นการแข่งขันและนวัตกรรม
นักพัฒนาซอฟต์แวร์สามารถรวมเว็บไว้ในแอปพลิเคชัน Android ได้หลายวิธี เรามักใช้ WebView เพื่อแสดงโฆษณา โดยเป็นคอมโพเนนต์เลย์เอาต์ที่ใช้ร่วมกับองค์ประกอบ UI ของ Android หรือรวมเป็นแพ็กเกจเกม HTML 5 แท็บที่กำหนดเองช่วยให้นักพัฒนาแอปสร้างเบราว์เซอร์ในแอปและมอบประสบการณ์การนำทางที่ราบรื่นไปยังเนื้อหาเว็บของบุคคลที่สาม ขณะที่กิจกรรมบนเว็บที่เชื่อถือได้ช่วยให้นักพัฒนาซอฟต์แวร์ใช้ Progressive Web App (PWA) ในแอป Android ซึ่งดาวน์โหลดได้จาก Play Store
Android WebView
WebView ช่วยให้นักพัฒนาแอปเข้าถึง HTML, CSS และ JavaScript ที่ทันสมัยภายในแอป Android ของตนและอนุญาตให้จัดส่งเนื้อหาภายใน APK หรือโฮสต์บนอินเทอร์เน็ต นี่เป็นคอมโพเนนต์ที่ยืดหยุ่นและมีประสิทธิภาพมากที่สุดอย่างหนึ่งของ Android ซึ่งสามารถใช้กับกรณีการใช้งานส่วนใหญ่ที่เนื้อหาเว็บรวมอยู่ในแอป Android ตั้งแต่การให้บริการโฆษณาอย่าง AdMob ไปจนถึงการสร้างและจัดส่งเกม HTML5 ที่สมบูรณ์ที่ใช้ API ที่ทันสมัย เช่น WebGL
แต่เมื่อใช้ในการสร้างเบราว์เซอร์ในแอปหรือรวม PWA ในแอปพลิเคชัน Android แล้ว WebView จะขาดการรักษาความปลอดภัย ฟีเจอร์ และความสามารถของแพลตฟอร์มเว็บ
ความท้าทายของเบราว์เซอร์ในแอป
ตลอดเวลาที่ผ่านมา นักพัฒนาซอฟต์แวร์จำนวนมากได้สร้างประสบการณ์การใช้งานเบราว์เซอร์โดยผสานรวมเนื้อหาของบุคคลที่สามเข้ากับแอปพลิเคชัน Android โดยมีเป้าหมายเพื่อสร้างประสบการณ์ที่ราบรื่นยิ่งขึ้นให้กับผู้ใช้เมื่อไปยังเว็บไซต์ของบุคคลที่สาม ประสบการณ์เหล่านั้นเรียกกันว่า เบราว์เซอร์ในแอป
WebView รองรับชุดซอฟต์แวร์โครงสร้างพื้นฐานของเว็บสมัยใหม่อย่างครอบคลุม และรองรับ API ของเว็บที่ทันสมัยจำนวนมาก เช่น WebGL แต่ WebView เป็นเครื่องมือที่ใช้ UI บนเว็บเป็นหลัก ไม่ได้มีไว้รองรับและไม่รองรับฟีเจอร์ทั้งหมดของแพลตฟอร์มเว็บ API อาจไม่รองรับเมื่อ API มีทางเลือกระดับระบบปฏิบัติการอยู่แล้ว เช่น Web Bluetooth หรือต้องมีการติดตั้งใช้งาน UI ของเบราว์เซอร์ เช่น ข้อความ Push เนื่องจากแพลตฟอร์มเว็บมีการพัฒนาและเพิ่ม ฟีเจอร์ที่มีให้ใช้งานเฉพาะในแอป Android เท่านั้น ช่องว่างนี้จึงมีขนาดใหญ่ขึ้น เนื่องจากนักพัฒนาแอปไม่ได้ควบคุมฟีเจอร์ที่จะใช้เมื่อเปิดเนื้อหาของบุคคลที่สาม WebView จึงเป็นตัวเลือกที่ไม่ดีสำหรับเบราว์เซอร์ในแอปหรือเปิด Progressive Web App แม้ว่า WebView จะรองรับฟีเจอร์แพลตฟอร์มเว็บทั้งหมด แต่นักพัฒนาซอฟต์แวร์ก็ยังคงต้องเขียนโค้ดและใช้ UI ของตนเองเพื่อฟังก์ชันการทำงาน เช่น สิทธิ์หรือข้อความ Push ซึ่งทำให้การทำงานความสอดคล้องสำหรับผู้ใช้ทำได้ยาก
ข้อควรพิจารณาด้านความปลอดภัยสำหรับการใช้ WebView เป็นเบราว์เซอร์ในแอป
WebView ให้สิทธิ์แอปพลิเคชันเครื่องมือฝังในการเข้าถึงเนื้อหาที่แสดงผลได้อย่างเต็มรูปแบบ ซึ่งรวมถึงคุกกี้และ DOM ฟีเจอร์เหล่านี้เป็นฟีเจอร์ที่มีประสิทธิภาพซึ่งต้องอาศัยความไว้วางใจจากผู้ใช้ในระดับสูง
เนื่องจาก WebView ไม่ได้มีไว้เพื่อใช้เป็นเฟรมเวิร์กสำหรับการสร้างเบราว์เซอร์ จึงไม่มีฟีเจอร์ด้านความปลอดภัยสำหรับเบราว์เซอร์รุ่นใหม่ๆ
สถาปัตยกรรมแบบหลายกระบวนการและการแยกเว็บไซต์
เบราว์เซอร์ออกแบบมาเพื่อรักษาความปลอดภัยขณะแสดงผลและดำเนินการกับเนื้อหาที่ไม่น่าเชื่อถือ เพื่อให้มั่นใจว่าผู้ใช้ปลอดภัยขณะไปยังเนื้อหาที่อาจไม่น่าเชื่อถือหรือแม้แต่เป็นอันตราย เบราว์เซอร์สมัยใหม่จะใช้เทคนิคต่างๆ เช่น การใช้สถาปัตยกรรมแบบหลายกระบวนการและการแยกเว็บไซต์
หากไม่มีสถาปัตยกรรมแบบมัลติโปรเซส ข้อขัดข้องที่เกิดจากหน้าเว็บอาจทำให้แอปเบราว์เซอร์ทั้งแอปขัดข้อง หรืออาจมีการใช้ประโยชน์จากช่องโหว่เพื่อควบคุมอุปกรณ์ทั้งเครื่อง การแยกเว็บไซต์จะเพิ่มการรักษาความปลอดภัยอีกชั้นหนึ่ง ซึ่งทำให้เว็บไซต์ที่ไม่น่าเชื่อถือเข้าถึงและขโมยข้อมูลจากเว็บไซต์อื่นๆ ได้ยากขึ้น
ตัวแสดงผล WebView ใช้กระบวนการเดียวกันกับแอปพลิเคชันเครื่องมือฝังไฟล์จนถึง Android 8.0 Oreo ในระบบปฏิบัติการเวอร์ชันใหม่ๆ และเมื่ออุปกรณ์มีศักยภาพมากพอ โหมดแสดงภาพจะทำงานในโปรเซสอื่น อย่างไรก็ตาม ระบบจะยังคงแชร์กระบวนการเดียวระหว่างหน้าเว็บทั้งหมดและอินสแตนซ์ WebView ที่ทำงานอยู่ ทำให้ใช้การแยกเว็บไซต์อย่างเต็มรูปแบบไม่ได้
การขาดสถาปัตยกรรมแบบหลายกระบวนการและการแยกเว็บไซต์ไม่ใช่ปัญหาสำหรับแอปพลิเคชันที่แสดงผลเนื้อหาที่ตนเองเป็นเจ้าของและเชื่อถือ แต่อาจเป็นปัญหาสำหรับแอปพลิเคชันที่ใช้เนื้อหาของบุคคลที่สามที่ไม่น่าเชื่อถือ เช่น เบราว์เซอร์ในแอป และทำให้ผู้ใช้พบช่องโหว่ เช่น Meltdown และ Spectre ซึ่งอาจใช้เพื่อขโมยคุกกี้ รายละเอียดธนาคาร ข้อมูลส่วนบุคคล และอื่นๆ
สัญญาณบอกสถานะ UI ที่ปลอดภัย
นอกจากนี้ คุณยังควรมอบตัวบ่งชี้ความปลอดภัยที่ดีให้กับผู้ใช้ และเบราว์เซอร์ต้องใช้ความพยายามอย่างมากและพัฒนาอยู่เสมอในด้านนี้ อย่างไรก็ตาม WebView ไม่มี API สำหรับตรวจสอบว่าการเชื่อมต่อของเว็บไซต์ปลอดภัยหรือไม่ ซึ่งจะช่วยให้นักพัฒนาแอปพลิเคชันสร้างตัวบ่งชี้ความปลอดภัยที่เชื่อถือได้ การไม่มี API ดังกล่าวอาจทำให้ URL ที่แสดงในแถบที่อยู่ไม่ตรงกับหน้าที่แสดงต่อผู้ใช้ แม้ผ่านการเชื่อมต่อ HTTPS ที่ปลอดภัยก็ตาม
อีกทางเลือกหนึ่งที่พร้อมให้นักพัฒนาซอฟต์แวร์ใช้งานได้คือการฝังเครื่องมือเบราว์เซอร์ไว้ในแอปพลิเคชัน นอกจากจะทำให้แอปพลิเคชันมีขนาดเพิ่มขึ้นแล้ว วิธีนี้ทั้งยังซับซ้อนและใช้เวลานาน
ใช้แท็บที่กำหนดเองเพื่อเป็นโซลูชันสำหรับเบราว์เซอร์ในแอป
"แท็บที่กำหนดเอง" เปิดตัวแล้วใน Chrome 45 และอนุญาตให้นักพัฒนาซอฟต์แวร์ใช้แท็บจากเบราว์เซอร์เริ่มต้นของผู้ใช้เป็นส่วนหนึ่งของแอปพลิเคชันได้ "แท็บที่กำหนดเอง" เปิดตัวโดย Chrome ในตอนแรก จึงเรียกว่า "แท็บที่กำหนดเองของ Chrome" ปัจจุบันเป็น Android API และเบราว์เซอร์ที่ได้รับความนิยมมากที่สุด รองรับแท็บที่กำหนดเอง ซึ่งรวมถึง Chrome, Firefox, Edge และ Samsung Internet ดังนั้นการใช้คำว่า "แท็บที่กำหนดเอง" จึงเป็นตัวเลือกที่เหมาะสมยิ่งขึ้น
แท็บที่กำหนดเองช่วยให้นักพัฒนาซอฟต์แวร์ผสานรวมเนื้อหาเว็บเข้ากับประสบการณ์การใช้งานแอปของตนได้อย่างราบรื่น และยังทำให้นักพัฒนาซอฟต์แวร์สามารถปรับแต่งกิจกรรมการแสดงเนื้อหาเว็บโดยให้พวกเขาสามารถปรับแต่งสีแถบเครื่องมือ ปุ่มการทำงาน ภาพเคลื่อนไหวของการเปลี่ยนภาพ และอื่นๆ ได้
นอกจากนี้ยังมีฟีเจอร์ที่ก่อนหน้านี้ใช้ไม่ได้เมื่อใช้ WebView หรือฝังเครื่องมือเบราว์เซอร์ด้วย เนื่องจากเบราว์เซอร์ในแอปขับเคลื่อนโดยเบราว์เซอร์ของผู้ใช้ แท็บที่กำหนดเองจึงแชร์พื้นที่เก็บข้อมูลกับเบราว์เซอร์ ผู้ใช้จึงไม่ต้องเข้าสู่ระบบเว็บไซต์โปรดอีกครั้งทุกครั้งที่แอปที่ติดตั้งเริ่มเซสชันการท่องเว็บในแอป
Custom Tab รองรับฟีเจอร์แพลตฟอร์มเว็บและ API ทั้งหมดที่เบราว์เซอร์รองรับ ซึ่งแตกต่างจาก WebView
เปิด Progressive Web App โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้
Progressive Web App มีลักษณะการทำงานและความสามารถมากมายที่ก่อนหน้านี้เคยใช้ได้กับแอปเฉพาะแพลตฟอร์มที่ใช้งานบนเว็บได้ การเปิดตัวลักษณะการทำงานที่เหมือนกับแอปทำให้นักพัฒนาแอปต้องการ นำประสบการณ์การใช้งานซ้ำใน Android มาใช้มากขึ้น และนักพัฒนาแอปเริ่มถามถึงวิธีผสานรวม PWA เข้ากับแอปของตน
แท็บที่กำหนดเองรองรับความสามารถและ API ของเว็บสมัยใหม่ทั้งหมด แต่เนื่องจากได้รับการออกแบบมาให้เปิดเนื้อหาของบุคคลที่สามเป็นหลัก จึงมีแถบเครื่องมือที่ด้านบนเพื่อแจ้งให้ผู้ใช้ทราบว่ากำลังเข้าชม URL ใด ตลอดจนไอคอนแม่กุญแจที่ระบุว่าเว็บไซต์ปลอดภัยหรือไม่ เมื่อเปิดประสบการณ์ของแอปเอง แถบเครื่องมือจะป้องกันไม่ให้แอปพลิเคชันรู้สึกว่ามีการผสานรวมกับระบบปฏิบัติการ
การเปิดตัวกิจกรรมบนเว็บที่เชื่อถือได้ใน Chrome 72 ช่วยให้นักพัฒนาซอฟต์แวร์ใช้ PWA ภายในแอป Android ได้ โปรโตคอลของโปรโตคอลนี้คล้ายกับโปรโตคอลแท็บที่กำหนดเอง แต่เปิดตัว API ที่ช่วยให้นักพัฒนาแอปยืนยัน (ผ่านลิงก์เนื้อหาดิจิทัล) ว่าควบคุมทั้งแอป Android และ URL ที่เปิดอยู่ และนำแถบ URL ออกเมื่อเป็นจริง
และยังเปิดตัว API สำหรับการสร้างหน้าจอแนะนำเมื่อเปิด PWA หรือมอบสิทธิ์การแจ้งเตือนบนเว็บให้โค้ด Android จัดการอีกด้วย ฟีเจอร์อื่นๆ เช่น การรองรับ Play Billing จะพร้อมใช้งานเร็วๆ นี้
เนื่องจาก URL ที่เปิดในกิจกรรมบนเว็บที่เชื่อถือได้ควรเป็น PWA และมีชุดลักษณะการทำงานและลักษณะด้านประสิทธิภาพ กิจกรรมบนเว็บที่เชื่อถือได้จึงนำเสนอเกณฑ์คุณภาพสำหรับ PWA ที่เปิดภายใน
ข้อจำกัดของวิธีแก้ปัญหาในปัจจุบัน
ความคิดเห็นของนักพัฒนาแอปแสดงให้เห็นถึงความจำเป็นในความเข้ากันได้ของแพลตฟอร์มของแท็บที่กำหนดเอง รวมถึงความยืดหยุ่นของ WebView ที่ทำให้เข้าถึง DOM หรือแทรก JavaScript ในเบราว์เซอร์ในแอปได้ เป็นต้น
แท็บที่กำหนดเอง คือแท็บที่เบราว์เซอร์ของผู้ใช้แสดงผลอย่างมีประสิทธิภาพ โดยมี UI ที่กำหนดเอง หรือไม่มี UI เลย ซึ่งหมายความว่าเบราว์เซอร์จะต้องทำตามความคาดหวังของผู้ใช้เกี่ยวกับความเป็นส่วนตัวและความปลอดภัยต่อเบราว์เซอร์ ทำให้ฟีเจอร์บางอย่างเหล่านั้นใช้งานไม่ได้
ทีมเว็บบน Android ที่ Google กำลังมองหาทางเลือกและทดลองโซลูชันต่างๆ เพื่อแก้ปัญหา Use Case เหล่านั้น โปรดติดตามรายละเอียด
สรุป
WebView จะเป็นประโยชน์เมื่อแอปพลิเคชันต้องใช้ HTML, CSS และ JavaScript ภายในแอป Android แต่ไม่ได้ใช้ฟีเจอร์และความสามารถขั้นสูงที่มีบนเว็บสมัยใหม่ เช่น ข้อความ Push, เว็บบลูทูธ และอื่นๆ เราไม่แนะนำให้เปิดเนื้อหาที่ออกแบบมาสำหรับแพลตฟอร์มเว็บสมัยใหม่ เนื่องจากเนื้อหาอาจไม่แสดงในวิธีที่นักพัฒนาแอปตั้งใจไว้ ไม่แนะนำให้ใช้ WebView สำหรับการสร้างเบราว์เซอร์ในแอป ส่วนการแสดงเนื้อหาเว็บของบุคคลที่หนึ่ง ก็เป็นอีกด้านหนึ่งที่ WebView โดดเด่นอย่างแท้จริง
ควรใช้กิจกรรมบนเว็บและที่เชื่อถือได้เมื่อนักพัฒนาแอปต้องการแสดงผล Progressive Web App ของตนเองแบบเต็มหน้าจอภายในแอปพลิเคชัน Android โดยสามารถใช้เป็นกิจกรรมเดียวในแอป หรือใช้ร่วมกับกิจกรรมอื่นๆ ของ Android ได้
แท็บที่กำหนดเองเป็นวิธีที่แนะนำสำหรับการเปิดเนื้อหาของบุคคลที่สามที่ออกแบบมาสำหรับแพลตฟอร์มเว็บ หรือที่เรียกว่าเบราว์เซอร์ในแอป