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

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

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

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

การเปรียบเทียบอย่างรวดเร็ว

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

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

WebView

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

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

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

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

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

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

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

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

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

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

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

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

สถานการณ์ที่แท็บที่กำหนดเองเหมาะสมมีดังนี้

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

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

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

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

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

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

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