การติดป้ายไอคอนแอป

App Badging API อนุญาตให้เว็บแอปที่ติดตั้งตั้งค่าป้ายแอปพลิเคชันทั่วทั้งแอปในไอคอนแอปได้

Pete LePage

App Badging API คืออะไร

ตัวอย่าง Twitter ที่มีการแจ้งเตือน 8 รายการและแอปอื่นที่แสดงป้ายประเภทธง
ตัวอย่าง Twitter ที่มีการแจ้งเตือน 8 รายการและแอปอื่นที่แสดงป้ายประเภท ธง

App Badging API ช่วยให้เว็บแอปที่ติดตั้งตั้งค่าป้ายแอปพลิเคชันทั้งระบบได้ ซึ่งจะแสดงในตำแหน่งที่เฉพาะเจาะจงของระบบปฏิบัติการที่เชื่อมโยงกับแอปพลิเคชัน (เช่น ชั้นวางหรือหน้าจอหลัก)

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

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

กรณีการใช้งานที่เป็นไปได้

ตัวอย่างแอปที่อาจใช้ API นี้ ได้แก่

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

การสนับสนุน

App Badging API ทำงานบน Windows และ macOS ใน Chrome 81 และ Edge 81 ขึ้นไป เรากำลังพัฒนาการรองรับ ChromeOS และจะพร้อมให้บริการในรุ่น ต่อๆ ไป ใน Android ระบบไม่รองรับ Badging API แต่ Android จะแสดงป้ายบนไอคอนแอปสำหรับเว็บแอปที่ติดตั้งโดยอัตโนมัติ เมื่อมีการแจ้งเตือนที่ยังไม่ได้อ่าน เช่นเดียวกับแอป Android

ลองใช้

  1. เปิดการสาธิต App Badging API
  2. เมื่อได้รับข้อความแจ้ง ให้คลิกติดตั้งเพื่อติดตั้งแอป หรือใช้เมนู Chrome เพื่อติดตั้ง
  3. เปิดเป็น PWA ที่ติดตั้งไว้ โปรดทราบว่าแอปต้องทำงานเป็น PWA ที่ติดตั้งแล้ว (ในแถบงานหรือ Dock)
  4. คลิกปุ่มตั้งค่าหรือล้างเพื่อตั้งค่าหรือล้างป้ายจากไอคอนแอป คุณยังระบุตัวเลขสำหรับมูลค่าป้ายได้ด้วย

วิธีใช้ App Badging API

หากต้องการใช้ App Badging API เว็บแอปของคุณต้องเป็นไปตามเกณฑ์การติดตั้งของ Chrome และผู้ใช้ต้องเพิ่มเว็บแอปดังกล่าวลงในหน้าจอหลัก

Badge API ประกอบด้วย 2 วิธีใน navigator ดังนี้

  • setAppBadge(number): ตั้งค่าป้ายของแอป หากระบุค่า ให้ตั้งค่าป้ายเป็นค่าที่ระบุ มิเช่นนั้นให้แสดงจุดสีขาวธรรมดา (หรือธงอื่นๆ ตามความเหมาะสมกับแพลตฟอร์ม) การตั้งค่า number เป็น 0 จะเหมือนกับการ เรียกใช้ clearAppBadge()
  • clearAppBadge(): นำป้ายของแอปออก

ทั้งคู่จะแสดงผลพรอมต์ว่างที่คุณใช้ในการจัดการข้อผิดพลาดได้

คุณตั้งค่าป้ายได้จากหน้าปัจจุบันหรือจาก Service Worker ที่ลงทะเบียน ไว้ หากต้องการตั้งค่าหรือล้างป้าย (ในหน้าเบื้องหน้าหรือ Service Worker) ให้เรียกใช้

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

ในบางกรณี ระบบปฏิบัติการอาจไม่อนุญาตให้แสดงป้ายอย่างถูกต้อง ในกรณีดังกล่าว เบราว์เซอร์จะพยายามแสดงผลอุปกรณ์นั้นๆ ให้ดีที่สุด เช่น เนื่องจาก Android ไม่รองรับ Badging API Android จึงแสดงเฉพาะจุดแทนค่าตัวเลข

