Heute geht es mal nicht nur um WordPress sondern um Browser-Benachrichtigungen und wie man diese für seine eigene Projekte verwenden kann. Dazu erzähle ich dir kurz wofür man sie bspw. nutzen kann und wie du deine eigene Benachrichtigung mit Javascript und jQuery erstellst.

Anwendungszwecke

Für Browser-Benachrichtigungen gibt es unzählige Anwendungszecke. Viele Websites nutzen dies, um Besucher darüber zu informieren, dass es neue Inhalte für sie gibt. Das gute ist, dass man die Benachrichtigungen auch anzeigen lassen kann, wenn der Tab gerade nicht aktiv ist.

Innerhalb von WordPress könnte man das gut für Benachrichtigungen zu neuen Beiträgen verwenden. Oder aber auch für Administratoren, die darüber informiert werden wollen, ob es neue Kommentare für einen ihrer Beiträge gibt.

Wie du siehst, gibt es unterschiedliche und so ziemlich unendlich viele Anwendungsmöglichkeiten für Benachrichtigungen. Ich selbst nutze sie für administrative Sachen, damit ich den Tab nicht ständig aktiv haben muss, um über etwas benachrichtigt zu werden.

Wichtig ist, dass die Benachrichtigungen nur funktionieren, wenn der Tab auch offen ist. Er muss nicht aktiv, aber zumindest im Browser offen sein. Also du kannst den Tab jederzeit wechseln und trotzdem benachrichtigt werden. Nur funktionieren die Benachrichtigungen nicht mehr, wenn du den Tab gänzlich schließt.

Codeschnipsel

(function($) {
    "use strict";

    const MeineBenachrichtungen = {
        /**
         * Hiermit initialisieren wir unsere Benachrichtigungen.
         */
        initNotifications: function() {
            let permission = Notification.permission;

            if ( permission === "granted" ) {
                this.showNotification();
            } else if( permission === "default" ) {
                this.requestPermissionAndShowNotification();
            }
        },
        /**
         * Hiermit fragen wir den Nutzer nach der Erlaubnis und zeigen die Notification.
         */
        requestPermissionAndShowNotification: function() {
            let self = this;

            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    self.showNotification();
                }
            });
        },
        /**
         * Hiermit zeigen wir eine Benachrichtigung. Der Inhalt kann über die
         * Variablen gesetzt werden.
         */
        showNotification: function() {
            /**
             * Kommentar entfernen, wenn die Benachrichtigung nur gezeigt werden soll,
             * wenn der Tab nicht aktiv aber offen ist.
             */
            if ( document.visibilityState === "visible" ) {
                // return;
            }

            let title = "Meine Benachrichtung";
            let message = "Dies ist der Text der meine Benachrichtigung beschreibt.";
            let notification = new Notification(title, { body: message });

            notification.onclick = function() {
                notification.close();
                window.parent.focus();
            };
        },
    };

    /**
     * Wir initialisieren unsere Benachrichtigungen nur, wenn der Browser sie unterstützt.
     */
    if ( typeof Notification !== "undefined" ) {
        MeineBenachrichtungen.initNotifications();
    } else {
        console.log("Dieser Browser unterstützt keine Benachrichtigungen.");
    }

})(jQuery);Code-Sprache: JavaScript (javascript)

Das Beispiel hat den jQuery-Container mit am Start, damit du das Beispiel direkt ohne Probleme in WordPress verwenden kannst.

Ansonsten findest du hier kein jQuery. Der Code sollte ohne den jQuery-Container, daher auch wunderbar ohne jQuery funktionieren.