{"id":27493,"date":"2019-06-05T12:27:19","date_gmt":"2019-06-05T12:27:19","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=26902\/"},"modified":"2025-05-09T17:33:05","modified_gmt":"2019-06-06T10:47:23","slug":"javascript-desktop-notification","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/javascript-desktop-notification\/","title":{"rendered":"JavaScript Desktop Notification"},"content":{"rendered":"

Objetivos do blog<\/h2>\n

Depois de ler este blog, voc\u00ea poder\u00e1 configurar a notifica\u00e7\u00e3o da \u00e1rea de trabalho do seu site. Voc\u00ea tamb\u00e9m poder\u00e1 personalizar sua notifica\u00e7\u00e3o por sua pr\u00f3pria mensagem, imagem, \u00edcone etc.<\/p>\n

Benef\u00edcio da Notifica\u00e7\u00e3o de Desktop<\/h3>\n

Suponha que voc\u00ea queira notificar seu cliente fora da p\u00e1gina da Web e, em seguida, usar a notifica\u00e7\u00e3o da \u00e1rea de trabalho como se voc\u00ea ativasse a notifica\u00e7\u00e3o da \u00e1rea de trabalho para e-mail. Voc\u00ea n\u00e3o precisa verificar os e-mails regularmente. Em todos os e-mails, voc\u00ea recebeu uma notifica\u00e7\u00e3o.<\/p>\n

C\u00f3digo para notifica\u00e7\u00e3o de \u00e1rea de trabalho<\/h3>\n

Adicione a fun\u00e7\u00e3o abaixo na tag de script na cabe\u00e7a do HTML.<\/p>\n

function showNotification () {\/\/ Verifique se o navegador do usu\u00e1rio suporta notifica\u00e7\u00f5es ou n\u00e3o se (! ("Notifica\u00e7\u00e3o" na janela)) {alert ("Seu navegador n\u00e3o suporta a notifica\u00e7\u00e3o de desktop"); } \/\/ Verifique se as permiss\u00f5es da notifica\u00e7\u00e3o j\u00e1 foram concedidas ou n\u00e3o se (Notification.permission === "granted") {\/\/ Create Notification var options = {body: 'Linha de mensagem de notifica\u00e7\u00e3o simples 1. \\ NSegunda linha de mensagem de notifica\u00e7\u00e3o . ', \/\/ corpo da dir de notifica\u00e7\u00e3o:' ltr ', \/\/ dire\u00e7\u00e3o 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\u00e1rio, para mostrar o \u00edcone: 'https: \/\/ www .knowband.com \/ blog \/ wp-content \/ uploads \/ 2016 \/ 09 \/ cropped-knowband_logo-v2.png ', \/\/ Adicionar \u00edcone, se necess\u00e1rio, para mostrar} var title = "Blog de Knowband"; var notification = new Notifica\u00e7\u00e3o (t\u00edtulo, op\u00e7\u00f5es); \/\/ Adicione a notifica\u00e7\u00e3o clique no link notification.onclick = function (event) {event.preventDefault (); \/\/ impedir que o navegador se concentre na aba da notifica\u00e7\u00e3o, window.open ('https:\/\/www.knowband.com\/blog\/', '_blank'); notification.close (); \/\/ Fechar a notifica\u00e7\u00e3o ap\u00f3s clicar em}} \/\/ Se n\u00e3o houver permiss\u00f5es, pe\u00e7a permiss\u00e3o ao usu\u00e1rio se (Notification.permission! == "denied") {Notification.requestPermission (). then (function ( permission) {\/\/ Se o usu\u00e1rio aceitar, vamos criar uma notifica\u00e7\u00e3o if (permission === "granted") {var notification = new Notifica\u00e7\u00e3o ("Hi there!");}}); }}<\/pre>\n
Voc\u00ea pode acionar esta fun\u00e7\u00e3o atrav\u00e9s do evento como desejar. Para fins de teste, voc\u00ea pode verificar isso adicionando um bot\u00e3o. Use abaixo o c\u00f3digo para o bot\u00e3o no corpo<\/p>\n
<button onclick = "showNotification ()"> Mostrar notifica\u00e7\u00e3o! <\/ button><\/pre>\n
Observa\u00e7\u00e3o: <\/strong> Se voc\u00ea estiver executando esse c\u00f3digo no sistema local, use o servidor local, ou seja, localhost.<\/p>\n
Tela de sa\u00edda<\/h2>\n
\"Tela<\/a>