การใช้การแจ้งเตือนข้อความ HTML5 (Web Notification)

ฉันเขียนบทความมากมายเกี่ยวกับ HTML5 แต่ฉันมักจะรู้สึกเสมอว่าต้องอ่าน API ระดับสูงที่เกี่ยวข้อง มีเพียงการทำความเข้าใจระบบและคิดถึงปัญหาจากระดับที่สูงกว่าเท่านั้นที่เราจะได้ผลสองเท่าโดยใช้ความพยายามเพียงครึ่งเดียว

เรามาลองตัวอย่างที่ง่ายที่สุดก่อน เปิดเครื่องมือสำหรับนักพัฒนา chrome วางโค้ดลงไปแล้วรันโดยตรง:

 การแจ้งเตือนใหม่ ('การแจ้งเตือนข้อความของ Jartto/', { dir: 'rtl', body: 'นี่คือข้อความที่ส่งผ่านการแจ้งเตือนทางเว็บเพื่อทดสอบ!', ไอคอน: 'https://raw.githubusercontent.com / chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

ไม่มีข้อความแจ้งเตือน เกิดอะไรขึ้น? ไม่ต้องกังวลอ่านต่อ

ตามตัวอย่างข้างต้น เราดำเนินการแล้ว แต่เปิดใช้งานกล่องพุชข้อความไม่สำเร็จ ในเวลานี้ คุณต้องตรวจสอบว่าผู้ใช้ได้รับอนุญาตหรือไม่ เข้าไปที่คอนโซล: > Notification.permission

ในไม่ช้าเราจะพบว่าการอนุญาตผู้ใช้ดั้งเดิมเป็น default เนื่องจากไม่ทราบตัวเลือกของผู้ใช้ พฤติกรรมของเบราว์เซอร์จึงเหมือนกับ denied ซึ่งก็คือการปฏิเสธ

เมื่อเห็น API ระดับสูงของ HTML5 มักมีข้อกังวลอยู่เสมอ แม้ว่าตัวอย่างจะดีและใช้งานง่าย แต่ความเข้ากันได้นั้นเป็นคำถามที่ควรค่าแก่การพิจารณา

อย่างที่คุณเห็น โดยพื้นฐานแล้วเบราว์เซอร์ทั้งหมดรองรับ ยกเว้น iOS Safari และ Opera Mini ดังนั้นแอปพลิเคชันมือถือจึงต้องระมัดระวัง

4. เอกสาร API

ก่อนอื่นมาจัดเรียง API อย่างเป็นระบบกันก่อน มันง่ายมาก เพียงใช้เวลา 5 นาทีกับมัน

กรณีการใช้งาน:

 ให้การแจ้งเตือน = การแจ้งเตือนใหม่ (ชื่อ, ตัวเลือก)

พารามิเตอร์:

title: ชื่อการแจ้งเตือนที่จะแสดงอย่างแน่นอน

ตัวเลือก: วัตถุที่ได้รับอนุญาตให้ตั้งค่าการแจ้งเตือน มันมีคุณสมบัติดังต่อไปนี้:

• dir: ทิศทางของข้อความ ค่าของอาจเป็นอัตโนมัติ (อัตโนมัติ), ltr (จากซ้ายไปขวา) หรือ rtl (จากขวาไปซ้าย)
• lang: ระบุภาษาที่ใช้ในการแจ้งเตือน สตริงนี้ต้องถูกต้องในเอกสารแท็กภาษา BCP 47
• body: สตริงเพิ่มเติมที่แสดงในการแจ้งเตือน
• แท็ก: ระบุ ID การแจ้งเตือนเพื่อให้สามารถรีเฟรช แทนที่ หรือลบการแจ้งเตือนได้เมื่อจำเป็น
• ไอคอน: URL ของรูปภาพที่จะใช้แสดงไอคอนการแจ้งเตือน

คุณสมบัติ:

Notification.permission: สตริงที่ระบุสถานะการอนุญาตของการแสดงการแจ้งเตือนปัจจุบัน ค่าที่เป็นไปได้ ได้แก่:

• denied (ผู้ใช้ปฏิเสธการแสดงการแจ้งเตือน)
• granted (ผู้ใช้อนุญาตให้แสดงการแจ้งเตือน)
• default (เนื่องจากไม่ทราบตัวเลือกของผู้ใช้ เบราว์เซอร์จะทำงานเหมือนกับเมื่อ denied )

วิธี:

• Notification.onclick: จัดการเหตุการณ์การคลิก ซึ่งจะถูกทริกเกอร์ทุกครั้งที่ผู้ใช้คลิกที่การแจ้งเตือน
• Notification.onshow: จัดการเหตุการณ์การแสดงซึ่งจะถูกทริกเกอร์เมื่อมีการแสดงการแจ้งเตือน
• Notification.onerror: จัดการเหตุการณ์ข้อผิดพลาด ซึ่งจะถูกทริกเกอร์เมื่อใดก็ตามที่การแจ้งเตือนพบข้อผิดพลาด
• Notification.onclose: จัดการเหตุการณ์การปิดซึ่งจะถูกทริกเกอร์เมื่อผู้ใช้ปิดการแจ้งเตือน
• Notification.requestPermission(): ใช้สำหรับหน้าปัจจุบันเพื่อนำไปใช้กับผู้ใช้เพื่อขออนุญาตแสดงการแจ้งเตือน
• Notification.close(): ใช้สำหรับปิดการแจ้งเตือน

Notification.requestPermission วิธีนี้สามารถเรียกได้ตามพฤติกรรมของผู้ใช้เท่านั้น (เช่น เหตุการณ์ onclick) และไม่สามารถเรียกโดยวิธีอื่นได้

ตาม API ข้างต้น มาเขียนตัวอย่างที่สมบูรณ์:

 ฟังก์ชั่น notifyMe(){ // ตรวจสอบก่อนว่าเบราว์เซอร์รองรับ if (!(Notification in window)) { alert(This browser does not support desktop allowance); } // ตรวจสอบว่าผู้ใช้ตกลงที่จะรับการแจ้งเตือนหรือไม่ หาก (Notification. การอนุญาต = == ได้รับ) { // ถ้าไม่เป็นไร มาสร้างการแจ้งเตือน var alert = การแจ้งเตือนใหม่(สวัสดี!); } // ไม่เช่นนั้นเราจะต้องได้รับอนุญาตจากผู้ใช้รายอื่นถ้า (Notification.permission !== 'denied ') { Notification.requestPermission(function (permission){ // หากผู้ใช้ตกลง คุณสามารถส่งการแจ้งเตือนให้พวกเขาได้หาก (permission === ได้รับ) { var alert = new Notification(Hi there!); } }); ในที่สุด , หากการดำเนินการมาถึงจุดนี้ แสดงว่าผู้ใช้ปฏิเสธที่จะอนุญาตการแจ้งเตือนที่เกี่ยวข้อง // ด้วยความเคารพ เราไม่ควรรบกวนพวกเขาอีกต่อไป}

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network