อย่าคาดเดาว่า User Agent จะแสดงป้ายอย่างไร User Agent บางรายการอาจใช้ตัวเลข เช่น "4000" และเขียนใหม่เป็น "99+" หากคุณทำให้ป้ายอิ่มตัวด้วยตนเอง (เช่น ตั้งค่าเป็น "99") เครื่องหมาย "+" จะไม่ปรากฏ ไม่ว่าจะเป็นหมายเลขใดก็ตาม เพียงเรียกใช้ setAppBadge(unreadCount) แล้วปล่อยให้ User Agent จัดการ แสดงหมายเลขนั้นตามที่เหมาะสม

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

การตั้งค่าและล้างป้ายในเบื้องหลังจาก Service Worker

นอกจากนี้ คุณยังตั้งค่าป้ายแอปในเบื้องหลังได้โดยใช้ Service Worker โดยทำผ่านการซิงค์ในเบื้องหลังตามระยะเวลา, Push API หรือทั้ง 2 อย่างร่วมกัน

การซิงค์ในเบื้องหลังตามระยะเวลา

การซิงค์ในเบื้องหลังตามระยะเวลาช่วยให้ Service Worker สามารถสำรวจเซิร์ฟเวอร์เป็นระยะๆ ซึ่งอาจใช้เพื่อรับสถานะที่อัปเดต และเรียกใช้ navigator.setAppBadge()

อย่างไรก็ตาม ความถี่ในการเรียกใช้การซิงค์อาจไม่แน่นอน และจะเรียกใช้ตามที่เบราว์เซอร์เห็นสมควร

Web Push API

Push API ช่วยให้เซิร์ฟเวอร์ส่งข้อความไปยัง Service Worker ได้ ซึ่งสามารถเรียกใช้โค้ด JavaScript ได้แม้ว่าจะไม่มีหน้าในส่วนหน้าทำงานอยู่ก็ตาม ดังนั้น การพุชเซิร์ฟเวอร์จึงอัปเดตป้ายได้โดยการเรียก navigator.setAppBadge()

อย่างไรก็ตาม เบราว์เซอร์ส่วนใหญ่รวมถึง Chrome กำหนดให้ต้องแสดงการแจ้งเตือนทุกครั้งที่ได้รับข้อความ Push ซึ่งอาจใช้ได้ในบางกรณี (เช่น แสดงการแจ้งเตือนเมื่ออัปเดตป้าย) แต่จะทำให้ไม่สามารถอัปเดตป้ายอย่างแนบเนียนโดยไม่แสดงการแจ้งเตือน

นอกจากนี้ ผู้ใช้ต้องให้สิทธิ์การแจ้งเตือนแก่เว็บไซต์ของคุณเพื่อรับข้อความพุช

ทั้ง 2 อย่างรวมกัน

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

ความคิดเห็น

ทีม Chrome อยากทราบประสบการณ์การใช้งาน App Badging API ของคุณ

บอกเราเกี่ยวกับการออกแบบ API

มีสิ่งใดใน API ที่ไม่ทำงานตามที่คุณคาดหวังไว้หรือไม่ หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องใช้เพื่อนำไอเดียไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลความปลอดภัย

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งาน แตกต่างจากข้อกำหนด

  • ยื่นข้อบกพร่องที่ https://new.crbug.com โปรดระบุรายละเอียดให้มากที่สุด เท่าที่จะทำได้ วิธีการง่ายๆ ในการจำลองปัญหา และตั้งค่าคอมโพเนนต์เป็น UI>Browser>WebAppInstalls

แสดงการสนับสนุน API

คุณวางแผนที่จะใช้ App Badging API ในเว็บไซต์ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ ทีม Chrome จัดลําดับความสําคัญของฟีเจอร์ได้ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด

  • ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #BadgingAPI และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

รูปภาพหลักโดย Prateek Katyal ใน Unsplash