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

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

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

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

เหตุผลที่ควรฝังเนื้อหาเว็บ

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

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

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

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

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

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

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

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

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

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

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

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