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

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

Pete LePage

App Badging API คืออะไร

ตัวอย่าง Twitter ที่มีข้อความแจ้ง 8 รายการและแอปอื่นที่แสดงป้ายประเภท Flag
ตัวอย่าง 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 ที่ติดตั้งไว้ (ในแถบงานหรือแท่นชาร์จ)
  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 ที่ไม่ทำงานตามที่คาดไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องนำไปใช้กับไอเดียของคุณ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย

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

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

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

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

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

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

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

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

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