Resumo : neste tutorial, você aprenderá como usar a API JavaScript Notification para mostrar notificações na área de trabalho aos usuários.
A API de notificação permite que você use JavaScript para exibir notificações na área de trabalho para os usuários.
Permissões de notificação
Como a API de notificação pode ser fácil de abusar, ela impõe estritamente dois recursos de segurança por padrão:
- Primeiro, os usuários devem concordar explicitamente em receber as notificações por origem.
- Segundo, apenas o código executado em um contexto seguro (HTTPS) pode enviar as notificações.
Quando você solicita permissão de notificação aos usuários, eles podem concordar ou negar.
Se os usuários negarem explicitamente, os navegadores se lembrarão da escolha. E você não tem uma segunda chance de solicitar permissão novamente.
Se os usuários não concordarem ou recusarem, ou seja, ignorarem, você poderá enviar uma solicitação de permissão de notificação novamente.
Para solicitar permissão de notificação, você usa o Notificationobjeto global. Este objeto possui o requestPermission()método que retorna um Promise, que é resolvido quando o usuário realiza uma ação na caixa de diálogo de permissão:
let permission = await Notification.requestPermission();Linguagem de código: JavaScript ( javascript )A permissão pode ser uma das seguintes strings 'granted', 'denied'ou 'default':
'granted'– os usuários aceitam receber as notificações.'denied'– os usuários negam ter recebido as notificações.'default'– as escolhas dos usuários são desconhecidas e os navegadores agirão como se os valores fossem'denied'.
Mostrar e ocultar notificações
Para criar uma notificação, você usa o Notificationconstrutor. O seguinte cria uma notificação simples com um título:
const greeting = new Notification('Hi, How are you?');Linguagem de código: JavaScript ( javascript )A notificação pode ser altamente personalizável com o segundo optionsparâmetro.
Por exemplo, o exemplo a seguir cria e mostra uma notificação com corpo de texto e um ícone:
const greeting = new Notification('Hi, How are you?',{
body: 'Have a good day',
icon: './img/goodday.png'
});Linguagem de código: JavaScript ( javascript )Para fechar uma notificação, chame o close()método do Notificationobjeto retornado do Notificationconstrutor:
greeting.close();Linguagem de código: CSS ( css )Para fechar a notificação após um período de tempo, você usa a setTimeout()função. Por exemplo, o seguinte mostra como fechar a greetingnotificação após 10segundos:
setTimeout(() => greenting.close(), 10*1000);Linguagem de código: JavaScript ( javascript )Eventos de notificação
O Notificationobjeto fornece os seguintes eventos:
show– é acionado quando a notificação é exibida.click– é acionado quando a notificação é clicada.close– é acionado quando a notificação é descartada ou fechada por meio doclose()método.error– é acionado quando ocorre um erro, o que impede a exibição da notificação.
Para lidar com esses eventos, você usa o addEventListener()método do Notificationobjeto.
O exemplo a seguir navega para o URL https://tutorials.acervolima.com/quando a notificação é clicada:
// create a notification object
const greeting = new Notification('Hi, How are you?',{
body: 'Have a good day',
icon: './img/goodday.png'
});
// navigate to the https://tutorials.acervolima.com/ on click
greeting.addEventListener('click', function(){
window.open('https://tutorials.acervolima.com/web-apis/javascript-notification/');
});Linguagem de código: JavaScript ( javascript )Além de usar o addEventListener(), você pode atribuir um manipulador de eventos à onclickpropriedade do Notificationobjeto. Por exemplo:
greeting.onclick = () => window.open('https://tutorials.acervolima.com/web-apis/javascript-notification/');Linguagem de código: JavaScript ( javascript )O Notificationobjeto possui , e onshowpara onclickos eventos correspondentes.oncloseonerror
Exemplo de API de notificação JavaScript
Neste exemplo, construiremos um aplicativo web simples que mostra uma notificação na área de trabalho aos usuários.
Crie a estrutura do projeto
Primeiro, crie uma nova pasta chamada notificatione três subpastas js, csse imgdentro da notificationpasta.
Segundo, crie style.cssna csspasta, app.jsna jspasta e index.htmlna notificationpasta.
Terceiro, baixe e copie o seguinte ícone para a imgpasta. Você o usará como ícone da notificação.
Crie a página index.html
Na index.htmlpágina, você coloca os links para os arquivos style.csse :app.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Notification API</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>JavaScript Notification API Demo</h1>
<div class="error"></div>
</div>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Possui index.htmlum cabeçalho e um <div>elemento que mostrará uma mensagem de erro caso a permissão de notificação não seja concedida.
Faça o arquivo app.js
Como você usará a awaitpalavra-chave para chamar o Notification.requestPermission()método, será necessário colocar todo o código em um IIFEapp.js assíncrono :
(async () => {
// place js code here
})();Linguagem de código: JavaScript ( javascript )Primeiro, defina uma função que crie e mostre uma notificação, feche-a após 10 segundos e abra a URL ( https://tutorials.acervolima.com/web-apis/javascript-notification/) se for clicada:
// create and show the notification
const showNotification = () => {
// create a new notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png',
vibrate: true
});
// close the notification after 10 seconds
setTimeout(() => {
notification.close();
}, 10 * 1000);
// navigate to a URL
notification.addEventListener('click', () => {
window.open('https://tutorials.acervolima.com/web-apis/javascript-notification/', '_blank');
});
}Linguagem de código: JavaScript ( javascript )Segundo, defina outra função para mostrar uma mensagem de erro se a notificação não for concedida:
// show an error message
const showError = () => {
const error = document.querySelector('.error');
error.style.display = 'block';
error.textContent = 'You blocked the notifications';
}Linguagem de código: JavaScript ( javascript )Terceiro, verifique se a permissão de notificação foi concedida. Se o usuário não realizou nenhuma ação, solicite.
Se a permissão de notificação for concedida, o grantedsinalizador será verdadeiro. Caso contrário, é false. A função showNotification()or showError()é chamada com base no valor do grantedsinalizador:
let granted = false;
if (Notification.permission === 'granted') {
granted = true;
} else if (Notification.permission !== 'denied') {
let permission = await Notification.requestPermission();
granted = permission === 'granted' ? true : false;
}
// show notification or the error message
granted ? showNotification() : showError();Linguagem de código: JavaScript ( javascript )A seguir mostra o código completo do arquivo app.js:
(async () => {
// create and show the notification
const showNotification = () => {
// create a new notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
// close the notification after 10 seconds
setTimeout(() => {
notification.close();
}, 10 * 1000);
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://tutorials.acervolima.com/web-apis/javascript-notification/', '_blank');
});
}
// show an error message
const showError = () => {
const error = document.querySelector('.error');
error.style.display = 'block';
error.textContent = 'You blocked the notifications';
}
// check notification permission
let granted = false;
if (Notification.permission === 'granted') {
granted = true;
} else if (Notification.permission !== 'denied') {
let permission = await Notification.requestPermission();
granted = permission === 'granted' ? true : false;
}
// show notification or error
granted ? showNotification() : showError();
})();Linguagem de código: JavaScript ( javascript )Aqui está a página de demonstração .
Ao abrir a página, ela solicitará permissão de notificação:
Se você clicar no botão permitir, verá a seguinte notificação em sua área de trabalho:
Fechará em 10 segundos. Se você clicar na notificação, o URL será abertohttps://tutorials.acervolima.com/web-apis/javascript-notification/
Resumo
- A API de notificação JavaScript permite mostrar notificações na área de trabalho aos usuários.
- As notificações devem ser concedidas explicitamente pelos usuários com base na origem e somente acionadas pelo código em execução em um contexto seguro (
https). - Use o
Notificationconstrutor para criar e mostrar notificações. - Use os
Notificationeventos para tornar as notificações mais interativas.
