25. April 2023

So kannst du Push-Mitteilungen von deiner Website versenden

Push-Mitteilungen oder Browser-Benachrichtigungen sind eine coole Möglichkeit die User einer Website auch dann zu erreichen, wenn sie gerade nicht auf der Website sind. Push-Nachrichten funktionieren in allen aktuellen Desktop-Browsern, auf Android-Smartphones und seit April 2023 auch endlich auf iOS (iOS 16.4) – allerdings mit einer Einschränkung: Die Website muss als WebApp „installiert“ sein.

Beispiele für einen sinnvollen Einsatz sind z.B.:

Benachrichtungen bei News, Angeboten, Aktionen oder neuen Veröffentlichungen
Hinweise über bevorstehende Termine im Kalender
regelmäßige Erinnerungen
ein Hinweis, eine bestimmte Aufgabe auf einer Website oder im Intranet zu erledigen, z.B. Arbeitszeiten eintragen

Die Integration von Push-Nachrichten in eine Website bedarf einiger Schritte und ist aufwändiger als ich anfangs angenommen hatte. Wenn du dich an diesem Tutorial orientierst, wirst du in kurzer Zeit in der Lage sein, Push-Mitteilungen in deine Website oder Web-App zu integrieren.

Um Push-Nachrichten versenden zu können, benötigst du zwangsläufig einen Web-Push-Dienst. Google bietet diesen Dienst in „Firebase“ kostenlos an.

Die Schritte im Überblick

Anmeldung bei Google Firebase
Erstellen eines neuen Projekts
Registrieren der WebApp
Abrufen der Config-Daten
Erstellen eines Service-Workers mit den Config-Daten
Erstellen eines Demo-Seite mit den Config-Daten, bzw. Einbinden des JavaScripts in die Web-App
Testen
PHP-Script zum Speichern der Tokens
Generieren eines Server-Keys
PHP-Script für den Versand der Nachrichten
ToDo: PHP-Script zum Löschen der Tokens

Schritt für Schritt

Anmeldung bei Google Firebase

Melde dich auf https://firebase.google.com/ mit deinem Google-Konto an und klick auf „Go to console“.

Erstelle dort ein neues Projekt…

… und gib dem Projekt einen Namen.

Wähle jetzt, dass du Firebase zu deiner Web-App hinzufügen möchtest und registriere die App mit einem App-Nickname.

Im folgenden Schritt erhältst du die config-Daten für deine App.

Erstelle jetzt, unabhängig davon in welchem Verzeichnis deine App zum Einsatz kommt, ein JavaScript-File im root deines Webservers – den Service-Worker: www.example.de/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');

const config = {
    apiKey: "##################################",
    authDomain: "##################################",
    projectId: "##################################",
    storageBucket: "##################################",
    messagingSenderId: "##################################",
    appId: "##################################"
};

firebase.initializeApp(config);

const messaging = firebase.messaging();

Anschließend erstellst du eine Demo-Seite mit folgendem Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Push-Notifications-Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="Notification Demo">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <style>body{padding:20px;font-family: monospace;}</style>
  </head>
<body>

  <p><b>Token:</b><br><span id="token"></span></p>
  <p><b>Message:</b><br><span id="message"></span></p>
  <p><b>Error:</b><br><span id="error"></span></p>
  <p><b>Settings</b><br>
    <input type="checkbox" id="permissionswitch">
    <label for="permissionswitch">Enable notification</label>
  </p>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script type="module">

