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

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

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

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

เหตุใดจึงควรฝังเนื้อหาเว็บ

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

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

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

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

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

  • แสดงเนื้อหาเว็บของคุณเองแบบอินไลน์เป็นประสบการณ์หลักในที่ที่คุณต้องการความยืดหยุ่นสูงในการปรับแต่งหรืออัปเดต UI
  • แสดงเนื้อหาอื่นๆ เช่น โฆษณา ข้อกำหนดและกฎหมาย หรือเนื้อหาอื่นๆ ของบุคคลที่สามแบบอินไลน์ หรือเป็นหน้าต่างภายในประสบการณ์การใช้งานแอป
แอป Android เปิดไปยัง Google Play โดยมี WebView หลักไฮไลต์ใน
  กรอบสีแดง แอป Android เปิดพร้อมข้อความสนับสนุนภายในกล่องสีแดง
รูปที่ 2 เนื้อหาเว็บที่ฝังอยู่ในแอปโดยมี `WebView`เป็นเนื้อหาหลัก (ซ้าย) และเนื้อหาสนับสนุน (ขวา)

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

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

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

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

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

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

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