API การแจ้งเตือนแบบริชมีเดีย

Rich Notifications API ช่วยให้คุณสร้างการแจ้งเตือนโดยใช้เทมเพลตและแสดงการแจ้งเตือน เหล่านี้แก่ผู้ใช้ในถาดระบบของผู้ใช้ได้

ลักษณะที่ปรากฏ

Rich Notifications มี 4 รูปแบบ ได้แก่ พื้นฐาน รูปภาพ รายการ และความคืบหน้า การแจ้งเตือนทั้งหมดจะมีชื่อ ข้อความ ไอคอนขนาดเล็กที่แสดงทางด้านซ้ายของข้อความการแจ้งเตือน และช่อง contextMessage ซึ่งจะแสดงเป็นช่องข้อความที่ 3 ในแบบอักษรสีอ่อนกว่า

รูปภาพพื้นฐาน

การแจ้งเตือนแบบรายการจะแสดงรายการได้ไม่จำกัดจำนวน

การแจ้งเตือนแบบรูปภาพจะแสดงตัวอย่างรูปภาพ

การแจ้งเตือนความคืบหน้าจะแสดงแถบความคืบหน้า

ลักษณะการทำงาน

ใน ChromeOS การแจ้งเตือนจะปรากฏในถาดระบบของผู้ใช้และจะอยู่ในถาดระบบจนกว่าผู้ใช้จะปิดการแจ้งเตือน ถาดระบบจะนับจำนวนการแจ้งเตือนใหม่ทั้งหมด เมื่อผู้ใช้เห็นการแจ้งเตือนในถาดระบบแล้ว ระบบจะรีเซ็ตจำนวนเป็น 0

คุณกำหนดลำดับความสำคัญของการแจ้งเตือนได้ตั้งแต่ -2 ถึง 2 การแจ้งเตือนที่มีลำดับความสำคัญ < 0 จะแสดงในศูนย์การแจ้งเตือนของ ChromeOS และทำให้เกิดข้อผิดพลาดในแพลตฟอร์มอื่นๆ ลำดับความสำคัญ 0 คือลำดับความสำคัญเริ่มต้น การแจ้งเตือนที่มีลำดับความสำคัญ > 0 จะแสดงเป็นระยะเวลานานขึ้น และการแจ้งเตือนที่มีลำดับความสำคัญสูงกว่าจะแสดงในถาดระบบได้

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

วิธีพัฒนา

หากต้องการใช้ API นี้ ให้เรียกใช้เมธอด notifications.create โดยส่งรายละเอียดการแจ้งเตือนผ่าน พารามิเตอร์ options

chrome.notifications.create(id, options, creationCallback);

notifications.NotificationOptions ต้องมี notifications.TemplateType ซึ่ง กำหนดรายละเอียดการแจ้งเตือนที่ใช้ได้และวิธีแสดงรายละเอียดเหล่านั้น

สร้างการแจ้งเตือนพื้นฐาน

เทมเพลตทุกประเภท (basic, image, list และ progress) ต้องมี title และ message ของการแจ้งเตือน รวมถึง iconUrl ซึ่งเป็นลิงก์ไปยังไอคอนขนาดเล็กที่จะแสดงทางด้านซ้ายของข้อความการแจ้งเตือน

ตัวอย่างเทมเพลต basic

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

สร้างการแจ้งเตือนแบบรูปภาพ

เทมเพลตประเภท image ยังมี imageUrl ซึ่งเป็นลิงก์ไปยังรูปภาพที่จะแสดงตัวอย่าง ในการแจ้งเตือนด้วย

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

ในแอป Chrome URL เหล่านี้ต้องชี้ไปยังทรัพยากรในเครื่องหรือใช้ Blob หรือ URL ข้อมูลเนื่องจากนโยบายรักษาความปลอดภัยเนื้อหาที่เข้มงวด ใช้สัดส่วน 3:2 สำหรับรูปภาพ ไม่เช่นนั้นรูปภาพจะมีเส้นขอบสีดำ

สร้างการแจ้งเตือนแบบรายการ

เทมเพลต list จะแสดง items ในรูปแบบรายการ

var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}

สร้างการแจ้งเตือนความคืบหน้า

เทมเพลต progress จะแสดงแถบความคืบหน้าซึ่งความคืบหน้าปัจจุบันมีค่าตั้งแต่ 0 ถึง 100

var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

การฟังและการตอบสนองต่อเหตุการณ์

การแจ้งเตือนทั้งหมดสามารถมี Listener เหตุการณ์และตัวจัดการเหตุการณ์ที่ตอบสนองต่อการดำเนินการของผู้ใช้ (ดู chrome.events) เช่น คุณสามารถเขียนตัวจัดการเหตุการณ์เพื่อตอบสนองต่อเหตุการณ์ notifications.onButtonClicked ได้

Listener เหตุการณ์

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

ตัวแฮนเดิลเหตุการณ์

function replyBtnClick {
    //Write function to respond to user action.
}

ลองใส่ Listener เหตุการณ์และตัวจัดการเหตุการณ์ไว้ในหน้าเหตุการณ์ เพื่อให้การแจ้งเตือน แสดงขึ้นได้แม้ว่าแอปหรือส่วนขยายจะไม่ได้ทำงานอยู่ก็ตาม