Exemplo de notificação da área de trabalho do Chrome [fechado]

409

Como alguém usa as notificações da área de trabalho do Chrome ? Eu gostaria que usasse isso no meu próprio código.

Atualização : veja uma postagem no blog explicando as notificações do kit da web com um exemplo.

Sridhar Ratnakumar
fonte
2
Deixei uma resposta abaixo atualizada a partir de novembro de 2012, depois que as notificações HTML foram descontinuadas. Tem um exemplo real como o que você estava procurando.
Dan Dascalescu 11/11/12
1
Atualização : a partir de 2015, os sites também podem enviar notificações push reais, entregues mesmo quando o usuário não está navegando no site. Confira esta resposta
collimarco
3
Todos esses eleitores para marcá-lo como fechado devem ser amantes do IE / Safari. É específico para a notificação do navegador e, principalmente, para o Chrome. se está fora de tópico, por que tantas pessoas gostam e marcam como estrelando?
Prash 7/08
2
Por que sair do tópico?
28419 SmartManoj

Respostas:

717

Nos navegadores modernos, existem dois tipos de notificações:

  • Notificações na área de trabalho - simples de acionar, funcionam desde que a página esteja aberta e podem desaparecer automaticamente após alguns segundos
  • As notificações do Service Worker - um pouco mais complicadas, mas podem funcionar em segundo plano (mesmo após o fechamento da página), são persistentes e oferecem suporte a botões de ação

A chamada da API usa os mesmos parâmetros (exceto ações - não disponíveis nas notificações da área de trabalho), que estão bem documentados no MDN e para profissionais de serviço, no site de fundamentos da web do Google .


Abaixo está um exemplo prático de notificações da área de trabalho para Chrome, Firefox, Opera e Safari. Observe que, por razões de segurança, a partir do Chrome 62, a permissão para a API de notificação não pode mais ser solicitada a partir de um iframe de origem cruzada , portanto, não podemos demonstrar isso usando os snippets de código do StackOverflow. Você precisará salvar este exemplo em um arquivo HTML em seu site / aplicativo e certifique-se de usar localhost://ou HTTPS.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}
 <button onclick="notifyMe()">Notify me!</button>

Estamos usando a API de notificações do W3C . Não confunda isso com a API de notificações de extensões do Chrome , que é diferente. As notificações de extensão do Chrome obviamente funcionam apenas nas extensões do Chrome e não exigem nenhuma permissão especial do usuário.

As notificações do W3C funcionam em muitos navegadores (consulte o suporte no caniuse ) e exigem permissão do usuário. Como prática recomendada, não peça essa permissão imediatamente. Explique ao usuário primeiro por que ele deseja notificações e veja outros padrões de notificações por push .

Observe que o Chrome não respeita o ícone de notificação no Linux devido a esse bug .

Palavras finais

O suporte à notificação está em fluxo contínuo, com várias APIs sendo preteridas nos últimos anos. Se você estiver curioso, verifique as edições anteriores desta resposta para ver o que costumava funcionar no Chrome e para aprender a história de notificações HTML avançadas.

Agora, o padrão mais recente está em https://notifications.spec.whatwg.org/ .

Quanto ao motivo pelo qual existem duas chamadas diferentes para o mesmo efeito, dependendo se você trabalha ou não em um serviço - veja este ticket que arquivei enquanto trabalhava no Google .

Consulte também notify.js para uma biblioteca auxiliar.

Dan Dascalescu
fonte
4
@mghaoui - popular! = verdadeiro (necessariamente). Eu marquei este como a resposta correta.
Sridhar Ratnakumar
2
window.webkitNotifications.checkPermission () irá lançar uma exceção em navegadores não-Chrome
JT Taylor
2
Fechar não é um método. Eu acho que você quer notification.cancel ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> Também parece fechar por conta própria.
KingOfHypocrites
3
Obrigado pelo apoio, usar isso com o Pusher me ajudou a criar um sistema de notificação.
21715 Awijeet
3
não funciona no Chrome versão 47.0.2526.80 dev-m enquanto trabalhava no Mozilla Fire Fox no Windows 8
Sarz
87

Verifique o design e a especificação da API (ainda é um rascunho) ou verifique a fonte de (a página não está mais disponível) para um exemplo simples: é principalmente uma chamada para window.webkitNotifications.createNotification.

