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

Asked

Viewed 98 times

0

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:

inserir a descrição da imagem aqui

Thank you!

  • Please, dear downvoter, show me where I went wrong on this question so maybe I can improve it or improve my next.

1 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.

  • Yes, brother. I had already accessed these links of yours. Actually these links don’t show anything about doing this. But I thought maybe there was a way.

  • I believe there is not, because if there were would say in the documentation. I believe there would be a Notification.background property with options pre-selected by them instead of letting you customize freely, or for example: Notification.body.style.font-size.

  • 2

    is a limitation of the API even, to avoid what has been mentioned, without this possibility some sites can already abuse with extremely annoying images and advertisements that are not even spoken, I have read the documentation and such function is barred even, if it could use other API then it could do anything but the native one allows in the maximum the Dialog Grande

  • 2

    here the reason https://stackoverflow.com/a/19834197/2741415 for example

  • Wow, guys. Thank you very much for the clarification.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.