0

nao consigo fazer funcionar a notificação no chrome, apenas no mozila, alguem tem uma solução????

        //Verifica e solicita se o usuario tem permissao para utilizar as notificações do Chrome
        document.addEventListener('DOMContentLoaded', function () {
            if (!Notification) {
                alert('Erro no sistema de notificação, navegador não suportado.');
                return;
            }

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

        function minhaNotificao() {
            if (Notification.permission !== "granted") {
                Notification.requestPermission();
            }
            else {
                var notificacao = new Notification("Titulo da notificacao", {
                    icon: 'go.jpg', //img
                    body: 'Mensagem'
                });

                notificacao.onclick = function () {
                    window.open('http://google.com/'); //site
                };
            }
        }

        minhaNotificao();
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>Notificações</h1>
    <input type="button" value="Notificar!" onclick="minhaNotificao()">
   
</body>

</html>

2

1 Resposta 1

1

Falta um else acaso não esteja permitido o uso disto pelo usuário, aliais todo seu código esta sem sentido, tem um evento que executa após o DOMContentLoaded e outro que executa deliberadamente quando o script é carregado.

Para resumir tem que usar o callback no Notification.requestPermission para checar as permissões quando não garantido e se for diferente de granted você pode informar ao usuário que ele negou o acesso, ai só resetando as configurações no navegador para o site espeficio para que funcione.

function notificar()
{        
    var notificacao = new Notification('Titulo da notificacao', {
        icon: 'go.jpg', //img
        body: 'Mensagem'
    });

    notificacao.onclick = function () {
        window.open('http://google.com/'); //site
    };
}

function semPermissao()
{
    console.warn('O usuário não permitiu notificações');
}

function minhaNotificao()
{
    if (!('Notification' in window)) {
        console.warn("Este browser não suporta notificações de Desktop");
    } else if (Notification.permission === 'granted') {
        notificar();
    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
            if (permission === 'granted') {
                notificar();
            } else {
                semPermissao();
            }
        });
    } else {
        semPermissao();
    }
}

document.addEventListener('DOMContentLoaded', minhaNotificao);

Note que no Gecko 46 (provavelmente Firefox 45) o uso do callback é obsoleto, deve-se usar promises, como por exemplo:

function notificar()
{        
    var notificacao = new Notification("Titulo da notificacao", {
        icon: 'go.jpg', //img
        body: 'Mensagem'
    });

    notificacao.onclick = function () {
        window.open('http://google.com/'); //site
    };
}

function semPermissao()
{
    console.warn("O usuário não permitiu notificações");
}

function minhaNotificao()
{
    if (!('Notification' in window)) {
        console.warn("Este browser não suporta notificações de Desktop");
    } else if (Notification.permission === "granted") {
        notificar();
    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(function (permission) {
            if (permission === "granted") {
                notificar();
            } else {
                semPermissao();
            }
        });
    } else {
        semPermissao();
    }
}

document.addEventListener('DOMContentLoaded', minhaNotificao);

Habilitando notificações nos navegadores

Se no console do navegador CHROME aparecer a mensagem:

O usuário não permitiu notificações

Então navegue pare este endereço

chrome://settings/content/notifications

Então clique no botão do site que estiver bloqueado e selecione "Allow" (se o seu navegador estiver em portugues selecione "Permitir"):

permitir notificações no chrome

No Firefox navegue até about:preferences#privacy então procure por isto (ou algo semelhante):

configurações de privacidade do Firefox

E depois no site que deseja permitir selecione Allow (ou Permitir):

permitir notificações no Firefox

5
  • o erro que da é Uncaught ReferenceError: notificar is not defined at HTMLDocument.minhaNotificao Commented 20/11/2018 às 19:35
  • e como posso fazer carregar sem o usuario clicar, coloquei window.onload, seria isso? Commented 20/11/2018 às 19:37
  • @EvandroAguiar indica que a função esta sendo chamada em outro lugar, você com certeza colou em lugar ou de forma errada. Não precisa de window.onload, olha os códigos que postei, estão usando DOMContentLoaded, isso já resolve. Com certeza você esta com outro problema no seu código, refaça com calma e com certeza vai dar certo.
    – Syzoth
    Commented 21/11/2018 às 1:00
  • ta tudo certinho, fiz com a sua resposta, porem acho que o problema é no chrome mesmo, no mozilla roda show Commented 21/11/2018 às 1:35
  • @EvandroAguiar A mensagem de erro Uncaught ReferenceError: notificar is not defined at HTMLDocument.minhaNotificao indica que as funções estão em escopos diferentes e que provavelmente você fez algo bem diferente do informado na resposta, manda o link do seu site para ver o que fez.
    – Syzoth
    Commented 21/11/2018 às 1:37

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