Se você deseja um exemplo mais robusto (você está tentando criar sua própria extensão do Google Chrome e gostaria de saber como lidar com permissões, armazenamento local e outros), confira Extensão do Notificador do Gmail : baixe o arquivo crx em vez de instalar descompacte e leia o código fonte.

GmonC
fonte
Não existe nada que funcione para todos os navegadores?
Royi Namir 21/08/2012
@Royi, Existe uma extensão do Firefox , bem como uma implementação nativa do Firefox, que será lançada mais cedo ou mais tarde . No caso do Internet Explorer, uma solução possível seria solicitar aos usuários do seu site que baixassem o Chrome Frame , pois seria uma solução viável para que as notificações funcionassem. Há alguma outra solução da Microsoft .
Bryan Field
7
Essa resposta está completamente obsoleta agora, quatro anos depois. @RoyiNamir: existe a API de notificações. Veja minha resposta .
Dan Dascalescu
1
O link de exemplo está morto.
Vinny #
33

Parece que window.webkitNotificationsjá foi preterido e removido. No entanto, há uma nova API e parece funcionar também na versão mais recente do Firefox.

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

mpen
fonte
@Miron Por favor, dê uma olhada no hiperlink no primeiro parágrafo. Vinculei a fonte e copiei o código na minha resposta conforme a etiqueta do SO. Se MDN não fosse um wiki, eu poderia ter sido mais explícito sobre quem era o autor, mas não estou fingindo nada.
MPEN
Não vejo onde ele disse que escreveu?
Brandito
não codepen não funcionar
Stepan Yakovenko
1
@StepanYakovenko Tente o link do codepen novamente. Eu adicionei um extra elseno final para dizer qual é o problema. Você provavelmente desativou globalmente as notificações como eu: \
mpen 20/03/19
14

Eu gosto de: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples, mas ele usa variáveis ​​antigas, para que a demonstração não funcione mais. webkitNotificationsé agora Notification.

Rudie
fonte
O exemplo do Twitter não funciona mais.
Dan Dascalescu 11/11/12
Você deve dizer html5rocks.com/en/profiles Um dos los deve trabalhar para Twitter =)
Rudie
Heh. Hakim foi o melhor cara para notificar , já que, por acaso , contribuí para a estrutura de apresentação dele.
Dan Dascalescu 11/11/12
4

Eu criei esse wrapper de notificação simples. Funciona no Chrome, Safari e Firefox.

Provavelmente no Opera, IE e Edge também, mas ainda não o testei.

Basta obter o arquivo notify.js aqui https://github.com/gravmatt/js-notify e colocá-lo em sua página.

Obtê-lo no Bower

$ bower install js-notify

É assim que funciona:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Você precisa definir o título, mas o objeto json como o segundo argumento é opcional.

gravmatt
fonte
@gravmatt, você encontrou um problema no Firefox onde, se houver mais de uma janela do navegador aberta, a notificação não aparecerá?
precisa saber é o seguinte
@eranotzap, ele deve funcionar com várias guias. Eu corro um projeto onde isso não é problema. mas não tenho certeza com várias janelas.
gravmatt 21/02
Eu tenho o mesmo problema com várias guias
eran otzap
Funciona a partir de várias guias no Firefox?
eran otzap
1
@eranotzap Eu testei agora no Windows e Mac. Não consigo ver a notificação em nenhum canto da tela, mas ouço o som das notificações e, no mac, recebo a notificação na barra lateral (com várias guias abertas). O Firefox é o novo Internet Explorer.
gravmatt
3
<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>

Hina Halani
fonte
1
Evite postar respostas somente de código. Adicione alguns comentários e / ou explicações para que, quando as pessoas lerem este post no futuro, elas o entenderem.
Adriaan
Para esse trecho de código específico, parece bastante direto. Outros usuários também podem postar uma pergunta de acompanhamento no comentário, certo?
frostshoxx
1
JSfiddle com o código acima não funciona, "A permissão para a API de notificação não pode mais ser solicitada a partir de um iframe de origem cruzada". No entanto, quando você abre o console do desenvolvedor e entra Notification.requestPermission();, var notification = new Notification('hello', { body: "Hey there!", });a notificação é exibida.
Kai Noack
Sinto muito, mas o que exatamente essa resposta adiciona à minha?
Dan Dascalescu