Prefácio: Para um desenvolvedor front-end, sempre presto atenção em algumas funções novas ao navegar na web. Para mim, que sempre uso o Teambition no trabalho, sempre recebo Notificações... Então hoje vou estudar essa função do H5...
1. Crie uma notificação let n = new Notification( Esta é uma mensagem de notificação, //Este é o título obrigatório e o título da notificação que será exibido { icon: xxx.png, // Este ícone é usado para exibir a imagem à esquerda no corpo da notificação: Olá, sou xxx, // Os caracteres de conteúdo no diretório de notificação: auto, // O valor da direção do texto inclui: auto (automático), ltr (da esquerda para a direita), rtl (da direita para a esquerda) tag: gxlself / / Forneça um ID para esta mensagem de notificação, Usado para atualizar, remover, substituir e outras operações nesta mensagem de notificação // long: en-US //O campo lang precisa consultar https://tools.ietf.org/html/bcp47 Não é necessário e tem. sem efeito .. // ... // Veja as propriedades da instância abaixo para outras propriedades opcionais}) Acesse as propriedades da instância correspondentes:n.actions // Uma matriz somente leitura de objetos NotificationAction. Cada objeto descreve uma única ação que o usuário pode selecionar em uma notificação.
n.image // URL da imagem exibida como parte da notificação
n.badge // O URL da imagem usada para representar a notificação quando não há espaço suficiente para exibir a notificação em si.
n.permission // Existem três valores: granted , denied ou default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // Valor booleano. Se deve substituir a notificação anterior quando uma nova aparecer. Se definido como verdadeiro, significa substituição, o que significa que apenas uma notificação da marca atual aparecerá. Observe a marcação atual aqui? Isso mesmo, para que o parâmetro true funcione, tag必须definir o valor do atributo.
n.requireInteraction // Valor booleano, refere-se a se a notificação permanece ativa até que o usuário clique ou cancele a notificação em vez de fechar automaticamente.
n.silent // Valor booleano. Se deve haver um som quando a notificação aparecer. O padrão false , o que significa silencioso.
n.timestamp //A hora em que a notificação é criada ou pode ser usada.
n.data // Qualquer tipo de dado associado à notificação.
n.vibrate // Quando a notificação é exibida, o modo de vibração exigido pelo hardware de vibração do dispositivo. O chamado modo de vibração refere-se a uma matriz que descreve o tempo de alternância, que representa o número de milissegundos de vibração e não vibração, respectivamente, e continua a alternar. Por exemplo, [200, 100, 200] significa que o dispositivo vibra por 200 milissegundos, depois para por 100 milissegundos e depois vibra por 200 milissegundos. (versão móvel)
n.sound // String. Endereço de áudio. Indica a notificação da presença de recurso sonoro a ser reproduzido.
n.sticky // A adsorção de notificação não é fácil de limpar... (versão móvel)
n.noscreen // Valor booleano. Se deve parar de exibir informações de notificação na tela. O padrão é false , o que significa que o conteúdo da notificação deve ser exibido na tela. (versão móvel)
1> evento de clique do usuário onclick nas informações de notificação
2> evento onshow acionado após a exibição da mensagem de notificação
3> onerror é um evento que será acionado quando um erro for encontrado.
4> Tratamento do evento onclose close
2. Quais propriedades/métodos o objeto Notificação possui Use a saída do objeto janela no console para abri-lo e visualizá-lo:É importante notar que o método requestPermission() só é válido no objeto Notification, não no objeto de instância!!! Este método é usado para solicitar permissão ao usuário para exibir notificações e só pode ser chamado ativamente pelo usuário ( pode ser chamado na página onload, e Aplicar ao usuário e enviar depois...)
Os métodos possuídos por objetos de instância são:
(1). close() é usado para fechar mensagens de notificação -> Você também pode adicionar uma chamada atrasada ao método onshow para melhorar a experiência do usuário...
(2). addEventListener() escuta eventos (este método geral)
(3). removeEventListener desinstala eventos de escuta (geral, igual ao acima)
(4). Evento de envio dispatchEvent (igual ao acima).
Em seguida, escreva um teste js. Se você estiver usando o Google Chrome, é recomendável exibir notificações nas configurações e adicionar o endereço do serviço local para permitir notificações.
No entanto, o nome de domínio http é fechado por padrão no Google Chrome e não pode ser alterado. Verifique se há uma mensagem de aviso no console do Google Chrome --->.
index.js:78 [Descontinuação] A API de notificação não pode mais ser usada em origens inseguras. Você deve considerar mudar seu aplicativo para uma origem segura, como HTTPS. Consulte https://goo.gl/rStTGz para obter mais detalhes.
Bem, ok, adicionar um certificado https é realmente venenoso... Embora adicionar esta função à sua página inicial só possa ser um prazer no Firefox...
(Tencent Cloud tem um certificado SSL gratuito de um ano, você mesmo pode instalá-lo...)
// index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ construtor(){ this. isNotificationSupported = Notificação na janela } isPermissionGranted(){ return Notification.permission ===; 'concedido'; } requestPermission(){ if(!this.isNotificationSupported){ return } Notification.requestPermission(status=>{ let permission = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { return } if (!this.isPermissionGranted()) { return } var n = novo Notification(gxlself envia saudações para você, { icon : 'gxlself.png', body : 'Bem-vindo à visita, estou muito grato! Clique para ir para a página do meu blog ~' }); .log('gxlself enviou informações de notificação'); setTimeout(function() { n.close(); }, 5000 } n.onclick = function () { location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' janela de mensagem gxlself fechada') } } }Esta é a exibição do efeito após a execução do navegador Firefox:
Vamos dar uma olhada no efeito de administrar o Google localmente: (O nome de domínio foi interceptado e desativado por padrão. Isso foi explicado acima e não será repetido)
O efeito do Google é realmente muito bom, bem... é que o https me bloqueou...
------- Aplicativo de desktop -----------
Quando você quiser usar notificações em um aplicativo da web aberto, certifique-se de adicionar a permissão desktop-notification ao seu arquivo de manifesto. As notificações podem ser usadas em qualquer nível de permissão, hospedado ou superior.
permissões: {notificação na área de trabalho:{} }Esta Notificação é mais divertida e também é uma parte importante do envio de mensagens no futuro. Deixe este registro... Espero que seja útil para o estudo de todos e também espero que todos apoiem a Rede VeVb Wulin.