Signatur
Beschreibung
Die Instanz-Eigenschaft image des Notification-Interfaces gibt die URL des Bildes zurück, das beim Erzeugen der Benachrichtigung in der Option image übergeben wurde. Dabei handelt es sich um ein großes Inhaltsbild, etwa eine Produktvorschau, ein Kartenausschnitt oder ein Foto-Thumbnail. Es wird meist unterhalb von Titel und Text dargestellt.
Zu unterscheiden ist sie von icon (kleines Symbol neben dem Text) und badge (monochromes Symbol z. B. in der Android-Statusleiste). Sie eignet sich für reichhaltige Push-Benachrichtigungen, etwa bei Nachrichten-Apps, Online-Shops oder Social-Media-Diensten.
Die Eigenschaft ist nur lesbar. Das Bild lässt sich nachträglich nicht mehr ändern. Wer ein anderes Bild anzeigen will, erzeugt eine neue Benachrichtigung, am besten mit demselben tag, damit sie die alte ersetzt. Wurde kein Bild angegeben, ist der Wert ein leerer String.
Rückgabewert
"".Beispiele
Benachrichtigung mit Bild erzeugen und URL auslesen
const zeigeAngebot = async () => {
const erlaubnis = await Notification.requestPermission();
if (erlaubnis !== 'granted') return;
const n = new Notification('Tagesangebot', {
body: 'Kopfhörer heute 30 % günstiger!',
icon: '/img/logo-64.png',
image: '/img/angebote/kopfhoerer.jpg'
});
console.log(n.image);
};
zeigeAngebot();Unterstützung prüfen (Feature Detection)
const unterstuetztBilder = 'image' in Notification.prototype;
const optionen = {
body: 'Neues Foto in deinem Album',
icon: '/img/avatar.png'
};
// Bild nur anhängen, wenn der Browser es darstellen kann
if (unterstuetztBilder) {
optionen.image = '/uploads/foto-123.jpg';
} else {
optionen.body += ' – jetzt ansehen';
}
console.log('image unterstützt:', unterstuetztBilder);Im Service Worker: Push mit Bild anzeigen und beim Klick auswerten
// sw.js
self.addEventListener('push', (event) => {
const daten = event.data?.json() ?? {};
event.waitUntil(
self.registration.showNotification(daten.titel ?? 'Neuigkeit', {
body: daten.text,
image: daten.bildUrl,
tag: 'news',
data: { url: daten.link }
})
);
});
self.addEventListener('notificationclick', (event) => {
const n = event.notification;
console.log('Angeklicktes Bild:', n.image || '(kein Bild)');
n.close();
event.waitUntil(clients.openWindow(n.data.url));
});Leerer String ohne Bild
const n = new Notification('Erinnerung', { body: 'Meeting in 5 Minuten' });
console.log(JSON.stringify(n.image));
// Versuch, den Wert zu setzen, wird ignoriert
n.image = '/img/anderes.png';
console.log(JSON.stringify(n.image));// Wichtig · Fallstricke
- Browser-Kompatibilität: Die Eigenschaft ist experimentell und wird praktisch nur von Chromium-Browsern unterstützt (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari kennen sie nicht und ignorieren die Konstruktor-Option
image. Dort liefertn.imageundefined. Das Bild sollte daher nie die einzige Informationsquelle sein. - Darstellung hängt vom Betriebssystem ab: Auch in Chrome entscheidet das System (Windows-Info-Center, macOS-Mitteilungszentrale, Android), ob und wie groß das Bild erscheint. Unter macOS mit nativen Benachrichtigungen wird es oft gar nicht angezeigt.
- Nur lesbar: Eine Zuweisung wird stillschweigend ignoriert, im Strict Mode gibt es keinen Fehler, weil nur ein Getter existiert. Um das Bild zu ändern, eine neue Benachrichtigung mit gleichem
tagerzeugen. - Relative URLs werden zu absoluten URLs aufgelöst. Im Service Worker ist dabei dessen Skript-URL die Basis.
- Performance und Datenschutz: Das Bild wird beim Anzeigen geladen. Große Dateien verzögern die Benachrichtigung, empfohlen ist etwa ein Seitenverhältnis von 2:1 mit ca. 720 px Breite. Bilder von fremden Servern verraten deren Betreibern, wann eine Benachrichtigung angezeigt wurde.
- Voraussetzung ist ein sicherer Kontext (HTTPS) und die Berechtigung
Notification.permission === 'granted'.