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

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

Pete LePage

App Badging API คืออะไร

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

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

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

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

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

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

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

การสนับสนุน

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

ลองใช้

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

วิธีใช้ App Badging API

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

Badge API มี 2 วิธีใน navigator ดังนี้

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

ทั้ง 2 อย่างจะแสดงการสัญญาที่ว่างเปล่าซึ่งสามารถใช้ในการจัดการข้อผิดพลาดได้

คุณสามารถตั้งค่าป้ายจากหน้าปัจจุบัน หรือจากหน้าที่ลงทะเบียน 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()

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

API พุชจากเว็บ

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

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

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

ทั้ง 2 อย่าง

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

ความคิดเห็น

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

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

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

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

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

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

แสดงการรองรับ API

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

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

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

รูปภาพหลักโดย Prateek Katyal เปิดอยู่ หน้าจอแนะนํา