Zum Hauptinhalt springen

Konfiguration von Push-Mitteilungen

Dieser Artikel liefert eine Anleitung für die Einrichtung eines Firebase Accounts für Web-Push-Notifications

Anni Wild avatar
Verfasst von Anni Wild
Vor über einer Woche aktualisiert

Firebase-Projekt anlegen

  1. Gehe auf https://console.firebase.google.com.

  2. Klicke auf „Projekt hinzufügen“.

  3. Gib einen Projektnamen ein und bestätige die Einstellungen.

ⓘ Optional: Verknüpfe das Projekt mit Google Analytics oder überspringe es.
​

Web-App in Firebase registrieren

  1. In den Projekteinstellungen → Tab „Allgemein“.

  2. Scrolle nach unten zu „Deine Apps“ → Klicke auf „App hinzufügen“ → wähle das Web-Symbol 🌐.

  3. Gib einen App-Namen ein und bestätige.

  4. Jetzt erhältst Du ein Firebase-Konfigurations-Snippet mit Werten wie
    ​apiKey, authDomain, projectId, messagingSenderId, appId.

Firebase Admin SDK JSON erzeugen

  1. In der Firebase Console → oben links auf das Zahnradsymbol → „Projekteinstellungen“.

  2. Wechsle zum Tab „Service Accounts“.

  3. Klicke auf „Neuen privaten Schlüssel generieren“ → dadurch erhältst Du eine JSON-Datei mit den Keys.
    ​

  • Diese Datei enthält Werte wie project_id, private_key, client_email.

  • Diese Datei speicherst Du später im Versandtool (das ist Deine firebase-adminsdk JSON).

Cloud Messaging aktivieren

  1. In den Projekteinstellungen → Tab „Cloud Messaging“.

  2. Dort findest Du die Sender ID (wichtig für Web Push).

  3. Scrolle weiter runter → „Web Push-Zertifikate“.

  • Hier kannst Du einen VAPID Key generieren.

  • Klicke auf „Generate key pair“ → danach erscheint Dein Public VAPID Key.

  • Diesen Key trägst Du in der folgenden junePushConfig.js ein.
    ​

Firebase JS-Konfigurationsdatei erstellen

Erstelle eine Datei junePushConfig.js mit der nachfolgenden Vorlage, in der die Firebase-Daten, der Vapid Key und der collectToken für JUNE hinterlegt werden:
​

var config = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  vapidKey: "",
  collectToken: ""
};

// universell verfügbar machen
if (typeof window !== "undefined") {
  window.__JUNE_PUSH_CONFIG__ = config;
}
if (typeof self !== "undefined") {
  self.__JUNE_PUSH_CONFIG__ = config;
}

  • Die Informationen erhältst du in den Projekteinstellungen / Allgemein:
    ​

  • Den Collect-Token findest du im API-Tab der entsprechenden Liste, in welche die Push-Anmeldungen laufen sollen:
    ​

Service Worker für Web-Push-Notifications einrichten

Um Push-Benachrichtigungen zuverlässig im Hintergrund empfangen zu können (auch wenn der Benutzer Ihre Seite geschlossen hat), muss eine spezielle Konfigurationsdatei – der Service Worker – im Root-Verzeichnis der Website platziert werden.
​

1. Service-Worker-Datei anfordern

Da viele Hosting-Plattformen das direkte Hochladen von .js-Dateien einschränken, stellen wir Dir die Service-Worker-Datei direkt zur Verfügung:

2. Speicherort und Upload

Die Datei muss exakt im Root-Verzeichnis (Stammverzeichnis) der Website liegen, da der Browser sie sonst nicht korrekt findet.

Wichtig: Überprüfe nach dem Upload, ob die Datei korrekt im Browser aufgerufen werden kann (z.B. durch Eingabe der vollständigen URL https://[Ihre Domain]/junePushSw.js).

Service-Hinweis: junePushConfig.js hochladen

Damit das June Push SDK weiß, mit welchem Deiner Firebase-Projekte es sich verbinden soll, muss die Konfigurationsdatei an einem bestimmten Ort verfügbar sein.
​

1. Datei zum Hochladen

  • Datei: junePushConfig.js

  • Inhalt: Die von Dir bereitgestellte Konfiguration mit Deinen Firebase-Schlüsseln, dem Vapidkey und dem Collect Token der Liste.

2. Speicherort und Upload

Die Datei muss exakt im Root-Verzeichnis (Stammverzeichnis) Deiner Website liegen. Wichtig: Der korrekte Speicherort ist entscheidend, da das HTML-Snippet die Datei sonst nicht finden kann und die Push-Registrierung fehlschlägt.

JUNE Token und Integration aufsetzen

1. Token initialisieren

Erstelle einen neuen Token: Administration / Tokens / +


Benenne den Token und füge unterhalb den Inhalt deiner zuvor heruntergeladenen Admin SDK JSON ein.
​


2. Integration anlegen

Erstelle eine neue Integration: Administration / Integrations / +
​


Fülle die Daten aus und wähle deine Liste sowie den initialisierten Token aus:


HTML-Snippet einfügen

Dieses HTML-Snippet wird in die Website eingebunden, damit Nutzer Push Notifications aktivieren können:
​

<button id="btn">Push Notifications aktivieren</button>

<script src="/junePushConfig.js"></script>
<script src="https://view.juneapp.com/june-lp-framework/dev/sdk/push_notifications_v2/js/junePushSdk.js"></script>

<script>
  const sdk = new JunePushSDK({
    vapidKey: window.__JUNE_PUSH_CONFIG__.vapidKey,
    collectToken: window.__JUNE_PUSH_CONFIG__.collectToken,
    disablePushNotificationInForeground: false,
    apiBaseUrl: 'https://engagement.juneapp.com'
  });

  document.getElementById("btn").addEventListener("click", async () => {
    const token = await sdk.register();
    console.log("FCM Token:", token);
  });

  sdk.listenToForegroundMessages(payload => {
    //alert("Neue Nachricht: " + payload.notification.title);
  });
</script>


​

Hat dies deine Frage beantwortet?