คำนำ: สำหรับ Front-End Developer ฉันมักให้ความสนใจกับฟังก์ชันใหม่ๆ เสมอเมื่อท่องเว็บ สำหรับฉัน ที่ใช้ Teambition ในที่ทำงานอยู่เสมอ ฉันมักจะได้รับการแจ้งเตือน... ดังนั้นวันนี้ฉันจะศึกษาฟังก์ชัน H5 นี้...
1. ตัวอย่างการแจ้งเตือน ให้ n = การแจ้งเตือนใหม่ ( นี่คือข้อความแจ้งเตือน // นี่คือชื่อที่ต้องการและชื่อการแจ้งเตือนที่จะแสดง { ไอคอน: xxx.png, // ไอคอนนี้ใช้เพื่อแสดงภาพด้านซ้ายในเนื้อหาการแจ้งเตือน: สวัสดี ฉันชื่อ xxx // อักขระเนื้อหาใน dir การแจ้งเตือน: auto, // ค่าทิศทางของข้อความประกอบด้วย: auto (อัตโนมัติ), ltr (ซ้ายไปขวา), แท็ก rtl (ขวาไปซ้าย): gxlself / / ให้พร้อม ID สำหรับข้อความแจ้งเตือนนี้ ใช้เพื่อรีเฟรช ลบ แทนที่ และการดำเนินการอื่นๆ ในข้อความแจ้งเตือนนี้ // long: en-US //ฟิลด์ lang จำเป็นต้องอ้างอิงถึง https://tools.ietf.org/html/bcp47 ซึ่งไม่จำเป็นและมี ไม่มีผลกระทบ .. // ... // ดูคุณสมบัติอินสแตนซ์ด้านล่างสำหรับคุณสมบัติเสริมอื่น ๆ}) เข้าถึงคุณสมบัติอินสแตนซ์ที่เกี่ยวข้อง:n.actions // อาร์เรย์ของออบเจ็กต์ NotificationAction แบบอ่านอย่างเดียว แต่ละออบเจ็กต์จะอธิบายการดำเนินการเดียวที่ผู้ใช้สามารถเลือกได้ในการแจ้งเตือน
n.image // URL ของรูปภาพที่แสดงเป็นส่วนหนึ่งของการแจ้งเตือน
n.badge // URL ของรูปภาพที่ใช้แสดงการแจ้งเตือนเมื่อมีพื้นที่ไม่เพียงพอที่จะแสดงการแจ้งเตือน
n.permission // มีสามค่า: granted denied หรือ default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // ค่าบูลีน ว่าจะแทนที่การแจ้งเตือนก่อนหน้าเมื่อมีการแจ้งเตือนใหม่ปรากฏขึ้นหรือไม่ หากตั้งค่าเป็นจริง หมายความว่าการแทนที่ ซึ่งหมายความว่าจะมีการแจ้งเตือนของเครื่องหมายปัจจุบันเพียงรายการเดียวเท่านั้นที่จะปรากฏขึ้น สังเกตเห็นมาร์กอัปปัจจุบันที่นี่ไหม ถูกต้อง เพื่อให้พารามิเตอร์ true ทำงานได้ tag必须ตั้งค่าแอตทริบิวต์
n.requireInteraction // ค่าบูลีนหมายถึงว่าการแจ้งเตือนยังคงทำงานอยู่จนกว่าผู้ใช้จะคลิกหรือยกเลิกการแจ้งเตือนแทนที่จะปิดโดยอัตโนมัติ
n.silent // ค่าบูลีน ควรมีเสียงเมื่อมีการแจ้งเตือนปรากฏขึ้นหรือไม่ ค่าเริ่มต้น false ซึ่งหมายถึงไม่มีเสียง
n.timestamp //เวลาที่การแจ้งเตือนถูกสร้างขึ้นหรือสามารถใช้งานได้
n.data // ข้อมูลประเภทใดก็ตามที่เกี่ยวข้องกับการแจ้งเตือน
n.vibrate // เมื่อการแจ้งเตือนปรากฏขึ้น โหมดการสั่นสะเทือนที่ฮาร์ดแวร์การสั่นสะเทือนของอุปกรณ์ต้องการ โหมดการสั่นสะเทือนที่เรียกว่าโหมดหมายถึงอาร์เรย์ที่อธิบายเวลาสลับ ซึ่งแสดงถึงจำนวนมิลลิวินาทีของการสั่นและไม่สั่นสะเทือนตามลำดับ และยังคงสลับกันต่อไป ตัวอย่างเช่น [200, 100, 200] หมายความว่าอุปกรณ์สั่นเป็นเวลา 200 มิลลิวินาที จากนั้นหยุดเป็นเวลา 100 มิลลิวินาที จากนั้นสั่นเป็นเวลา 200 มิลลิวินาที (เวอร์ชั่นมือถือ)
n.sound // สตริง ที่อยู่เสียง ระบุการแจ้งเตือนว่ามีทรัพยากรเสียงที่จะเล่น
n.sticky // การดูดซับการแจ้งเตือนไม่ใช่เรื่องง่ายที่จะล้าง... (เวอร์ชั่นมือถือ)
n.noscreen // ค่าบูลีน จะหยุดแสดงข้อมูลการแจ้งเตือนบนหน้าจอหรือไม่ ค่าเริ่มต้นคือ false ซึ่งหมายความว่าเนื้อหาการแจ้งเตือนควรแสดงบนหน้าจอ (เวอร์ชั่นมือถือ)
1> เหตุการณ์การคลิกของผู้ใช้ onclick เกี่ยวกับข้อมูลการแจ้งเตือน
2> เหตุการณ์ onshow เกิดขึ้นหลังจากข้อความแจ้งเตือนปรากฏขึ้น
3> onerror คือเหตุการณ์ที่จะถูกทริกเกอร์เมื่อพบข้อผิดพลาด
4> การจัดการเหตุการณ์ปิด onclose
2. ออบเจ็กต์การแจ้งเตือนมีคุณสมบัติ/วิธีการใดบ้าง ใช้เอาต์พุตออบเจ็กต์หน้าต่างในคอนโซลเพื่อเปิดและดู:เป็นที่น่าสังเกตว่าเมธอด requestPermission() ใช้ได้เฉพาะในออบเจ็กต์การแจ้งเตือน ไม่ใช่ออบเจ็กต์อินสแตนซ์!!! วิธีการนี้ใช้เพื่อนำไปใช้กับผู้ใช้เพื่อขอสิทธิ์ในการแสดงการแจ้งเตือน และผู้ใช้สามารถเรียกใช้ได้เท่านั้น ( สามารถเรียกได้ในเพจ onload แล้วนำไปใช้กับผู้ใช้แล้วส่งทีหลัง...)
วิธีการครอบครองโดยวัตถุตัวอย่างคือ:
(1) close() ใช้เพื่อปิดข้อความแจ้งเตือน -> คุณยังสามารถเพิ่มการโทรล่าช้าไปยังวิธี onshow เพื่อปรับปรุงประสบการณ์ผู้ใช้...
(2) addEventListener() รับฟังเหตุการณ์ (วิธีการทั่วไปนี้)
(3) RemoveEventListener ถอนการติดตั้งกิจกรรมการฟัง (ทั่วไป เช่นเดียวกับข้างต้น)
(4) เหตุการณ์การจัดส่ง DispatchEvent (เช่นเดียวกับข้างต้น)
จากนั้น ให้เขียนการทดสอบ js หากคุณใช้ Google Chrome ขอแนะนำให้แสดงการแจ้งเตือนในการตั้งค่าและเพิ่มที่อยู่บริการในพื้นที่เพื่ออนุญาตการแจ้งเตือน
อย่างไรก็ตาม ชื่อโดเมน http จะถูกปิดโดยค่าเริ่มต้นใน Google Chrome และไม่ได้รับอนุญาตให้เปลี่ยนแปลง ตรวจสอบคอนโซล Google Chrome เพื่อดูข้อความเตือน --->
index.js:78 [การคัดค้าน] API การแจ้งเตือนไม่สามารถใช้จากต้นทางที่ไม่ปลอดภัยได้อีกต่อไป คุณควรพิจารณาเปลี่ยนแอปพลิเคชันของคุณเป็นต้นทางที่ปลอดภัย เช่น HTTPS ดู https://goo.gl/rStTGz สำหรับรายละเอียดเพิ่มเติม
โอเค การเพิ่มใบรับรอง https นั้นเป็นพิษจริงๆ... แม้ว่าการเพิ่มฟังก์ชันนี้ลงในหน้าแรกของคุณจะสามารถเพลิดเพลินได้เฉพาะใน Firefox เท่านั้น...
(Tencent Cloud มีใบรับรอง SSL ฟรีหนึ่งปี คุณสามารถติดตั้งได้ด้วยตัวเอง...)
// index.jswindow.onload = function(){ la gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ Constructor(){ this. isNotificationSupported = การแจ้งเตือนในหน้าต่าง } isPermissionGranted(){ return Notification.permission === 'granted'; } requestPermission(){ if(!this.isNotificationSupported){ return; } Notification.requestPermission(status=>{ ให้สิทธิ์ = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { return; } if (!this.isPermissionGranted()) { return; } var n = ใหม่ การแจ้งเตือน(gxlself ส่งคำทักทายถึงคุณ, { icon : 'gxlself.png', body : 'ยินดีต้อนรับสู่ฉันรู้สึกขอบคุณมาก! คลิกเพื่อข้ามไปยังหน้าบล็อกของฉัน~' }); n.onshow = function () { console .log('gxlself ได้ส่งข้อมูลการแจ้งเตือน'); setTimeout(function() { n.close(); }, 5000); } n.onclick = function () { location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (ผิดพลาด) { console.log(err) } n.onclose = function () { console.log(' ปิดหน้าต่างข้อความ gxlself') } } }นี่คือการแสดงเอฟเฟกต์หลังจากใช้งานเบราว์เซอร์ Firefox:
มาดูผลกระทบของการใช้งาน Google ภายในเครื่องกัน: (ชื่อโดเมนถูกดักจับและปิดโดยค่าเริ่มต้น มีการอธิบายไว้ข้างต้นแล้วและจะไม่ทำซ้ำ)
เอฟเฟ็กต์ของ Google ค่อนข้างดีจริงๆ นะ... แค่ https บล็อกฉันเท่านั้น...
------- แอปเดสก์ท็อป -----------
เมื่อคุณต้องการใช้การแจ้งเตือนในแอปพลิเคชันเว็บที่เปิดอยู่ ตรวจสอบให้แน่ใจว่าได้เพิ่มสิทธิ์ desktop-notification ลงในไฟล์รายการของคุณ สามารถใช้การแจ้งเตือนในระดับสิทธิ์ใดก็ได้ โฮสต์หรือสูงกว่า
การอนุญาต: { การแจ้งเตือนบนเดสก์ท็อป:{} }การแจ้งเตือนนี้สนุกกว่า และยังเป็นส่วนสำคัญในการส่งข้อความในอนาคต ฝากบันทึกนี้ไว้... ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน และฉันก็หวังว่าทุกคนจะสนับสนุน VeVb Wulin Network