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

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

รูปลักษณ์

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