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