O uso de notificação de mensagem HTML5 (Web Notification)

Escrevi muitos artigos sobre HTML5, mas sempre sinto que preciso passar pelas APIs de alto nível relevantes. Somente compreendendo o sistema e pensando nos problemas de um nível superior poderemos obter o dobro do resultado com metade do esforço.

Vamos tentar primeiro o exemplo mais simples. Abra as ferramentas de desenvolvedor chrome , cole o código e execute-o diretamente:

 new Notification('Notificação de mensagem de Jartto/', { dir: 'rtl', body: 'Esta é uma mensagem, enviada através de Notificação da Web, como um teste!', ícone: 'https://raw.githubusercontent.com /chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

Nenhuma notificação de mensagem aparece, o que está acontecendo? Não se preocupe, continue lendo.

De acordo com o exemplo acima, nós o executamos, mas não ativamos com sucesso a caixa de mensagens. Neste momento, você precisa verificar se o usuário está autorizado. Digite no console: > Notification.permission

Em breve descobriremos que a permissão original do usuário é default . Como a escolha do usuário não é conhecida, o comportamento do navegador é o mesmo de denied , que é negação.

Ao ver essas API de alto nível do HTML5 , sempre há algumas preocupações. Embora o exemplo seja bom e fácil de usar, como é a compatibilidade é uma questão que vale a pena pensar.

Como você pode ver, basicamente todos os navegadores suportam isso, exceto iOS Safari e Opera Mini , portanto, os aplicativos móveis precisam ser cautelosos.

4. Documentação da API

Vamos primeiro resolver a API sistematicamente. É muito simples. Basta gastar 5 minutos nisso.

Caso de uso:

 deixe notificação = nova notificação(título, opções)

parâmetro:

título: O título da notificação que definitivamente será exibido

opções: um objeto que pode ser usado para definir notificações. Ele contém as seguintes propriedades:

• dir: A direção do texto; seu valor pode ser auto (automático), ltr (da esquerda para a direita) ou rtl (da direita para a esquerda)
• lang: especifica o idioma usado nas notificações. Esta string deve ser válida no documento de tag de idioma BCP 47.
• body: string adicional exibida na notificação
• tag: forneça um ID à notificação para que ela possa ser atualizada, substituída ou removida quando necessário.
• ícone: O URL de uma imagem que será usada para exibir o ícone de notificação.

propriedade:

Notification.permission: uma string que indica o status de autorização da exibição de notificação atual. Os valores possíveis incluem:

• denied (o usuário negou a exibição da notificação),
• granted (o usuário permitiu que a notificação fosse exibida),
• default (como a escolha do usuário não é conhecida, o navegador se comporta da mesma forma que quando denied )

método:

• Notification.onclick: trata o evento click, que é acionado toda vez que o usuário clica na notificação.
• Notification.onshow: trata do evento show, que é acionado quando a notificação é exibida.
• Notification.onerror: trata o evento de erro, que é acionado sempre que a notificação encontra um erro.
• Notification.onclose: trata o evento close, que é acionado quando o usuário fecha a notificação.
• Notification.requestPermission(): usado para que a página atual solicite ao usuário permissão para exibir notificações.
• Notification.close(): usado para fechar notificações.

Notification.requestPermission Este método só pode ser chamado pelo comportamento do usuário (por exemplo: evento onclick) e não pode ser chamado por outros métodos.

De acordo com a API acima, vamos escrever um exemplo completo:

 function notifyMe(){ // Primeiro verifique se o navegador suporta if (!(Notification in window)) { alert(Este navegador não suporta notificação na área de trabalho } // Verifique se o usuário concorda em receber notificações else if (Notification. permissão = == concedida) { // Se estiver tudo bem, vamos criar uma notificação var notificação = new Notification(Olá! } // Caso contrário, precisamos obter permissão do usuário else if (Notification.permission !== 'denied) ') { Notification.requestPermission(function (permission){ // Se o usuário concordar, você pode enviar uma notificação if (permission === concedida) { var warning = new Notification(Olá!); } } } // Finalmente! , Se a execução chegar a este ponto, significa que o usuário se recusou a autorizar as notificações relevantes // Por respeito, não devemos mais incomodá-las}

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.