Does anyone know if it is possible to style the native Chrome Notification (API)?

Question

Hello, I’ve been asked to use Chrome’s native Notification (API) to display a notification to the user as soon as they enter the system (I know I could use other modes, but I’ve been asked to use this).

• This notification is created in JS and makes a request in PHP that returns data from a query.
• The file I consult is the notification-point-query.php which appears in the code shown just below.

I wonder if it is possible to style this Window that is opened. I would like to, for example, change the background-color, color, font-size, among others...

Do you know if this is possible ? I searched hard, but found nothing talking about it.

Below is the code I use to create this notification window:

$(document).ready(function() {
  let chamar = minhaNotificacao();

});

document.addEventListener('DOMContentLoaded', function() {
  if (!Notification) {
    alert("As notificações no desktop não estão disponíveis para o seu navegador. Tente o Chrome");
    return;
  }

  if (Notification.permission !== "granted") {
    Notification.requestPermission();
  }
});

function minhaNotificacao() {
  if (Notification.permission !== "granted") {
    Notification.requestPermission();
  } else {
    $.ajax({
      url: "../banco/notificacoes-pontuais/notificacoes-pontuais-consulta.php",
      data: {
        fonte: 'aocarregar'
      },
      type: "POST",
      async: true

    }).done(function(data) {

        var notification = new Notification('Notificação diária', {
          icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
          body: 'Você possui: \nLembretes de eventos para hoje: ' + data.eventos_lembretes + '\nLembretes de Tarefas: ' + data.eventos_tarefas + '\nEventos Vencidos: ' + data.eventos_vencidos,

        });

      }
    }

Below, I show how the notification appears when called:

Thank you!

Answer 1

You can check here the customization options:
https://developer.mozilla.org/en-US/docs/Web/API/notificacoes

and compatibilities:
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Since you must provide an object with these quoted properties, unless the API interpreted HTML in the body field, there is no field to change the layout, and the body field is only a string.

And this standardization is necessary for the proper functioning of the API and to preserve the user, imagine if you could put CSS in the notifications, it would open up a possibility to make the notifications more aggressive, you don’t even need to comment on javascript.