Vorwort: Als Front-End-Entwickler achte ich beim Surfen im Internet immer auf einige neuartige Funktionen. Ich verwende bei der Arbeit immer Teambition und erhalte immer Benachrichtigungen ... Deshalb werde ich heute diese H5-Funktion studieren ...
1. Instanzieren Sie eine Benachrichtigung let n = new Notification( Dies ist eine Benachrichtigungsnachricht, //Dies ist der erforderliche Titel und der Benachrichtigungstitel, der angezeigt wird { icon: xxx.png, // Dieses Symbol wird verwendet, um das linke Bild im Benachrichtigungstext anzuzeigen: Hallo, ich bin xxx, // Die Inhaltszeichen im Benachrichtigungsverzeichnis: auto, // Der Richtungswert des Textes umfasst: auto (automatisch), ltr (von links nach rechts), rtl (von rechts nach links) Tag: gxlself / / Geben Sie eine ID für diese Benachrichtigungsnachricht an, Wird zum Aktualisieren, Entfernen, Ersetzen und für andere Vorgänge in dieser Benachrichtigungsnachricht verwendet. // long: en-US // Das Feld „lang“ muss auf https://tools.ietf.org/html/bcp47 verweisen. Dies ist nicht erforderlich und wurde auch durchgeführt keine Auswirkung. .. // ... // Weitere optionale Eigenschaften finden Sie unten in den Instanzeigenschaften}) Greifen Sie auf die entsprechenden Instanzeigenschaften zu:n.actions // Ein schreibgeschütztes Array von NotificationAction-Objekten. Jedes Objekt beschreibt eine einzelne Aktion, die der Benutzer in einer Benachrichtigung auswählen kann.
n.image // URL des Bildes, das als Teil der Benachrichtigung angezeigt wird
n.badge // Die URL des Bildes, das zur Darstellung der Benachrichtigung verwendet wird, wenn nicht genügend Platz für die Anzeige der Benachrichtigung selbst vorhanden ist.
n.permission // Es gibt drei Werte: granted , denied oder default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // Boolescher Wert. Ob die vorherige Benachrichtigung ersetzt werden soll, wenn eine neue erscheint. Wenn es auf „true“ gesetzt ist, bedeutet dies eine Ersetzung, was bedeutet, dass nur eine Benachrichtigung der aktuellen Markierung angezeigt wird. Ist Ihnen hier das aktuelle Markup aufgefallen? Das ist richtig, damit der true -Parameter funktioniert, tag必须den Attributwert festlegen.
n.requireInteraction // Boolescher Wert, bezieht sich darauf, ob die Benachrichtigung aktiv bleibt, bis der Benutzer auf die Benachrichtigung klickt oder diese abbricht, anstatt sie automatisch zu schließen.
n.silent // Boolescher Wert. Ob beim Erscheinen der Benachrichtigung ein Ton ertönen soll. Der Standardwert false , was still bedeutet.
n.timestamp //Der Zeitpunkt, zu dem die Benachrichtigung erstellt wird oder verwendet werden kann.
n.data // Alle mit der Benachrichtigung verbundenen Datentypen.
n.vibrate // Wenn die Benachrichtigung angezeigt wird, der Vibrationsmodus, der von der Vibrationshardware des Geräts benötigt wird. Der sogenannte Vibrationsmodus bezieht sich auf ein Array, das die Wechselzeit beschreibt, die die Anzahl der Millisekunden der Vibration bzw. Nichtvibration darstellt und weiterhin alterniert. [200, 100, 200] bedeutet beispielsweise, dass das Gerät 200 Millisekunden lang vibriert, dann 100 Millisekunden lang anhält und dann 200 Millisekunden lang vibriert. (mobile Version)
n.sound // String. Audioadresse. Zeigt die Benachrichtigung über das Vorhandensein einer abzuspielenden Soundressource an.
n.sticky // Die Adsorption von Benachrichtigungen ist nicht leicht zu löschen ... (mobile Version)
n.noscreen // Boolescher Wert. Legt fest, ob die Anzeige von Benachrichtigungsinformationen auf dem Bildschirm beendet werden soll. Der Standardwert ist false , was bedeutet, dass der Benachrichtigungsinhalt auf dem Bildschirm angezeigt werden soll. (mobile Version)
1> Klickereignis des onclick-Benutzers auf Benachrichtigungsinformationen
2> Onshow-Ereignis wird ausgelöst, nachdem die Benachrichtigungsmeldung angezeigt wird
3> onerror ist ein Ereignis, das ausgelöst wird, wenn ein Fehler auftritt.
4> Behandlung des Onclose-Close-Ereignisses
2. Welche Eigenschaften/Methoden hat das Benachrichtigungsobjekt? Verwenden Sie die Fensterobjektausgabe in der Konsole, um es zu öffnen und anzuzeigen:Es ist zu beachten, dass die Methode requestPermission() nur im Notification-Objekt gültig ist, nicht im Instanzobjekt!!! Diese Methode wird verwendet, um beim Benutzer die Berechtigung zum Anzeigen von Benachrichtigungen zu beantragen, und kann vom Benutzer nur aktiv aufgerufen werden ( Es kann beim Laden der Seite aufgerufen und auf den Benutzer angewendet und später gesendet werden ...)
Die Methoden, die Instanzobjekte besitzen, sind:
(1). close() wird zum Schließen von Benachrichtigungsnachrichten verwendet. -> Sie können der Onshow-Methode auch einen verzögerten Aufruf hinzufügen, um die Benutzererfahrung zu verbessern ...
(2). addEventListener() wartet auf Ereignisse (diese allgemeine Methode)
(3). RemoveEventListener deinstalliert Überwachungsereignisse (allgemein, wie oben).
(4). „dispatchEvent“-Versandereignis (wie oben)
Schreiben Sie als Nächstes einen JS-Test. Wenn Sie Google Chrome verwenden, wird empfohlen, Benachrichtigungen in den Einstellungen anzuzeigen und die lokale Dienstadresse hinzuzufügen, um Benachrichtigungen zuzulassen.
Der http-Domänenname ist jedoch in Google Chrome standardmäßig geschlossen und darf nicht geändert werden. Überprüfen Sie die Google Chrome-Konsole auf eine Warnmeldung --->
index.js:78 [Veraltung] Die Benachrichtigungs-API darf nicht mehr von unsicheren Ursprüngen verwendet werden. Sie sollten erwägen, Ihre Anwendung auf einen sicheren Ursprung wie HTTPS umzustellen. Weitere Informationen finden Sie unter https://goo.gl/rStTGz.
Na gut, das Hinzufügen eines https-Zertifikats ist wirklich giftig ... Obwohl das Hinzufügen dieser Funktion zu Ihrer Homepage in Firefox nur ein Vergnügen sein kann ...
(Tencent Cloud verfügt über ein kostenloses einjähriges SSL-Zertifikat, Sie können es selbst installieren ...)
// index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ constructionor(){ this. isNotificationSupported = Benachrichtigung im Fenster } isPermissionGranted(){ return Notification.permission === 'granted'; } requestPermission(){ if(!this.isNotificationSupported){ return; return; } if (!this.isPermissionGranted()) { return } var n = new Benachrichtigung (gxlself sendet Grüße an Sie, { icon: 'gxlself.png', body: 'Willkommen bei Ihnen, ich bin sehr dankbar! Klicken Sie, um zu meiner Blog-Seite zu springen ~' }); .log('gxlself hat Benachrichtigungsinformationen gesendet'); setTimeout(function() { n.close(); }, 5000); location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' gxlself-Nachrichtenfenster geschlossen') } } }Dies ist die Anzeige des Effekts nach der Ausführung des Firefox-Browsers:
Werfen wir einen Blick auf die Auswirkung der lokalen Ausführung von Google: (Der Domainname wurde standardmäßig abgefangen und deaktiviert. Dies wurde oben erläutert und wird nicht wiederholt.)
Der Effekt von Google ist eigentlich ziemlich gut, na ja ... es ist nur so, dass https mich blockiert hat ...
------- Desktop-App -----------
Wenn Sie Benachrichtigungen in einer geöffneten Webanwendung verwenden möchten, stellen Sie sicher, dass Sie die Berechtigung desktop-notification zu Ihrer Manifestdatei hinzufügen. Benachrichtigungen können auf jeder Berechtigungsebene verwendet werden, gehostet oder höher.
Berechtigungen: { Desktop-Benachrichtigung: {} }Diese Benachrichtigung macht mehr Spaß und ist auch ein wichtiger Teil des zukünftigen Versendens von Nachrichten. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird, und ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.