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.