PWA-Nutzlast und JSON ⇐ Php

[Guest]

Zum ersten Mal hier habe ich ein Problem mit PWA-Push-Benachrichtigungen.
Es ist eine mit PHP erstellte Chat-Seite.
Meine Push-Benachrichtigungen werden einwandfrei gesendet (auf dem Telefon und im Internet). Ich habe eine Push-Benachrichtigung.
Aber es gibt ein Problem mit dem Format der empfangenen Benachrichtigung.
Ich habe einen Benachrichtigungstext erhalten, der wie folgt formatiert ist:

Code: Select all

{
"title":"Nouveau message de Maman",
"body":"Test",
"icon":"/icons/icone-app-72.png",
"url":"/messagerie.php"
}

Aber das ist es, was ich erhalten möchte:

Nouveau message de maman
Testen
Symbole der App und Link beim Klicken auf die Benachrichtigung

Es scheint Es scheint sich um eine Art Parsing-Problem zu handeln, aber ich habe keine Ahnung, wo das Problem liegen könnte wie man es löst.
Die Nutzlast scheint das Problem zu sein, denn wenn ich versuche, nur die Funktion zu senden und keine Nutzlastinformationen zu übergeben, ist es in Ordnung.
Kann mir jemand helfen?

Code: Select all

$stmt = $pdo->prepare("SELECT endpoint, p256dh, auth FROM subscriptions WHERE user_id = ?");
$stmt->execute([$destinataire_id]);
$subscriptionData = $stmt->fetch(PDO::FETCH_ASSOC);

if ($subscriptionData) {
$subscription = Subscription::create([
'endpoint' => $subscriptionData['endpoint'],
'keys' => [
'p256dh' => $subscriptionData['p256dh'],
'auth' => $subscriptionData['auth'],
],
]);

$webPush = new WebPush([
'VAPID' => [
'subject' => 'mailto:no-reply@famillecoing.fr',
'publicKey' => VAPID_PUBLIC_KEY,
'privateKey' => VAPID_PRIVATE_KEY,
],
]);

// Payload spécifique pour la messagerie
$payload = json_encode([
'body' => 'Vous avez un nouveau message de ' . htmlspecialchars($_SESSION['nom']),
'icon' => '/icons/icone-app-72.png',
'url' => '/messagerie.php?utilisateur_id=' . $_SESSION['user_id'],
]);

$webPush->queueNotification($subscription, $payload);

foreach ($webPush->flush() as $report) {
if (!$report->isSuccess()) {
error_log("Erreur d'envoi (messagerie) : " . $report->getReason());
}
}
}

Und hier ist mein sw.js (Dienstleistungsarbeiter)

Code: Select all

self.addEventListener('push', (event) => {
console.log('Notification reçue.');

let data = {
body: 'Tu as une nouvelle notification.',
icon: '/icons/icone-app-72.png',
url: '/notifications.php', // URL par défaut pour redirection
};

try {
// Extraire les données envoyées par le serveur (si présentes)
if (event.data) {
const payload = event.data.json();
data = {
body: payload.body || data.body,
icon: payload.icon || data.icon,
url: payload.url || data.url,
};
}
} catch (error) {
console.error('Erreur lors du traitement du payload:', error);
}

const options = {
body: data.body,
icon: data.icon,
data: { url: data.url },
};

event.waitUntil(self.registration.showNotification('Notification', options));
});

self.addEventListener('notificationclick', (event) => {
event.notification.close();

if (event.notification.data && event.notification.data.url) {
event.waitUntil(clients.openWindow(event.notification.data.url));
}
});