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 (am Telefon und im Web). Ich habe eine Push-Benachrichtigung.
Aber es gibt ein Problem mit dem Format der empfangenen Benachrichtigung.
Ich habe einen formatierten Benachrichtigungstext erhalten so:
{"title":Nouveau message de Maman ", body": "Test", "icon": /icons/icone-app- 72.png","url":"/messagerie.php"}
Ich möchte empfangen :

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

Es scheint ein Parsing-Problem zu sein, aber keine Ahnung, wo das Problem liegt und wie es gelöst werden kann.
Nutzlast scheint das Problem zu sein, denn wenn ich es versuche Senden Sie einfach die Funktion und geben Sie keine Informationen mit der Nutzlast weiter, das ist in Ordnung.
Kann mir jemand helfen?
Vielen Dank
$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 (Dienstleistungsmitarbeiter)
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));
}
});