JavaScript Desktop Notification

Objetivos do blog

Depois de ler este blog, você poderá configurar a notificação da área de trabalho do seu site. Você também poderá personalizar sua notificação por sua própria mensagem, imagem, ícone etc.

Benefício da Notificação de Desktop

Suponha que você queira notificar seu cliente fora da página da Web e, em seguida, usar a notificação da área de trabalho como se você ativasse a notificação da área de trabalho para e-mail. Você não precisa verificar os e-mails regularmente. Em todos os e-mails, você recebeu uma notificação.

Código para notificação de área de trabalho

Adicione a função abaixo na tag de script na cabeça do HTML.

function showNotification () {// Verifique se o navegador do usuário suporta notificações ou não se (! ("Notificação" na janela)) {alert ("Seu navegador não suporta a notificação de desktop"); } // Verifique se as permissões da notificação já foram concedidas ou não se (Notification.permission === "granted") {// Create Notification var options = {body: 'Linha de mensagem de notificação simples 1. \ NSegunda linha de mensagem de notificação . ', // corpo da dir de notificação:' ltr ', // direção da mensagem ltr: da esquerda para a direita. rtl: da direita para a esquerda. imagem: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Adicionar imagem, se necessário, para mostrar o ícone: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Adicionar ícone, se necessário, para mostrar} var title = "Blog de Knowband"; var notification = new Notificação (título, opções); // Adicione a notificação clique no link notification.onclick = function (event) {event.preventDefault (); // impedir que o navegador se concentre na aba da notificação, window.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Fechar a notificação após clicar em}} // Se não houver permissões, peça permissão ao usuário se (Notification.permission! == "denied") {Notification.requestPermission (). then (function ( permission) {// Se o usuário aceitar, vamos criar uma notificação if (permission === "granted") {var notification = new Notificação ("Hi there!");}}); }}

Você pode acionar esta função através do evento como desejar. Para fins de teste, você pode verificar isso adicionando um botão. Use abaixo o código para o botão no corpo

<button onclick = "showNotification ()"> Mostrar notificação! </ button>

Observação: Se você estiver executando esse código no sistema local, use o servidor local, ou seja, localhost.

Tela de saída

Tela de saída


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *