ใช้ Notifications API

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

ลักษณะของปุ่ม

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

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

การแจ้งเตือนรายการจะแสดงรายการในรายการจำนวนเท่าใดก็ได้

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

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

กลุ่มเป้าหมายมีพฤติกรรมอย่างไร

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

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

priority การตั้งค่าไม่มีผลต่อลำดับการแจ้งเตือนใน macOS

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

วิธีพัฒนา

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

await browser.notifications.create(id, options);

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 ซึ่งเป็นลิงก์ไปยังรูปภาพที่แสดงตัวอย่าง ในการแจ้งเตือน โปรดทราบว่ารูปภาพจะไม่แสดงต่อผู้ใช้ใน macOS

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

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

เทมเพลต list จะแสดง items ในรูปแบบรายการ โปรดทราบว่าระบบจะแสดงเฉพาะรายการแรกต่อผู้ใช้ใน macOS

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."}]
}```

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

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

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

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

Listener เหตุการณ์:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

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

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

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