Olá,

Desta vez, aprenderemos sobre notificações da Web e como enviá-las.

Antes de começar, quero destacar que este será um artigo simples de introdução, talvez eu escreva um detalhado mais tarde.

Introdução

A NotificationAPI reside no windowobjeto e é uma prática comum verificar a disponibilidade da API.

//check if the Notification API available in the window object
if(window.Notification) {
  //all other Notification API calls
}

1. requestPermission() que retorna uma promessa.
2. Notification () em si.

Crie 2 arquivos chamados index.htmlescript/app.js

index.html

Este arquivo é autoexplicativo, teremos 2 botões o primeiro é para acessar a notificação e o segundo é para enviar a notificação.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Notification</title>
  </head>
  <body>
    <h1>
      Notionfications in web?
    </h1>
    <button id="get-noti-access-btn">
      Get Notionfication Access
    </button>
    <button id="send-noti-btn">
      Send Notionfication
    </button>
  </body>
  <script src="./script/app.js"></script>
</html>

app.js

Este arquivo é responsável por obter a permissão de notificação do usuário e enviar uma notificação de amostra.

//block 1
const requestBtn = document.querySelector("#get-noti-access-btn");
const sendNotiBtn = document.querySelector("#send-noti-btn");

//block 2
const getNotificationAccess = () => {
  console.log("get noti access");
  if (window.Notification) {
    Notification.requestPermission().then((permission) => {
      console.log(permission);
    });
  } else {
    console.log("No noti avaialble in browser");
  }
};

//block 3
const sendNotification = () => {
  console.log("send noti");
  setTimeout(() => {
    const notification = new Notification("hello");
  }, 5000);
};

//block 4
requestBtn.addEventListener("click", (e) => {
  e.preventDefault();
  getNotificationAccess();
});

sendNotiBtn.addEventListener("click", (e) => {
  e.preventDefault();
  sendNotification();
});

1. No primeiro bloco, block 1estamos inicializando nossos elementos DOM (os botões).
2. Block 2tem uma função getNotificationAccessque obtém permissão para acesso à notificação e, durante a execução, uma solicitação para obter a aprovação do usuário será exibida, conforme mostrado na captura de tela abaixo.

O permissionargumento em then()retornará as seguintes strings

• granted→ o usuário clicou em Permitir.
• denied→ o usuário clicou em Bloquear.
• default→ usuário não permitido nem bloqueado. (lidar com isso como negado)

3. O bloco 3 tem a sendNotificationfunção de criar uma notificação.

Para simular um processo demorado estamos utilizando a setTimeoutfunção e criando novas notificações dentro dela.

const x = new Notification("Hello")→ esta linha criará uma notificação e a acionará.

4. O bloco 4 anexa os ouvintes de eventos aos respectivos botões.

Executando o código e advertências.

1. Em primeiro lugar, você pode não testar este aplicativo em alguns dos IDEs online, mas em alguns deles, você deve abrir a visualização na nova janela para fazer isso funcionar.
2. Você não pode executar isso em seu host local porque, para poder enviar notificações por push, o site deve ter SSLe HTTPS. Pode haver algumas soluções alternativas.

Quaisquer erros ou bugs no exemplo, por favor me avise.

Vou vincular a postagem detalhada Notificationda API aqui se eu criar uma no futuro.