ใช้เนื้อหาเว็บภายในแอป Android

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

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

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

รูปที่ 1 `WebView` (ซ้าย) และ `Custom Tab` (ขวา) ที่มีเส้นขอบ

ทำไมจึงควรฝังเนื้อหาเว็บ

การฝังเนื้อหาเว็บในแอปมีประโยชน์หลายประการ ดังนี้

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

กรณีที่ควรใช้เนื้อหาเว็บ

กรณีการใช้งานหลักๆ สำหรับการใช้เว็บในแอป Android มี 3 กรณีดังนี้

1. การฝังเนื้อหาเว็บลงในแอปเป็นเนื้อหาหลักหรือเนื้อหาสนับสนุน: ใช้ WebView

• แสดงเนื้อหาเว็บของคุณเองในบรรทัดเป็นประสบการณ์หลักในกรณีที่คุณต้องการความยืดหยุ่นสูงในการปรับแต่งหรืออัปเดต UI
• แสดงเนื้อหาอื่นๆ เช่น โฆษณา เงื่อนไขทางกฎหมายและกฎระเบียบ หรือเนื้อหาของบุคคลที่สามอื่นๆ ในบรรทัด หรือเป็นหน้าต่างภายในประสบการณ์การใช้งานแอป

รูปที่ 2 เนื้อหาเว็บที่ฝังอยู่ภายในแอปที่มี `WebView`เป็นเนื้อหาหลัก (ซ้าย) และเนื้อหาสนับสนุน (ขวา)

2. การท่องเว็บในแอปโดยใช้ Custom Tabs หรือ WebView สำหรับกรณีการใช้งานขั้นสูง

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

รูปที่ 3 การคลิกลิงก์ในแอป (ซ้าย) และการเปิดเบราว์เซอร์ในแอป (ขวา)

3. ขั้นตอนการเข้าสู่ระบบหรือการตรวจสอบสิทธิ์ภายในแอป

แนวทางที่ Android แนะนำคือการสร้างขั้นตอนการเข้าสู่ระบบหรือการตรวจสอบสิทธิ์โดยใช้ Credential Manager หากพบว่าคุณยังคงต้องใช้ Embedded Web สำหรับประสบการณ์เหล่านี้ ให้ทำตามคำแนะนำต่อไปนี้

• บางแอปใช้ WebView เพื่อมอบขั้นตอนการลงชื่อเข้าใช้ให้แก่ผู้ใช้ ซึ่งรวมถึงการใช้ชื่อผู้ใช้และพาสคีย์ (หรือรหัสผ่าน) ที่เฉพาะเจาะจงสำหรับแอปของคุณ ซึ่งจะช่วยให้นักพัฒนาแอปสามารถรวมขั้นตอนการตรวจสอบสิทธิ์ในแพลตฟอร์มต่างๆ ได้
• เมื่อลิงก์ไปยังผู้ให้บริการข้อมูลประจำตัวบุคคลที่สามหรือประสบการณ์การเข้าสู่ระบบ เช่น "ลงชื่อเข้าใช้ด้วย…" Custom Tabs คือวิธีที่เหมาะสม การเปิด Custom Tab จะช่วยปกป้องข้อมูลเข้าสู่ระบบของผู้ใช้โดยแยกข้อมูลดังกล่าวไว้ในเว็บไซต์ของบุคคลที่สาม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ WebView สำหรับการตรวจสอบสิทธิ์ได้ที่ตรวจสอบสิทธิ์ผู้ใช้ด้วย WebView หากต้องการเปิด Custom Tab โปรดดูภาพรวมของแท็บที่กำหนดเองของ Android

รูปที่ 4 ช่องเข้าสู่ระบบในแอป (ซ้าย) และการเข้าสู่ระบบของบุคคลที่สามที่เปิดใน `แท็บที่กำหนดเอง` (ขวา)