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

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

Pete LePage

App Badging API คืออะไร

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

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

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

ป้ายมีแนวโน้มที่จะใช้ง่ายกว่าการแจ้งเตือน และอาจอัปเดตด้วยความถี่ที่สูงขึ้นมากเพราะไม่รบกวนผู้ใช้ และเนื่องจากโฆษณาจะไม่รบกวนผู้ใช้ จึงไม่จําเป็นต้องได้รับอนุญาตจากผู้ใช้

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

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

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

การสนับสนุน

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

ลองเลย

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

วิธีใช้ App Badging API

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

API ป้ายมี 2 วิธีใน navigator ดังนี้

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

ทั้ง 2 ค่าจะส่งคืนสัญญาที่ว่างเปล่าที่คุณสามารถใช้ในการจัดการข้อผิดพลาดได้

คุณตั้งค่าป้ายจากหน้าปัจจุบันหรือจาก 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 ไม่สนับสนุนการติดป้าย API Android จึงจะแสดงเพียงจุดแทนค่าตัวเลขเท่านั้น

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

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

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

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

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

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

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

API พุชจากเว็บ

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

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

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

การใช้ทั้ง 2 รูปแบบร่วมกัน

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

ความคิดเห็น

ทีม Chrome ต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ของคุณในการใช้ App Badging API

บอกให้เราทราบเกี่ยวกับการออกแบบ API

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

  • แจ้งปัญหาเกี่ยวกับข้อมูลจำเพาะในที่เก็บ API ป้าย GitHub หรือเพิ่มความคิดลงในปัญหาที่มีอยู่

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

คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจาก ข้อกำหนดหรือไม่

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

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

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

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

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

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