Changing the chrome badge on web push notification sending with PHP

Question

I am having an issue with om my code about changing the badge (the small icon) on web push notification.

There is this wonderful site that shows the live example and also displays source code. I couldn't figure out why there he was able to change the badge and I didn't. I did a broad search on the Internet and couldn't find a solution.

This is my PHP code:

<?php
$url = 'https://fcm.googleapis.com/fcm/send';

$YOUR_API_KEY = MY_KEY;

$YOUR_TOKEN_ID = THE_CLIENT_TOKEN;

$request_body = [
    'to' => $YOUR_TOKEN_ID,
    'notification' => [
        'title'         => 'Title test',
        'body'          => 'Body Test',
        'icon'          => 'https://tests.peter.sh/resources/icons/4.png',
        'click_action'  => 'https://www.google.com',
        'badge'         => 'https://i.imgur.com/9QFB20F.png',
        // 'badge'      => 'https://tests.peter.sh/resources/icons/11.png',
    ],
    'data' => [
        // 'Nick'           => 'Mario',
    ],
];

$fields = json_encode($request_body);

$request_headers = [
    'Content-Type: application/json',
    'Authorization: key=' . $YOUR_API_KEY,
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_HTTPHEADER, $request_headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$response = curl_exec($ch);
curl_close($ch);

//echo $response;
?>

When I send notification from 'peter.sh' Notification Generator site I got this badges, like i want (on my android phone):

The badges as shown by peter.sh site, and just as I want them to be displayed on mine

But when I send it with my code I get the regular chrome badge :

The badges as shown on my site when I can't change them from chrome badges to mine

Why the badge doesn't change according to my code? I am sending the badge property...

Answer 1

Please see here for a complete explantion on how to make badges on chrome PWAs work. It specifies the image format of the badge image as well as the required message payload. https://stackoverflow.com/a/66688393/11222505