การท่องเว็บในแอปโดยใช้เว็บที่ฝัง

เบราว์เซอร์ในแอปช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานเว็บอย่างเต็มรูปแบบโดยไม่ต้องออกจากแอป Android มี API หลัก 2 รายการสําหรับการติดตั้งใช้งานเบราว์เซอร์ในแอป ได้แก่ แท็บที่กําหนดเองและ WebView ใช้เบราว์เซอร์ในแอปเมื่อคุณมีลิงก์หรือโฆษณาที่นำไปสู่หน้าเว็บ คุณสามารถเปิดหน้านั้นได้จากภายในแอป ดังที่เห็นในรูปที่ 1

ลิงก์ในแอปในกล่องสีแดง และลูกศรชี้ไปยังหน้าจออื่นที่แสดงลิงก์ที่เปิดด้วยแท็บที่กำหนดเอง
รูปที่ 1 การคลิกลิงก์ในแอป (ซ้าย) และการเปิดเบราว์เซอร์ในแอปโดยใช้แท็บที่กำหนดเอง (ขวา)

การเลือกระหว่างแท็บที่กำหนดเองกับ WebView เป็นการตัดสินใจด้านสถาปัตยกรรมที่สำคัญซึ่งส่งผลต่อความเร็วในการพัฒนา ประสบการณ์ของผู้ใช้ และระดับการควบคุมที่คุณมีเหนือ UI

การเปรียบเทียบโดยย่อ

ใช้ตารางต่อไปนี้เพื่อช่วยคุณตัดสินใจเลือกเครื่องมือที่เหมาะกับความต้องการ

ฟีเจอร์ WebView แท็บที่กำหนดเอง
กรณีการใช้งานหลัก การสร้างแอปแบบไฮบริดที่มีเว็บเป็นเนื้อหาหลักหรือเนื้อหาสนับสนุน การแสดงโฆษณา Display, App Campaign หรือหน้าข้อกำหนดในการให้บริการ การแสดงเนื้อหาจากเว็บไซต์ภายนอก (เช่น บทความข่าวหรือหน้าสินค้า)
ตัวควบคุม UI เต็ม ซึ่งเป็นคอมโพเนนต์ View ที่คุณวางไว้ที่ใดก็ได้ คุณควบคุม UI โดยรอบทั้งหมด จำกัด คุณสามารถกำหนดธีมสีของแถบเครื่องมือและเพิ่มการดำเนินการที่กำหนดเองได้ 2-3 รายการ
ข้อมูลและเซสชัน แซนด์บ็อกซ์ โดยจะไม่แชร์คุกกี้หรือการเข้าสู่ระบบกับเบราว์เซอร์หลักของผู้ใช้ แชร์แล้ว โดยจะใช้เซสชันเบราว์เซอร์เริ่มต้นของผู้ใช้ รวมถึงคุกกี้และรหัสผ่านที่บันทึกไว้
Native <-> Web bridge ได้ คุณสามารถใช้ JavaScript Bridge เพื่อการสื่อสารแบบ 2 ทางที่ลึกซึ้งระหว่างเนื้อหาเว็บกับโค้ดของแอปที่มาพร้อมเครื่อง จำกัด คุณสามารถใช้เมธอด window.postMessage() สำหรับการส่งสตริงพื้นฐานได้
ความพยายามของนักพัฒนาแอป สูง คุณต้องจัดการวงจร การนําทาง และประสิทธิภาพด้วยตนเอง ต่ำ คุณติดตั้งใช้งานได้โดยใช้โค้ดเพียงไม่กี่บรรทัด

WebView

WebView คือมุมมองที่ทำให้หน้าเว็บเป็นส่วนสำคัญของเลย์เอาต์ของแอป แม้ว่าจะมีประสิทธิภาพ แต่ก็จัดการได้ยากกว่าแท็บที่กำหนดเองเล็กน้อย

WebView สามารถโหลดเนื้อหาเว็บระยะไกลหรือในเครื่อง เรียกใช้ JavaScript และเปิดใช้การสื่อสารแบบ 2 ทิศทางระหว่างเนื้อหาเว็บกับโค้ดแอปที่มาพร้อมเครื่อง ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถของ WebView ได้ที่สิ่งที่ WebView ทำได้

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

เหตุผลที่ควรเลือก WebView

ตัวอย่างสถานการณ์ที่ WebView เหมาะสมมีดังนี้

  • แอปแบบไฮบริด: คุณกำลังสร้างแอปที่เนื้อหาเว็บและคอมโพเนนต์แบบเนทีฟ (เช่น แถบนำทางหรือปุ่มการทำงานแบบลอย) อยู่เคียงข้างกัน
  • เนื้อหาของบุคคลที่หนึ่ง: เนื้อหาเว็บเป็นส่วนหลักแบบอินเทอร์แอกทีฟของประสบการณ์การใช้งานแอป เช่น เครื่องมือแก้ไขเอกสารหรือผืนผ้าใบการออกแบบ
  • การควบคุม UI เต็มรูปแบบ: คุณต้องแก้ไขเนื้อหาของหน้าเว็บเองหรือวางองค์ประกอบ UI แบบเนทีฟซ้อนทับหน้าเว็บ
  • การวิเคราะห์เชิงลึก: คุณต้องการข้อมูลเชิงลึกโดยละเอียดเกี่ยวกับการมีส่วนร่วมของผู้ใช้และกิจกรรมภายใน WebView

