Como implementar a função de notificação da área de trabalho Web Notification em HTML5

Às vezes veremos este prompt no canto inferior direito da área de trabalho:

Este prompt da área de trabalho é a nova tecnologia Web Push Notifications do HTML5.

A tecnologia Web Notifications permite que as páginas emitam notificações que serão exibidas no nível do sistema fora da página. Ele pode fornecer aos usuários uma experiência melhor, mesmo quando os usuários estão ocupados com outro trabalho, eles podem receber notificações de mensagens da página, como um lembrete de um novo e-mail ou um lembrete de mensagem recebida em uma sala de bate-papo online, etc.

PS: Além do IE, todos os principais navegadores modernos têm suporte básico para esse push de desktop.

começar

Para criar uma notificação de mensagem, é muito simples usar a classe Notification no objeto window.

 var n = nova notificação (Desktop push, { icon: 'img/icon.png', body: 'Esta é minha primeira notificação na área de trabalho.', imagem: 'img/1.jpg'});

Então você verá a notificação da captura de tela que fiz acima aparecer na área de trabalho do sistema.

PS: A notificação da mensagem só terá efeito quando a página for acessada através do serviço Web. Se você clicar duas vezes diretamente para abrir um arquivo local, não terá efeito. Ou seja, seu arquivo precisa ser aberto no servidor em vez de usar diretamente o navegador para abrir o arquivo local.

Claro, é possível que você não veja nada, então não se preocupe e continue lendo.

Claro, antes de exibir a notificação acima, é necessário entender a sintaxe básica de uma notificação:

 deixe myNotification = new Notification(título, opções);

título: Define um título para a notificação que será exibida no topo da janela de notificação quando ela for acionada.

O objeto options (opcional) contém quaisquer opções de configuração personalizada que se aplicam à notificação.

body: O corpo da notificação, que será exibido abaixo do título.

tag: semelhante ao ID de cada notificação para que a notificação possa ser atualizada, substituída ou removida quando necessário.

icon: ícone para exibir notificações

imagem: o URL da imagem a ser exibida no corpo da notificação.

dados: quaisquer dados que você deseja associar à notificação. Pode ser qualquer tipo de dados.

renotify: Um booleano que especifica se o usuário deve ser notificado após uma nova notificação substituir uma antiga. O valor padrão é falso, o que significa que eles não serão notificados.

requireInteraction: indica que a notificação deve permanecer ativa até que o usuário clique ou feche-a, em vez de fechá-la automaticamente. O valor padrão é falso.

Quando esse código for executado, o navegador perguntará ao usuário se deseja permitir que o site exiba notificações de mensagens, conforme mostra a figura a seguir:

As notificações serão exibidas somente se o usuário clicar em Permitir e autorizar as notificações.

Como saber se o usuário clica em permitir ou bloquear?

A instância Notification de window possui uma função requestPermission para obter o status de autorização do usuário:

 // Primeiro, verificamos se temos permissão para exibir notificações // Caso contrário, solicitamos permissão if (window.Notification && Notification.permission !== concedido) { Notification.requestPermission(function (status) { //status é o status de autorização. //Se o usuário clicar em Permitir, o status será 'concedido' // Se o usuário clicar em Desativar, o status será 'negado' // Isso nos permitirá usar Notification.permission se estiver no Chrome/Safari. (Notification.permission! == status) { Notification.permission = status } });

Nota: Se o usuário clicar no botão Fechar no canto superior direito da autorização, o valor do status será o padrão.

Depois disso, só precisamos determinar se o valor do status é concedido para decidir se exibiremos a notificação.

Mas simplesmente exibir uma caixa de mensagem não é atraente, portanto, as notificações de mensagens devem ter um certo grau de interatividade e os eventos devem estar envolvidos antes e depois da exibição da mensagem.

A notificação formulou uma série de funções de evento desde o início. Os desenvolvedores podem usar essas funções para lidar com as interações do usuário de maneira abrangente:

