0

Olá, foi-me pedido que utilize a API de notificação (Notification) nativa do Chrome para exibir uma notificação para o usuário assim que ele entrar no sistema (sei que poderia utilizar outros modos, porém me foi pedido para utilizar isso).

  • Essa notificação é criada em JS e faz uma requisição no PHP que retorna dados de uma consulta.
  • O arquivo que eu faço a consulta é o notificacoes-pontuais-consulta.php que aparece no código mostrado logo abaixo.

Gostaria de saber se é possível estilizar essa Janela que é aberta. Gostaria de, por exemplo, mudar o background-color, color, font-size, entre outros...

Vocês sabem se isso é possível ? Procurei bastante, porém achei nada falando sobre o assunto.

Segue abaixo o código que utilizo para criação dessa janela de notificação:

$(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,

        });

      }
    }

Abaixo, mostro como a notificação aparece quando chamada:

inserir a descrição da imagem aqui

Obrigado!

1
  • Por favor, caro downvoter, me mostre onde errei nessa pergunta para que talvez eu possa melhorá-la ou melhorar minhas próximas. Commented 5/12/2019 às 20:41

1 Resposta 1

1

Você pode conferir aqui as opções de personalização:
https://developer.mozilla.org/pt-BR/docs/Web/API/notificacoes

e compatibilidades:
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Como você deve fornecer um objeto com essas propriedades citadas, a menos que a API interpretasse HTML no campo body, não existe nenhum campo para mudar o layout, e o campo body é somente uma string.

E essa padronização é necessária para o bom funcionamento da API e para preservar o usuário, imagina se pudesse botar CSS nas notificações, iria abrir uma possibilidade para fazer as notificações serem mais agressivas, não precisa nem comentar javascript.

5
  • Sim, brother. Eu já havia acessado esses seus links. Realmente nesses links não mostra nada sobre fazer isso. Mas achei que talvez houvesse um jeito. Commented 5/12/2019 às 20:39
  • Eu acredito que não há, pois se houvesse diria na documentação. Acredito que haveria uma propriedade Notification.background com opções pre-selecionadas por eles ao invés de deixar personalizar livremente, ou por ex: Notification.body.style.font-size.
    – Danielr
    Commented 5/12/2019 às 20:44
  • 2
    é uma limitação da API mesmo, para evitar o que foi mencionado, sem está possibilidade alguns sites já conseguem abusar com imagens extremamente irritantes e propagandas que nem se fala, já li a documentação atraz disso e tal função é barrada mesmo, se pudesse usar outras API aí poderia fazer qualquer coisa mas a nativa permite no máximo o Dialog Grande
    – flourigh
    Commented 5/12/2019 às 22:15
  • 2
    aqui o motivo stackoverflow.com/a/19834197/2741415 por exemplo
    – flourigh
    Commented 5/12/2019 às 22:32
  • Poxa, pessoal. Valeu mesmo pelos esclarecimentos. Commented 5/12/2019 às 23:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .