Browser-Benachrichtigungsgenerator

Erstellen, testen und generieren Sie Code für Browser-Push-Benachrichtigungen. Konfigurieren Sie Optionen, sehen Sie Ergebnisse in der Vorschau und erhalten Sie gebrauchsfertigen JavaScript-Code.

Benachrichtigung testen

Zum generierten Code springen →

Vorschau

Welcome!

This is your notification message. Customize it to see how it looks.

Schnellvorlagen

Benachrichtigungskonfiguration

Kleines Symbol in der Benachrichtigung

Abzeichen-Symbol fuer die Benachrichtigung (nur Android)

Grosses Bild in der Benachrichtigung

Eindeutige ID zum Gruppieren oder Ersetzen aehnlicher Benachrichtigungen

Vibrationsmuster in Millisekunden, kommagetrennt (nur mobil)

Generierter Code

// Request notification permission
if ('Notification' in window && Notification.permission === 'default') {
  await Notification.requestPermission();
}

// Check if permission is granted
if (Notification.permission === 'granted') {
  const notification = new Notification('Welcome!', {
  "body": "This is your notification message. Customize it to see how it looks.",
  "tag": "notification-1",
  "vibrate": [
    200,
    100,
    200
  ]
});
  
  notification.onclick = () => {
    console.log('Notification clicked');
    notification.close();
  };
}

Browser-Unterstuetzung

Die Notifications API wird in Chrome, Firefox, Safari, Edge und Opera unterstuetzt. Einige Funktionen wie Vibration und Abzeichen sind mobilspezifisch und funktionieren moeglicherweise nicht auf allen Plattformen.

Share this tool

Help others discover Browser Notification Generator

Über den Browser-Benachrichtigungsgenerator

So funktioniert es

  • Konfigurieren Sie Benachrichtigungseigenschaften mit Live-Vorschau
  • Testen Sie Benachrichtigungen direkt in Ihrem Browser
  • Generieren Sie JavaScript-Code für die Implementierung
  • Passen Sie Titel, Text, Symbole und Verhalten an
  • Testen Sie verschiedene Benachrichtigungsmuster und -stile

Häufige Anwendungsfälle

  • Entwicklung von Webanwendungen mit Benachrichtigungen
  • Testen von Benachrichtigungsaussehen und -verhalten
  • Erstellen von Benutzerinteraktions-Benachrichtigungen
  • Implementierung von Push-Benachrichtigungs-Funktionen
  • Erlernen der Notifications API

Häufig gestellte Fragen

Wofür wird der Browser-Benachrichtigungsgenerator verwendet?

Der Browser-Benachrichtigungsgenerator ist ein Tool für Webentwickler zum Erstellen, Testen und Generieren von Code für Browser-Push-Benachrichtigungen. Sie können alle Benachrichtigungseigenschaften konfigurieren, eine Live-Vorschau sehen und gebrauchsfertigen JavaScript-Code erhalten.

Benötige ich spezielle Berechtigungen für Browser-Benachrichtigungen?

Ja, Browser-Benachrichtigungen erfordern die Erlaubnis des Benutzers. Benutzer müssen die Erlaubnis explizit erteilen, bevor Ihre Website Benachrichtigungen anzeigen kann. Das Tool zeigt den aktuellen Berechtigungsstatus an.

Welche Browser unterstützen die Notifications API?

Die Notifications API wird in modernen Browsern wie Chrome, Firefox, Safari, Edge und Opera weitgehend unterstützt. Einige Funktionen wie Vibrationsmuster und Abzeichen sind jedoch mobilspezifisch.

Kann ich das Symbol und die Bilder der Benachrichtigung anpassen?

Ja! Sie können URLs für mehrere Bildtypen angeben: ein kleines Symbol, ein Abzeichen (nur Android) und ein großes Bild im Benachrichtigungstext. Alle Bilder müssen über HTTPS-URLs zugänglich sein.

Wofür wird die 'tag'-Eigenschaft verwendet?

Die tag-Eigenschaft ist ein eindeutiger Bezeichner für Ihre Benachrichtigung. Wenn Sie eine neue Benachrichtigung mit demselben Tag wie eine vorhandene anzeigen, ersetzt die neue die alte, anstatt ein Duplikat zu erstellen. Dies ist nützlich, um Benachrichtigungs-Spam zu verhindern.

Wie funktionieren Vibrationsmuster?

Vibrationsmuster werden als kommagetrennte Zahlen in Millisekunden angegeben. Das Muster wechselt zwischen Vibration und Pause. Zum Beispiel bedeutet '200, 100, 200': vibrieren für 200ms, Pause 100ms, vibrieren für 200ms. Funktioniert nur auf mobilen Geräten.

Was bedeutet 'Interaktion erforderlich'?

Wenn 'Interaktion erforderlich' aktiviert ist, bleibt die Benachrichtigung sichtbar, bis der Benutzer sie explizit schließt oder darauf klickt. Ohne diese Option verschwinden Benachrichtigungen nach einigen Sekunden automatisch.

Kann ich Benachrichtigungen stumm schalten?

Ja, die Option 'Stumm' ermöglicht das Erstellen von Benachrichtigungen ohne Ton oder Vibration. Dies ist nützlich für nicht dringende Updates, die sichtbar, aber nicht störend sein sollen.

Wie implementiere ich den generierten Code auf meiner Website?

Kopieren Sie den generierten JavaScript-Code und integrieren Sie ihn in Ihre Webanwendung. Überprüfen Sie zunächst, ob der Browser Benachrichtigungen unterstützt, fordern Sie dann bei Bedarf eine Berechtigung an und erstellen Sie schließlich Benachrichtigungen mit Ihren konfigurierten Optionen.

Sind die von mir erstellten Benachrichtigungen privat und sicher?

Absolut! Alle Benachrichtigungstests finden vollständig in Ihrem Browser statt. Es werden keine Daten an externe Server gesendet. Das Tool ist für sicheres, lokales Testen konzipiert.

Kann ich Benachrichtigungen für Progressive Web Apps (PWA) testen?

Ja! Dieses Tool hilft Ihnen, die Notifications API zu testen, die eine Schlüsselfunktion von Progressive Web Apps ist. Service-Worker-basierte Push-Benachrichtigungen erfordern jedoch eine zusätzliche Einrichtung.

Warum erscheinen meine Testbenachrichtigungen nicht?

Wenn Benachrichtigungen nicht erscheinen, überprüfen Sie: 1) Die Berechtigung könnte verweigert sein, 2) Der Browser könnte im Nicht-stören-Modus sein, 3) Einige Browser zeigen keine Benachrichtigungen wenn DevTools geöffnet ist, 4) Verwenden Sie einen unterstützten Browser.

Share ToolsZone

Help others discover these free tools!

Diese Seite teilen

Browser-Benachrichtigungsgenerator | Kostenloses Web-Push-Tool