Notifications API และการจัดการสิทธิ์

Notification.permission เป็นสตริงแบบคงที่ที่สะท้อนสถานะสิทธิ์ปัจจุบัน โดยอาจเป็น "granted" (ผู้ใช้อนุญาต), "denied" (ผู้ใช้บล็อก) หรือ "default" (ยังไม่เคยขอ) ตรวจสอบพร็อพเพอร์ตีนี้ก่อนพยายามแสดงการแจ้งเตือน เพื่อหลีกเลี่ยงข้อผิดพลาดที่ไม่จำเป็น

Notification.requestPermission() คืนค่าเป็นพรอมิสที่ส่งผลลัพธ์เป็นสตริงสิทธิ์ใหม่ ให้เรียกใช้เฉพาะเพื่อตอบสนองต่อการกระทำของผู้ใช้ที่ชัดเจน ไม่ใช่เมื่อโหลดหน้า เบราว์เซอร์อาจเพิกเฉยหรือระงับหน้าต่างขอสิทธิ์ที่แสดงขึ้นทันทีเมื่อโหลดหน้า และผู้ใช้จะรู้สึกรำคาญเมื่อหน้าต่างดังกล่าวปรากฏโดยไม่มีบริบท

รูปแบบที่มีประสิทธิภาพที่สุดคือแสดงข้อความในแอปเพื่ออธิบายประโยชน์ แล้วให้ผู้ใช้คลิก "เปิดใช้การแจ้งเตือน" ก่อนเรียกใช้ requestPermission() วิธีนี้ช่วยให้ผู้ใช้เข้าใจบริบท เพิ่มอัตราการยอมรับ และป้องกันไม่ให้เบราว์เซอร์มองว่าเว็บไซต์ของคุณเป็นสแปม อย่าขอสิทธิ์เมื่อโหลดหน้าโดยเด็ดขาด

new Notification(title, options) จะสร้างและแสดงการแจ้งเตือนของระบบ อาร์กิวเมนต์ตัวแรกคือสตริงชื่อเรื่อง ออบเจ็กต์ options เป็นอาร์กิวเมนต์ตัวที่สอง และรับพร็อพเพอร์ตีต่าง ๆ เช่น body (ข้อความรอง), icon (URL ของภาพ) และ tag สำหรับป้องกันการแสดงรายการซ้ำ วิธีนี้จะทำงานได้ก็ต่อเมื่อสิทธิ์เป็น "granted"

ตัวเลือกสำคัญของการแจ้งเตือน ได้แก่ body สำหรับข้อความอธิบายใต้ชื่อเรื่อง, icon สำหรับภาพขนาดเล็ก, badge สำหรับไอคอนขาวดำขนาดเล็กที่แสดงในพื้นที่การแจ้งเตือนของ OS, image สำหรับภาพขนาดใหญ่ที่แทรกในเนื้อหา, tag เพื่อแทนที่การแจ้งเตือนก่อนหน้าที่มีแท็กเดียวกัน และ requireInteraction: true เพื่อให้การแจ้งเตือนคงอยู่จนกว่าผู้ใช้จะดำเนินการ

อินสแตนซ์ Notification จะทำให้เกิดเหตุการณ์หลายรายการ ได้แก่ onclick ซึ่งเกิดขึ้นเมื่อผู้ใช้คลิกการแจ้งเตือน (ใช้เพื่อโฟกัสหน้าต่างและนำทาง), onclose ซึ่งเกิดขึ้นเมื่อการแจ้งเตือนถูกปิด และ onerror ซึ่งเกิดขึ้นหากมีปัญหาในการสร้างการแจ้งเตือน ให้ผูกตัวจัดการเหตุการณ์กับอินสแตนซ์ที่คืนค่ามาหลังจากเรียกใช้ new Notification()

เก็บอินสแตนซ์ Notification ที่คืนค่าไว้ในตัวแปร แล้วเรียกใช้ notification.close() เพื่อปิดการแจ้งเตือนด้วยโปรแกรม วิธีนี้มีประโยชน์สำหรับการแจ้งเตือนที่เกี่ยวข้องกับเวลา ซึ่งจะหมดความสำคัญหลังผ่านไประยะหนึ่ง ใช้ร่วมกับ setTimeout เพื่อปิดโดยอัตโนมัติหลังจากผ่านไปไม่กี่วินาที

Notifications API ต้องใช้บริบทที่ปลอดภัย บนหน้า HTTP ค่า typeof Notification === 'undefined' อาจเกิดขึ้น หรือ API อาจถูกปิดใช้งานทั้งหมด ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ มาตรการนี้ช่วยป้องกันเว็บไซต์ที่เป็นอันตรายไม่ให้ส่งข้อความระบบปลอมจำนวนมากรบกวนผู้ใช้ ให้ตรวจสอบความพร้อมใช้งานก่อนใช้งานเสมอ

ฮุก useNotifications สามารถเปิดให้ใช้งานได้สองเมธอด ได้แก่ requestPermission() และ showNotification(title, options) ภายในฮุกจะติดตามสถานะสิทธิ์ปัจจุบันและอัปเดตสถานะหลังจากขอสิทธิ์ คอมโพเนนต์จึงเรียกใช้ showNotification ได้โดยไม่ต้องกังวลเรื่องการตรวจสอบสิทธิ์ เพราะฮุกจัดการเรื่องนี้ไว้ภายในแล้ว

API การมองเห็นหน้าเว็บเปิดให้ใช้งาน document.hidden และเหตุการณ์ visibilitychange การแจ้งเตือนเหมาะสมที่สุดเมื่อผู้ใช้ไม่ได้กำลังดูแท็บนั้นอยู่ ตรวจสอบ document.hidden === true ก่อนแสดงการแจ้งเตือน เพื่อหลีกเลี่ยงการแจ้งเตือนซ้ำซ้อนเมื่อหน้าเว็บอยู่เบื้องหน้าอยู่แล้ว

Notifications API ที่แสดงในที่นี้ใช้สำหรับการแจ้งเตือนที่หน้าเว็บเรียกใช้ภายในเครื่องเอง สำหรับการแจ้งเตือนแบบพุชที่มาถึงแม้ปิดหน้าเว็บแล้ว คุณต้องใช้ Push API ร่วมกับเซอร์วิสเวิร์กเกอร์ เซอร์วิสเวิร์กเกอร์จะรับเหตุการณ์พุชและเรียกใช้ self.registration.showNotification() จากเบื้องหลัง

ค่าใดต่อไปนี้ NOT เป็นค่าที่ถูกต้องของ Notification.permission

Notification.permission อาจเป็น granted, denied หรือ default ให้ขอสิทธิ์เมื่อผู้ใช้ดำเนินการเสมอ ไม่ใช่เมื่อโหลดหน้า ใช้ new Notification(title, options) เพื่อสร้างการแจ้งเตือน และจัดการ onclick เพื่อโฟกัสหน้าต่าง ใช้ร่วมกับ API การมองเห็นหน้าเว็บเพื่อแสดงการแจ้งเตือนเฉพาะเมื่อแท็บถูกซ่อน