บางครั้งเราจะเห็นข้อความแจ้งนี้ที่มุมขวาล่างของเดสก์ท็อป:
พรอมต์เดสก์ท็อปนี้เป็นเทคโนโลยีการแจ้งเตือน Web Push ใหม่ของ HTML5
เทคโนโลยีการแจ้งเตือนทางเว็บช่วยให้เพจสามารถออกการแจ้งเตือนที่จะแสดงในระดับระบบภายนอกเพจได้ สามารถมอบประสบการณ์ที่ดีขึ้นให้กับผู้ใช้ และพวกเขาสามารถรับการแจ้งเตือนข้อความจากเพจได้แม้ว่าพวกเขาจะยุ่งกับงานอื่น ๆ เช่น การแจ้งเตือนอีเมลใหม่ หรือการแจ้งเตือนข้อความที่ได้รับในห้องสนทนาออนไลน์ เป็นต้น
PS: นอกจาก IE แล้ว เบราว์เซอร์สมัยใหม่หลักๆ ทั้งหมดยังรองรับขั้นพื้นฐานสำหรับการพุชบนเดสก์ท็อปอีกด้วย
เริ่ม
ในการสร้างการแจ้งเตือนข้อความนั้นง่ายมาก เพียงใช้คลาสการแจ้งเตือนใต้วัตถุหน้าต่าง
var n = การแจ้งเตือนใหม่ (การกดเดสก์ท็อป, { ไอคอน: 'img/icon.png', body: 'นี่คือการแจ้งเตือนบนเดสก์ท็อปครั้งแรกของฉัน', รูปภาพ: 'img/1.jpg'});จากนั้นคุณจะเห็นการแจ้งเตือนของภาพหน้าจอที่ฉันถ่ายด้านบนปรากฏขึ้นบนเดสก์ท็อปของระบบ
PS: การแจ้งเตือนข้อความจะมีผลเฉพาะเมื่อมีการเข้าถึงเพจผ่านบริการบนเว็บ หากคุณดับเบิลคลิกเพื่อเปิดไฟล์ในเครื่องโดยตรง จะไม่มีผลใดๆ กล่าวคือ ไฟล์ของคุณจะต้องเปิดบนเซิร์ฟเวอร์ แทนที่จะใช้เบราว์เซอร์โดยตรงเพื่อเปิดไฟล์ในเครื่อง
แน่นอนว่าอาจเป็นไปได้ว่าคุณไม่เห็นอะไรเลย ดังนั้นอย่ากังวลและอ่านต่อ
ไวยากรณ์พื้นฐานแน่นอน ก่อนที่คุณจะต้องการแสดงการแจ้งเตือนข้างต้น คุณจำเป็นต้องเข้าใจไวยากรณ์พื้นฐานของการแจ้งเตือน:
ให้ myNotification = การแจ้งเตือนใหม่ (ชื่อ, ตัวเลือก);
หัวเรื่อง: กำหนดชื่อเรื่องสำหรับการแจ้งเตือนที่จะแสดงที่ด้านบนของหน้าต่างการแจ้งเตือนเมื่อมีการทริกเกอร์
ออบเจ็กต์ตัวเลือก (ไม่บังคับ) มีตัวเลือกการตั้งค่าแบบกำหนดเองที่ใช้กับการแจ้งเตือน
ตัวเลือกที่ใช้กันทั่วไปคือ:body: เนื้อหาของการแจ้งเตือน ซึ่งจะแสดงใต้ชื่อ
แท็ก: คล้ายกับ ID ของการแจ้งเตือนแต่ละรายการเพื่อให้สามารถรีเฟรช แทนที่ หรือลบการแจ้งเตือนได้เมื่อจำเป็น
ไอคอน: ไอคอนเพื่อแสดงการแจ้งเตือน
รูปภาพ: URL ของรูปภาพที่จะแสดงในเนื้อหาการแจ้งเตือน
ข้อมูล: ข้อมูลใด ๆ ที่คุณต้องการเชื่อมโยงกับการแจ้งเตือน นี่อาจเป็นประเภทข้อมูลใดก็ได้
renotify: บูลีนที่ระบุว่าผู้ใช้ควรได้รับการแจ้งเตือนหรือไม่หลังจากการแจ้งเตือนใหม่เข้ามาแทนที่การแจ้งเตือนเก่า ค่าเริ่มต้นเป็นเท็จ ซึ่งหมายความว่าจะไม่ได้รับการแจ้งเตือน
needInteraction: บ่งชี้ว่าการแจ้งเตือนควรยังคงทำงานอยู่จนกว่าผู้ใช้จะคลิกหรือปิด แทนที่จะปิดโดยอัตโนมัติ ค่าเริ่มต้นเป็นเท็จ
เมื่อมีการเรียกใช้โค้ดนี้ เบราว์เซอร์จะถามผู้ใช้ว่าจะอนุญาตให้ไซต์แสดงการแจ้งเตือนข้อความหรือไม่ ดังแสดงในรูปต่อไปนี้:
การแจ้งเตือนจะแสดงเฉพาะเมื่อผู้ใช้คลิกอนุญาตและอนุญาตการแจ้งเตือน
อนุญาตจะทราบได้อย่างไรว่าผู้ใช้คลิกอนุญาตหรือบล็อก?
อินสแตนซ์การแจ้งเตือนของหน้าต่างมีฟังก์ชัน requestPermission เพื่อรับสถานะการอนุญาตของผู้ใช้:
// ก่อนอื่น เราตรวจสอบว่าเราได้รับอนุญาตให้แสดงการแจ้งเตือนหรือไม่ // ถ้าไม่ เราจะขออนุญาตหาก (window.Notification && Notification.permission !== ได้รับ) { Notification.requestPermission(function (status) { //status is สถานะการอนุญาต // หากผู้ใช้คลิกอนุญาต สถานะจะเป็น 'อนุญาต' // หากผู้ใช้คลิกปิดใช้งาน สถานะจะเป็น 'ปฏิเสธ' // สิ่งนี้จะทำให้เราใช้การแจ้งเตือนการอนุญาตหากอยู่ใน Chrome/Safari (Notification.permission !== สถานะ) { Notification.permission = สถานะ;หมายเหตุ: หากผู้ใช้คลิกปุ่มปิดที่มุมขวาบนของการอนุญาต ค่าของสถานะจะเป็นค่าเริ่มต้น
หลังจากนั้นเราเพียงแต่ต้องพิจารณาว่าจะให้ค่าสถานะหรือไม่เพื่อตัดสินใจว่าจะแสดงการแจ้งเตือนหรือไม่
เหตุการณ์การแจ้งเตือนแต่การแสดงกล่องข้อความเพียงอย่างเดียวนั้นไม่น่าสนใจ ดังนั้นการแจ้งเตือนข้อความควรมีการโต้ตอบในระดับหนึ่ง และควรเกี่ยวข้องกับเหตุการณ์ก่อนและหลังการแสดงข้อความ
การแจ้งเตือนได้กำหนดชุดฟังก์ชันเหตุการณ์ตั้งแต่เริ่มต้น นักพัฒนาสามารถใช้ฟังก์ชันเหล่านี้เพื่อจัดการกับการโต้ตอบของผู้ใช้ได้อย่างครอบคลุม:
มี: onshow, onclick, onerror, onclose
var n = การแจ้งเตือนใหม่ (การกดบนเดสก์ท็อป, { ไอคอน: 'img/icon.png', body: 'นี่คือการแจ้งเตือนบนเดสก์ท็อปครั้งแรกของฉัน'}); // ฟังก์ชั่น onshow จะถูกทริกเกอร์เมื่อกล่องข้อความปรากฏขึ้น // ตกลงทำ บันทึกข้อมูลบางส่วนและปิดกล่องข้อความเป็นประจำ n.onshow = function() { console.log('Display message box'); //ปิดกล่องข้อความหลังจากผ่านไป 5 วินาที setTimeout(function() { n.close(); } , 3000);};//ถูกเรียกเมื่อคลิกกล่องข้อความ //คุณสามารถเปิดมุมมองที่เกี่ยวข้อง ปิดกล่องข้อความและการดำเนินการอื่นๆ พร้อมกัน n.onclick = function() { console.log('คลิกข้อความ box'); // เปิดมุมมองที่เกี่ยวข้อง n.close();};//เมื่อมีข้อผิดพลาดเกิดขึ้น ฟังก์ชัน onerror จะถูกเรียก //หากไม่ได้รับอนุญาต ฟังก์ชัน onerror จะถูกดำเนินการด้วยเมื่อสร้าง อินสแตนซ์วัตถุการแจ้งเตือน n.onerror = function() { console.log('Message box error'); // Do other things}; // ฟังก์ชั่น onclose จะถูกเรียกเมื่อกล่องข้อความถูกปิด n.onclose = function() { console.log('Close the message box' ); //ทำอย่างอื่น};ตัวอย่างง่ายๆ
<!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>เอกสาร</title> </head> <body> <button>คลิกเพื่อเริ่มการแจ้งเตือน</button> < / body> <script> window.addEventListener(load, function() { // ก่อนอื่นมาตรวจสอบว่าเราได้รับอนุญาตให้ส่งการแจ้งเตือนหรือไม่ // ถ้าไม่เช่นนั้น เราจะขออนุญาตถ้า (window.Notification && Notification.permission !== ได้รับ) { Notice.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } }); } var button = document.getElementsByTagName(button)[0]; button.addEventListener (คลิก, ฟังก์ชั่น () { // สร้างการแจ้งเตือนหากผู้ใช้ยอมรับว่า (window.Notification && Notification.permission === ได้รับ) { var n = ใหม่ การแจ้งเตือน(สวัสดี!); } // หากผู้ใช้ไม่ได้เลือกว่าจะแสดงการแจ้งเตือนหรือไม่ // หมายเหตุ: เนื่องจากใน Chrome เราไม่สามารถระบุได้ว่าแอตทริบิวต์การอนุญาตมีค่าหรือไม่ จึงไม่ปลอดภัยที่จะ // ตรวจสอบว่าค่าของแอตทริบิวต์นี้ เป็นค่าเริ่มต้นอย่างอื่น if (window.Notification && Notification.permission !== ปฏิเสธ) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } // หากผู้ใช้ตกลงว่า (สถานะ === ได้รับ) { var n = การแจ้งเตือนใหม่ (สวัสดี!); } // มิฉะนั้น เราสามารถประนีประนอมและใช้การแจ้งเตือนในโหมดปกติได้ { alert(Hi!); // หากผู้ใช้ปฏิเสธที่จะยอมรับการแจ้งเตือน มิฉะนั้น { // เราสามารถประนีประนอมและใช้การแจ้งเตือนในโหมดปกติ (สวัสดี!); } }); </script></html>เมื่อเราเปิดอินเทอร์เฟซ แอปพลิเคชันการอนุญาตจะปรากฏขึ้น ถ้าเราคลิกอนุญาต จากนั้นคลิกปุ่ม การแจ้งเตือนจะถูกส่งไปยังเดสก์ท็อป และเราจะเห็นการแจ้งเตือนนี้ที่มุมขวาล่างของเดสก์ท็อป
ด้านบนเราเพียงแสดงข้อความ
ถ้า (สถานะ === ได้รับ) { var n = การแจ้งเตือนใหม่ (สวัสดี);}ตัวอย่างเช่น หากเรามีข้อความจำนวนมาก ฉันจะใช้ for loop เพื่อจำลองการแจ้งเตือนจำนวนมาก
สำหรับ (var i=0; i<10; i++) { var n = การแจ้งเตือนใหม่ (สวัสดี + i);}คุณจะเห็นว่ามีการแจ้งเตือน 10 รายการปรากฏขึ้น แต่ในบางกรณี การแสดงการแจ้งเตือนจำนวนมากอาจทำให้ผู้ใช้เจ็บปวดได้
ตัวอย่างเช่น หากแอปส่งข้อความแจ้งให้ผู้ใช้ทราบทุกข้อความที่เข้ามา เพื่อหลีกเลี่ยงไม่ให้เดสก์ท็อปของผู้ใช้ท่วมท้นด้วยการแจ้งเตือนที่ไม่จำเป็นหลายร้อยรายการ อาจจำเป็นต้องเข้าคิวข้อความที่ค้างอยู่
ดังนั้นจึงจำเป็นต้องเพิ่มแท็กในการแจ้งเตือนที่สร้างขึ้นใหม่
หากมีการแจ้งเตือนใหม่ที่มีแท็กเดียวกันกับการแจ้งเตือนก่อนหน้า การแจ้งเตือนใหม่จะแทนที่การแจ้งเตือนก่อนหน้า และเฉพาะการแจ้งเตือนล่าสุดเท่านั้นที่จะแสดงบนเดสก์ท็อป
ยังคงใช้ตัวอย่างข้างต้น คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์แท็กให้กับการแจ้งเตือนทริกเกอร์:
สำหรับ (var i = 0; i < 10; i++) { // ในที่สุด จะเห็นเฉพาะการแจ้งเตือนที่มีเนื้อหา สวัสดี! 9 var n = การแจ้งเตือนใหม่(สวัสดี! + i, {tag: 'soManyNotification'});} ในที่สุดการแจ้งเตือนข้อความเป็นคุณสมบัติที่ดี แต่ก็ไม่ได้ตัดทอนว่าบางไซต์ใช้ฟังก์ชันนี้ในทางที่ผิด เมื่อผู้ใช้อนุญาต พวกเขาจะส่งข้อความที่ไม่เป็นมิตรเป็นครั้งคราวและรบกวนการทำงานของผู้ใช้ ในขณะนี้ เราสามารถลบออกได้ การอนุญาตของไซต์ ปิดการใช้งานคุณสมบัติการแจ้งเตือนข้อความ
เราสามารถคลิกเครื่องหมายอัศเจรีย์ทางด้านซ้ายของช่องป้อนที่อยู่ของเบราว์เซอร์ และจะมีตัวเลือกการแจ้งเตือน และเราสามารถแก้ไขการอนุญาตได้ หรือมีตัวเลือกในการแก้ไขการแจ้งเตือนในหน้าการแจ้งเตือนและคุณสามารถแก้ไขการแจ้งเตือนการอนุญาตตามสถานการณ์เฉพาะได้
ดังนั้นจึงมีการใช้การแจ้งเตือนทางเว็บขั้นพื้นฐานที่สุด
สรุปข้างต้นเป็นวิธีการใช้งานฟังก์ชันการแจ้งเตือนทางเว็บบนเดสก์ท็อปใน HTML5 ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!