Aplicações Ricas para Internet
Notifications API
Sobre
-
Notificações
no nível do sistema -
Aparência variável
de acordo com o dispositivo -
Permissão do usuário
necessária
Compatibilidade com os navegadores desktop
-
Chrome 22
-
Edge 14
-
Firefox 22
-
Internet Explorer Não
-
Opera 25
-
Safari 7
Compatibilidade com os navegadores mobile
-
Chrome Sim
-
WebView Android Não
-
Firefox 22
-
Samsung Internet Sim
-
Opera Sim
-
Safari Não
Como usar
-
1. Checar compatibilidade
-
2. Pedir permissão do usuário
-
3. Enviar notificação
-
4. Fechar notificações
Checar compatibilidade
function checarCompatibilidade() {
if (!("Notification" in window)) {
alert("Este navegador não é compatível com a API de Notificações");
} else {
alert("Este navegador é compatível com a API de Notificações");
// Continuar desenvolvimento
}
}
Pedir permissão do usuário
function pedirPermissao() {
Notification.requestPermission().then( () => {
switch (Notification.permission) {
case 'denied':
// O usuário se recusa a receber notificações
alert('denied');
break;
case 'granted':
// O usuário aceita receber notificações
alert('granted');
break;
case 'default':
// A resposta do usuário é desconhecida e por isso o navegador irá presumir que a permissão não foi concedida
break;
}
});
}
Enviar notificação
function enviarNotificacao() {
let notificacao = new Notification('DevDog',
{
body: 'Au au',
icon: './img/pet.png',
vibrate: [200, 100, 200],
requireInteraction: true
});
}
Fechar notificações
function fecharNotificacao() {
const notificacao = new Notification('DevDog', {body: 'Au au', icon: './img/pet.png', vibrate: [200, 100, 200], requireInteraction: true});
// Se a página for recarregada, então feche a notificação
window.onunload = () => {
notificacao.close();
}
// Se o usuário deixar de visualizar a página, então feche a notificação
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
notificacao.close();
}});
}
Especificações
-
Notification()
Cria uma nova instância do objeto Notification. -
Notification.permission
Retorna a permissão atual para exibir notificações. -
Notification.title, Notification.body, etc.
Retorna propriedades de instâncias do objeto Notification.
Constructor
Propriedades estáticas
Propriedades da instância
Especificações
-
Notification.requestPermission()
Solicita a permissão do usuário para exibir notificações. -
Notification.close()
Programaticamente fecha uma notificação. -
Notification.onshow, onclick, onclose e onerror.
O manipulador para o evento é acionado cada vez que o usuário interage com a notificação.
Métodos estáticos
Metódos de instância
Manipuladores de evento
Exemplo
function notificarProva() {
const prova = new Notification('Aplicações Ricas para Internet', {body: 'Prova amanhã', icon: './img/school.png', vibrate: [200, 100, 200], requireInteraction: true});
prova.onshow = () => {
ar = document.getElementById('avisoRecebimento');
ar.style.visibility = 'visible';
};
prova.onclick = () => {
window.open('https://senacsp.blackboard.com/');
}
prova.onerror = () => {
alert('Erro ao tentar exibir a notificação!');
}
prova.onclose = () => {
alert('Cuidado para não se esquecer da prova!');
}
}
Aplicações Ricas para Internet