ข้อดีข้อเสียที่สำคัญ

ข้อดีข้อเสียสำคัญที่ควรพิจารณาเมื่อใช้ WebView มีดังนี้

  • ประสิทธิภาพ: WebView อาจใช้หน่วยความจำมาก หากไม่จัดการอย่างระมัดระวัง คุณอาจพบปัญหาด้านประสิทธิภาพหรือ ANR (ข้อผิดพลาดแอปไม่ตอบสนอง)
  • ความปลอดภัยและการบำรุงรักษา: คุณมีหน้าที่รับผิดชอบในการเพิ่มความปลอดภัยและจัดการวงจรการใช้งาน ซึ่งรวมถึงการจัดการการเก็บรักษาสถานะในการสร้างกระบวนการใหม่โดยใช้ WebViewCompat.saveState() และการอยู่ในขีดจำกัดธุรกรรมสถานะที่บันทึกไว้ 1 MB ของ Android อย่างไรก็ตาม การอัปเดต WebView จะเผยแพร่ทั่วโลกผ่าน Google Play คุณจึงไม่ต้องกังวลว่าเครื่องมือที่สำคัญจะล้าสมัย

แท็บที่กำหนดเอง

แท็บที่กำหนดเองเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการนำผู้ใช้ไปยัง URL ภายนอก เนื่องจากแท็บเหล่านี้มีหน้าต่างเบราว์เซอร์ที่รวดเร็ว ปลอดภัย และใช้ง่ายซึ่งเลื่อนไปเหนือแอปของคุณ

เหตุผลที่ควรเลือกแท็บที่กำหนดเอง

ต่อไปนี้คือสถานการณ์บางอย่างที่แท็บที่กำหนดเองเหมาะสม

  • ลิงก์ภายนอก: เมื่อผู้ใช้แตะลิงก์ไปยังเว็บไซต์ที่คุณไม่ได้เป็นเจ้าของ แท็บที่กำหนดเองจะช่วยให้ผู้ใช้ยังคงอยู่ในบริบทของแอป พร้อมทั้งมอบประสบการณ์การใช้งานเบราว์เซอร์เต็มรูปแบบ
  • ผสานรวมได้ง่าย: เป็นวิธีที่ง่ายที่สุดในการทำให้ประสบการณ์การใช้งานเว็บแบบฝังทำงานได้
  • สถานะที่แชร์: เนื่องจากแชร์คุกกี้กับเบราว์เซอร์เริ่มต้นของผู้ใช้ ผู้ใช้จึงไม่ต้องลงชื่อเข้าใช้เว็บไซต์ที่เคยเข้าชมแล้วอีกครั้ง
  • การลงชื่อเข้าใช้ของบุคคลที่สาม: เหมาะสำหรับขั้นตอนการลงชื่อเข้าใช้ของบุคคลที่สาม (เช่น "ลงชื่อเข้าใช้ด้วย Google" หรือ "ลงชื่อเข้าใช้ด้วย Facebook") เนื่องจากเบราว์เซอร์จะจัดการข้อมูลเข้าสู่ระบบอย่างปลอดภัย

แม้ว่าเบราว์เซอร์ส่วนใหญ่จะรองรับแท็บที่กำหนดเอง แต่บางเบราว์เซอร์ก็มีการปรับแต่งมากกว่าเบราว์เซอร์อื่นๆ โปรดดูข้อมูลเพิ่มเติมที่หัวข้อการสนับสนุนเบราว์เซอร์

ใช้เนื้อหาเว็บใน Jetpack Compose

คุณใช้ทั้งแท็บที่กำหนดเองและ WebView ได้เมื่อสร้างด้วย Jetpack Compose ดังนี้

  • แท็บที่กำหนดเอง: เนื่องจากแท็บที่กำหนดเองใช้ Intent คุณจึงเปิดแท็บเหล่านั้นจาก Context ใดก็ได้ในฟังก์ชัน Compose ซึ่งทำให้การผสานรวมเป็นไปอย่างราบรื่น
  • WebView: Compose ยังไม่มี WebView Composable แบบเนทีฟ คุณจึงต้องใช้ AndroidView เพื่อฝัง WebView มาตรฐานลงในเลย์เอาต์

แหล่งข้อมูลเพิ่มเติม

หากต้องการพัฒนาหน้าเว็บสำหรับอุปกรณ์ที่ทำงานด้วยระบบ Android โดยใช้ WebView หรือ API ของแท็บที่กำหนดเอง โปรดดูเอกสารต่อไปนี้