No notification appears in Chrome only in firefox

Asked

Viewed 303 times

0

I can’t make the notification work on Chrome, only on mozila, someone has a solution????

        //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>

  • Duplicate: https://answall.com/questions/2101/notifies%C3%A7%C3%B5es-de-desktop-no-Chrome-com-javascript

  • I posted because this mentioned publication is not working here for me!

1 answer

1

Missing one else if it is not allowed the use of this by the user, Aliais all its code this nonsense, has an event that runs after the DOMContentLoaded and another that runs deliberately when the script is loaded.

To summarize you have to use the callback in the Notification.requestPermission to check permissions when not guaranteed and if different from granted you can inform the user that he denied access, then just resetting the settings in the browser for the website espeficio to work.

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 that in Gecko 46 (probably Firefox 45) the use of callback is obsolete, it should be used Promises, as an example:

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);

Enabling notifications in browsers

If the message appears in the CHROME browser console:

The user did not allow notifications

Then navigate to this address

chrome://settings/content/notifications

Then click on the button of the blocked site and select "Allow" (if your browser is in English select "Allow"):

permitir notificações no chrome

In Firefox navigate to about:preferences#privacy then look for this (or something similar):

configurações de privacidade do Firefox

And then on the site you want to allow select Allow (or Allow):

permitir notificações no Firefox

  • the error that da is Uncaught Referenceerror: notify is not defined at Htmldocument.minhaNotificao

  • and how can I load without the user clicking, I put window.onload, that would be it?

  • @Evandroaguiar indicates that the function is being called elsewhere, you have definitely pasted in place or in the wrong way. No need for window.onload, look at the codes I posted, are using DOMContentLoaded, this already solves. Surely you are with another problem in your code, redo it calmly and it will surely work.

  • ta all right, I did with your answer, but I think the problem is in Chrome same, in Mozilla wheel show

  • @Evandroaguiar The error message Uncaught ReferenceError: notificar is not defined at HTMLDocument.minhaNotificao indicates that the functions are in different scopes and that you probably did something very different from the informed in the reply, sends the link from your site to see what you did.

Browser other questions tagged

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