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 เพื่อให้การแจ้งเตือนปรากฏขึ้นแม้ส่วนขยายจะไม่ได้ทำงานอยู่