Priorisierungssystem für Push-Benachrichtigungssymbole – 4 Fallback-Ebenen

Haben Sie schon einmal gesehen, dass Push-Benachrichtigungen von einer Website mit einem unangemessenen Symbol angezeigt wurden? Unter Windows erscheint bell.svg, auf Mobilgeräten erscheint das Favicon. Dies liegt daran, dass es keine eindeutige Symbolpriorität gibt – das System sendet lediglich das in den Einstellungen konfigurierte Standardsymbol.

Idealerweise sollten Benachrichtigungen über neue Artikel jedoch eine Miniaturansicht des Artikels oder zumindest das erste Bild des Artikelinhalts anzeigen. Nur wenn es wirklich nicht vorhanden ist, greifen Sie auf das Standardsymbol oder Favicon zurück.

Das Problem

Im Plugin Browser Push Notifications, das ich erstellt habe, kann die Konfiguration des Standardbenachrichtigungssymbols nur mit einer statischen URL gefüllt werden. Als Ergebnis:

• Alle Benachrichtigungen verwenden dasselbe Symbol (bell.svg)
• Es gibt keinen visuellen Kontext zum beworbenen Artikel
• Auf verschiedenen Geräten können Symbole aufgrund des Betriebssystem-Fallbacks unterschiedlich angezeigt werden

4-Level-Fallback-System

Die Lösung: Jedes Mal, wenn eine Push-Benachrichtigung mit einer Artikel-URL gesendet wird, sucht das System automatisch nach dem Symbol in der folgenden Prioritätsreihenfolge:

Die Funktionsweise ist einfach: Wenn die Push-Benachrichtigungs-API eine Anfrage mit einer Artikel-URL erhält, extrahiert sie den Slug aus der URL, fragt die Datenbank ab, um den Beitrag zu finden, und überprüft dann das Miniaturbild. Wenn ein Miniaturbild vorhanden ist, verwenden Sie es sofort. Andernfalls führen Sie den regulären Ausdruck <img src="..."> aus dem Inhalt aus, um das erste Bild zu erfassen. Wenn es immer noch nicht vorhanden ist, greifen Sie auf die Konfiguration zurück.

Implementierung

Auf dem /api/push/send.php-Endpunkt besteht die Logik nur aus wenigen Zeilen:

// Auto-resolve icon: thumbnail → first image → default → favicon
if (empty($icon) && $url !== '') {
    $slug = extract_slug_from_url($url);
    $post = query_post_by_slug($slug);

    if ($post->thumbnail) {
        $icon = $post->thumbnail;
    } elseif (first_image_from_content($post->content)) {
        $icon = $first_image;
    }
}

if (empty($icon)) {
    $icon = get_default_icon_setting();
}
if (empty($icon)) {
    $icon = get_favicon_setting();
}

Mit diesem System wird die Miniaturansicht jedes über den Planer veröffentlichten Artikels automatisch in der Push-Benachrichtigung angezeigt. Keine zusätzliche Konfiguration erforderlich – stellen Sie einfach sicher, dass die Push-API mit der richtigen Artikel-URL aufgerufen wird.

Schlussfolgerung

Dieses 4-stufige Fallback-System stellt sicher, dass Push-Benachrichtigungen immer mit dem entsprechenden Symbol angezeigt werden. Die Priorität der Artikel-Miniaturansichten bietet einen besseren visuellen Kontext als dasselbe Glockensymbol. Und wenn der Artikel überhaupt kein Miniaturbild hat, gibt es immer noch einen Fallback auf das Website-Favicon, sodass es nie leer ist.

Der vollständige Code für dieses Plugin kann unter github.com/adammuizweb/browser-push eingesehen werden.