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

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.

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.

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.

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

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.

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.

Aqui está uma boa documentação sobre APIs,

https://developer.chrome.com/apps/notifications

E, explicação em vídeo oficial do Google,

https://developers.google.com/live/shows/83992232-1001

O Notify.js é um invólucro das novas notificações do kit da web. Funciona muito bem.

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

<!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>