ใช้ Notifications API

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

การแจ้งเตือนในถาดผู้ใช้ระบบ

รูปลักษณ์ภายนอก

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

การแจ้งเตือนขั้นพื้นฐานมีดังนี้

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

การแจ้งเตือนรายการจะแสดงกี่รายการก็ได้:

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

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

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

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

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

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

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

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

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

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

การดำเนินการในการแจ้งเตือน

วิธีพัฒนา

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

await chrome.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
}

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

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

Listener เหตุการณ์:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

เครื่องจัดการเหตุการณ์:

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

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