⚡App Features

Push Notifications einrichten

Nutzer zurueckholen mit Push Nachrichten

Push Notifications sind der direkteste Kanal zu deinen Nutzern. Keine Algorithmen, kein Spam-Ordner. Deine Nachricht landet direkt auf dem Sperrbildschirm. Hier ist wie du das in deine App einbaust.

Pro-Tip — Der schnelle Weg
Sende maximal 2 Push-Nachrichten pro Tag. Jede Notification die keinen echten Mehrwert bietet fuehrt dazu dass Nutzer die Berechtigung entziehen.
Seite 1
1

Firebase Projekt erstellen

Geh auf console.firebase.google.com und erstelle ein neues Projekt. Aktiviere Cloud Messaging unter den Projekteinstellungen. Du bekommst einen Server Key fuer dein Backend.

2

Firebase SDK einbinden

Installiere Firebase in deinem Frontend. Initialisiere die App mit deiner Config und registriere den Messaging Service Worker.

npm install firebase


// lib/firebase.ts
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";


const app = initializeApp({ /* deine Config */ });
const messaging = getMessaging(app);
3

Permission anfragen

Frag den Nutzer um Erlaubnis fuer Notifications. Wichtig: Frag nicht beim ersten Besuch. Warte bis der Nutzer einen Grund hat, zum Beispiel nach einer Bestellung oder Anmeldung.

const permission = await Notification.requestPermission();
if (permission === "granted") {
 const token = await getToken(messaging);
 // Token an dein Backend senden
 await fetch("/api/save-token", { method: "POST", body: JSON.stringify({ token }) });
}
4

Backend-Versand einrichten

Speichere die Device-Tokens in deiner Datenbank. Nutze firebase-admin im Backend um Nachrichten gezielt oder an alle zu senden.

import admin from "firebase-admin";


await admin.messaging().send({
 token: userDeviceToken,
 notification: {
 title: "Neue Nachricht",
 body: "Du hast eine Antwort erhalten"
 }
});
5

Service Worker fuer Background

Erstelle firebase-messaging-sw.js im public-Ordner. Dieser Service Worker empfaengt Nachrichten auch wenn die App geschlossen ist und zeigt die Notification an.

// public/firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js");


firebase.initializeApp({ /* Config */ });
firebase.messaging();
Seite 2
Warum das funktioniert
  • Push Notifications haben bis zu 90 Prozent Zustellrate
  • Kein Algorithmus filtert deine Nachrichten weg
  • Re-Engagement Raten sind 3x hoeher als bei E-Mails
  • Kostenloser Kanal mit direktem Zugang zum Nutzer
Tipps
  • Permission erst nach einer sinnvollen Aktion anfragen, nicht beim Seitenaufruf
  • Personalisierte Nachrichten haben dreifach hoehere Klickraten
  • Teste auf verschiedenen Browsern, Safari hat eigene Einschraenkungen
  • Nutze Topics um Nutzer in Gruppen zu benachrichtigen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen