Wie kann ich das Layout der OneSignal-Benachrichtigung anpassen?

1. Grundlegende Anpassungen über die OneSignal Dashboard
2. Anpassung über Benachrichtigungs-Payload
3. Design-Einschränkungen und plattformspezifische Unterschiede
4. Benachrichtigungen im Web Push per Service Worker anpassen
5. Fazit

OneSignal ist ein beliebter Service, um Push-Benachrichtigungen an Web- und Mobile-Anwendungen zu senden. Das Design beziehungsweise Layout der Benachrichtigungen wird dabei größtenteils vom Betriebssystem und Browser gesteuert und ist somit nur eingeschränkt beeinflussbar. Trotz dieser Einschränkungen gibt es jedoch einige Möglichkeiten, um das Aussehen der Benachrichtigung zu gestalten und anzupassen.

Grundlegende Anpassungen über die OneSignal Dashboard

Im OneSignal-Dashboard lassen sich grundlegende Einstellungen für das Erscheinungsbild von Benachrichtigungen vornehmen. Dazu gehört das Festlegen von Icon, Titel, Text und Banner-Bildern. Diese Elemente bestimmen den ersten visuellen Eindruck der Benachrichtigung. Sie können unter "Messages" oder beim Erstellen einer neuen Push-Nachricht individuelle Titel, Nachrichteninhalte und Symbole wählen, die dann in der Benachrichtigung erscheinen.

Das Icon ist besonders wichtig, da es entweder als kleines Icon oben links in der Benachrichtigung oder als App-Icon auf Mobilgeräten dargestellt wird. Das Banner-Bild wird auf unterstützten Plattformen als visuelles Highlight oberhalb der Nachricht eingeblendet und kann somit das Layout optisch aufwerten.

Anpassung über Benachrichtigungs-Payload

Wenn Sie Benachrichtigungen per API senden, können Sie zusätzliche Parameter im sogenannten Payload mitgeben, die das Layout beeinflussen. Dazu gehören neben Titel und Nachricht auch Parameter wie icon, large_icon, big_picture oder buttons.

Das large_icon wird typischerweise auf mobilen Geräten als ein größeres Symbol neben dem Text angezeigt, während big_picture ein großes Bild darstellt, das prominent in der Benachrichtigung gezeigt wird. Wichtig ist, dass diese Parameter je nach Plattform unterschiedlich unterstützt werden und somit nicht auf jedem Browser oder Gerät gleich aussehen.

Sie können außerdem interaktive Schaltflächen definieren, die unterhalb des Texts erscheinen und als Handlungsmöglichkeiten dienen (z. B. "Antworten", "Öffnen"). Dadurch wird die Benachrichtigung funktionaler und bietet einen erweiterten visuellen Aufbau.

Design-Einschränkungen und plattformspezifische Unterschiede

Das Layout der Push-Benachrichtigungen wird maßgeblich von den Betriebssystemen (z. B. Android, iOS, Windows) und Browsern (Chrome, Firefox, Safari) bestimmt. Diese Systeme kontrollieren, wie Benachrichtigungen dargestellt werden und erlauben nur begrenzte individuelle Gestaltung. Anders als bei Webseiten oder Apps können Sie CSS-artige Styles in den Benachrichtigungen nicht direkt verändern.

Das bedeutet, dass Farbe, Position von Text, Icon oder Bild sowie Schriftgröße und -art meist nicht frei wählbar sind. OneSignal bietet lediglich die Möglichkeit, durch die Auswahl von Icons, Bildern und Textinhalten das Layout innerhalb der vorgegebenen Darstellung anzupassen.

Benachrichtigungen im Web Push per Service Worker anpassen

Bei Web Push-Benachrichtigungen können Sie durch die Programmierung des Service Workers auf der Client-Seite Einfluss auf das Layout nehmen. Im Service Worker-Skript wird die Methode showNotification() verwendet, bei der Sie erweiterte Optionen mitgeben können.

Diese Optionen können neben dem Titel und dem Body der Nachricht auch ein icon, ein badge, ein image (großes Bild), sowie Aktionen (Buttons) enthalten. Außerdem kann man hier auch Anpassungen wie Vibrationsmuster, Tagging oder Chronologie (timestamp) hinzufügen, die das Verhalten und die visuelle Darstellung der Benachrichtigung verändern.

Ein Beispiel eines Service Worker Codes könnte so aussehen:

self.addEventListener(push, function(event) { const data = event.data.json(); const options = { body: data.body, icon: data.icon, badge: data.badge, image: data.image, actions: data.actions, }; event.waitUntil( self.registration.showNotification(data.title, options) );});

Dadurch können Sie je nach Logik unterschiedliche Icons, Bilder oder Schaltflächen anzeigen lassen und so variabler reagieren als mit einer statischen OneSignal-Einstellung. Auch die Sprache und Struktur kann so dynamisch beeinflusst werden.

Fazit

Das Layout von OneSignal-Benachrichtigungen lässt sich am besten über das Backend-Dashboard, die API-Payload und das Service Worker-Skript anpassen. Maßgebliche Einschränkungen ergeben sich jedoch durch die jeweiligen Browser und Betriebssysteme, die die Gestaltung stark vorgeben. Die beste Anpassung erreicht man durch geschickte Wahl der Icons, Bildern, Textinhalte und Schaltflächen, sowie eine intelligente Nutzung der Service Worker APIs bei Web Push.