const firebaseConfig = {
    apiKey: "##################################",
    authDomain: "##################################",
    projectId: "##################################",
    storageBucket: "##################################",
    messagingSenderId: "##################################",
    appId: "##################################"
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging(); 

function getPermission(){
  messaging.requestPermission().then(function () {
          $('#message').html("Notification permission granted.");
          $('#permissionswitch').attr('checked', 'checked')
          return messaging.getToken();
      })
      .then(function(token) {
          $('#token').html(token);
          //TO DO: save token
      })
      .catch(function(error) {
          $('#error').html(error);
      });
}

getPermission();

$('#permissionswitch').change(function() {
  if ($('#permissionswitch').is(':checked')) {
    getPermission();
  } else {
    //TO DO: delete token
  }
}); 

</script>

</body>
</html>

Wenn du die Seite jetzt im Browser aufrufst, sollte die Aufforderung „Benachrichtigung anzeigen“ erscheinen. Falls deine Web-App auch auf iOS-Geräten laufen soll, benötigst du einen Button oder eine Checkbox um die Zustimmungsaufforderung zu triggern.

Nachdem du auf „Zulassen“ geklickt hast, wird dir ein Token angezeigt.

Kopiere dieses Token in deine Zwischenablage und wechsle zurück in die Firebase-Konsole und klicke auf „Einbeziehen > Messaging > Erste Kampagne erstellen > Firebase Notifications-Nachrichten“. Trage dort einen Titel und einen Text ein und klicke auf „Testnachricht senden“.

Dort fügst du das Token aus der Zwischenablage ein und klickst auf „Test“.

Und schon erhältst du deine erste Push-Nachricht:

Tipp: Achte beim Testen auf dem Mac darauf, dass du in den Systemeinstellungen > Mitteilungen > Chrome „Mitteilungen erlauben“ ausgewählt hast und das das dein Mac sich nicht im „Nicht stören“ oder „Schlafen“-Modus befindet. 🙂

Natürlich wollen wir die Mitteilungen nicht immer über die Firebase-Konsole verschicken, sondern idealerweise für automatische Mitteilungen nutzen. Dafür benötigen wir 2 PHP-Scripts:

ein Script das die Tokens der User, die dem Empfang von Mitteilungen zugestimmt haben, in einer Datenbank speichert.
Ein Script, das den Versand der Push-Nachricht triggert.

In diesem Beispiel setze ich für das Speichern der Daten SleekDB ein. Und um das Beispiel so einfach und übersichtlich wie möglich zu halten, speichern wir hier nur das Token. Wenn du User-spezifische Nachrichten pushen willst, muss der Eintrag noch um eine User-ID ergänzt werden.

Erstelle eine Datei „newtoken.php“ mit folgendem Code:

<?php

if (!$_POST['token']){ echo 'no token'; exit(); }

require_once "sleekdb/SleekDB.php";

$databaseDirectory = __DIR__ . "/db";
$currentstore = new \SleekDB\Store("data", $databaseDirectory);

$token = htmlspecialchars($_POST['token'], ENT_QUOTES);

$tokens = $currentstore->findBy(["token", "=", $token]);

if (count($tokens) == 0){
    $item = ['token' => $token];
    $currentitem = $currentstore->insert($item);
    echo 'token saved';
} else {
    echo 'token exists'; 
}

?>

Anschließend ergänzt du den folgenden Code in der index.html:

$.ajax({
    method: 'post',
    processData: false,
    contentType: false,
    cache: false,
    data: tokendata,
    enctype: 'multipart/form-data',
    url: 'newtoken.php',
    success: function (response) {
        console.log(response); 
    }
});

Um jetzt eine Nachricht an alle User zu schicken, benötigen wir noch ein PHP-Skript, für das wir wiederum einen Server-Key benötigen. Der Server-Key bekommst du hier:

Ruf die Projekteinstellungen deines Projektes in Firebase auf, wechsle dort auf „Cloud Messaging“ und klick neben „Cloud Messaging API“ auf die 3 Punkte.

Akiviere in der Google Cloud-Console das Cloud Messaging.

Wechsle zurück zu Firebase. Dort findest du jetzt einen Serverschlüssel, der in folgendem Script eingesetzt wird.

<?php

    $title = "Hello World";
    $body = "Lorem ipsum dolor sit amet.";

    function sendNotification($title, $body, $token){

    $url = "https://fcm.googleapis.com/fcm/send";
    $serverKey = '##################################';

    $notification = array('title' => $title , 'body' => $body, 'sound' => 'default', 'badge' => '1');
    $arrayToSend = array('to' => $token, 'notification' => $notification, 'priority'=>'high');
    $json = json_encode($arrayToSend);

    $headers = array();
    $headers[] = 'Content-Type: application/json';
    $headers[] = 'Authorization: key='. $serverKey;

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST,"POST");
    curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
    curl_setopt($ch, CURLOPT_HTTPHEADER,$headers);

    $response = curl_exec($ch);

    if ($response === FALSE) {
        die('FCM Send Error: ' . curl_error($ch));
    }

    curl_close($ch);

    }   

    require_once "sleekdb/SleekDB.php";

    $databaseDirectory = __DIR__ . "/db";
    $currentstore = new \SleekDB\Store("data", $databaseDirectory);
    $items = $currentstore->findAll();

    foreach ($items as $item) {
        $token = $item["token"];
        sendNotification($title, $body, $token);
    }

?>

Mit diesem Script, wird an alle User eine Nachricht mit dem Titel „Hello World“ geschickt. Wie diese Nachricht getriggert wird, ist abhängig vom Einsatzzweck. In vielen Fällen ergibt wahrscheinlich ein Cronjob Sinn. Falls dein Server oder Hoster keine Cronjobs unterstüzt, könntest du www.cronjob.de nutzen.

Dieser Artikel wird in den nächsten Tagen noch ergänzt.

To Do: Tokens löschen, Notification Sound, Icon, Badge

Nächster Artikel

So kannst du Push-Mitteilungen von deiner Website versenden

Die Schritte im Überblick

Schritt für Schritt

Kostenlose Vektor-Emojis 😀 👍

RoundTrip – Routenplaner für den „Traveling Salesman“

So kannst du ein 360°-Panorama in eine Website einbauen

Chat GPT programmiert jQuery-PlugIn

Mit simplegmaps kannst du individuelle Google Maps mit mehreren Markern ganz einfach erstellen

So kann man den letzten Teil einer URL als Variablenwert / GET-Parameter in PHP nutzen

Schreibe einen Kommentar Antworten abbrechen