Existem: onshow, onclick, onerror, onclose.

 var n = new Notification(Desktop push, { icon: 'img/icon.png', body: 'Esta é minha primeira notificação na área de trabalho.'}); //a função onshow é acionada quando a caixa de mensagem é exibida // OK Do alguma gravação de dados e feche a caixa de mensagem regularmente n.onshow = function() { console.log('Exibir caixa de mensagem' //Fecha a caixa de mensagem após 5 segundos setTimeout(function() { n.close(); }); , 3000);};//Chamado quando a caixa de mensagem é clicada //Você pode abrir a visualização relevante, fechar a caixa de mensagem e outras operações ao mesmo tempo n.onclick = function() { console.log('Clique na mensagem box'); // Abra a visualização relevante n.close();};//Quando ocorrer um erro, a função onerror será chamada //Se não houver autorização concedida, a função onerror também será executada ao criar um Instância do objeto de notificação n.onerror = function() { console.log('Erro na caixa de mensagem'); // Faça outras coisas} // A função onclose será chamada quando uma caixa de mensagem for fechada n.onclose = function() { console.log('Fechar a caixa de mensagem' ) ; //Faça outra coisa};

um exemplo simples

 <!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>Documento</title> </head> <body> <button>Clique para iniciar a notificação</button> < / body> <script> window.addEventListener(load, function() { // Primeiro, vamos verificar se temos permissão para enviar notificações // Caso contrário, pedimos permissão if (window.Notification && Notification.permission !== concedido) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } } } var button = document.getElementsByTagName(button)[0]); button.addEventListener(click, function() { // Crie uma notificação se o usuário concordar if (window.Notification && Notification.permission === concedido) { var n = new Notification(Hi!); // Se o usuário não escolher se deseja exibir notificações // Nota: como no Chrome não podemos determinar se o atributo de permissão tem um valor, não é seguro // verificar se o valor deste atributo é o padrão else if (window.Notification && Notification.permission !== negado) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } // Se o usuário concordar if (status === concedido) { var n = new Notification(Hi! }); // Caso contrário, podemos comprometer e usar o modo normal alert else { alert(Hi! } }); // Se o usuário se recusar a aceitar a notificação else { // Podemos comprometer e usar o modo regular alert alert(Hi! } } });

Ao abrir a interface, um aplicativo de autorização aparecerá. Se clicarmos em Permitir e a seguir clicarmos no botão, uma notificação será enviada para a área de trabalho, e podemos ver esta notificação no canto inferior direito da área de trabalho.

Acima, apenas exibimos uma mensagem.

 if (status === concedido) { var n = new Notification(Hi);}

Se tivermos muitas mensagens, por exemplo, utilizo um loop for para simular um grande número de notificações.

 for(var i=0; i<10; i++) { var n = new Notification(Oi,+i);}

Você pode ver que 10 notificações são exibidas. Mas, em alguns casos, exibir um grande número de notificações pode ser doloroso para os usuários.

Por exemplo, se um aplicativo de mensagens instantâneas solicitar ao usuário cada mensagem recebida. Para evitar inundar a área de trabalho do usuário com centenas de notificações desnecessárias, pode ser necessário assumir uma fila de mensagens pendentes.

Portanto, uma tag precisa ser adicionada à notificação recém-criada.

Se houver uma nova notificação com a mesma tag da notificação anterior, a nova notificação substituirá a notificação anterior e apenas a notificação mais recente será exibida na área de trabalho.

Ainda usando o exemplo acima, você só precisa adicionar um atributo tag à notificação do gatilho:

 for (var i = 0; i < 10; i++) { // Por fim, apenas a notificação com conteúdo Hi 9 será vista var n = new Notification(Hi! + i, {tag: 'soManyNotification'});}

A notificação de mensagens é um bom recurso, mas não exclui que alguns sites usem essa função de forma maliciosa. Assim que o usuário autorizar, eles enviarão algumas mensagens hostis de vez em quando e atrapalharão o trabalho do usuário. as permissões do site.

Podemos clicar no ponto de exclamação no lado esquerdo da caixa de entrada do endereço do navegador e haverá uma opção de notificação e podemos modificar a autorização. Ou existe a opção de modificar a notificação na página de notificação, e você pode modificar a notificação de autorização de acordo com a situação específica.

Assim, a notificação da Web mais básica é implementada.

O texto acima é o método de implementação da função de notificação da área de trabalho Web Notification em HTML5 introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!

Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!