JS cria efeito de notificação para telefone e computador

Hoje, o projeto está praticamente finalizado, então usei o tempo livre para escrever dois artigos. O artigo anterior 'Como configurar projeto node' deve ter sido visto por todos aqueles que precisam aprender. O efeito apresentado no final desse artigo é realmente excelente, então aqui, quero registrar isso para que eu possa vê-lo novamente no futuro.
Aqui ainda é a mesma abordagem que antes, vamos explicar passo a passo, assim a linha de pensamento é clara.

Vamos primeiro ver o efeito:

Atenção ao canto inferior direito, a mensagem pop-up que apareceu, é exatamente o efeito que implementamos.

Depois de vermos o efeito, vamos entrar no modo de explicação distribuída………..

Primeiro passo:Primeiro, escrevamos uma estrutura básica

Todo o código a seguir está dentro da tag script, então todos vocês precisam se preocupar apenas com o conteúdo dentro da tag script:

  <!DOCTYPE html>
  <html>
  <head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="eric.wu" name="author">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta property="qc:admins" />
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>Exemplo de Push de Mensagens</title>
  </head>
  <body>
     查看右下角的消息通知..........
  </body>
  </html>
  <script type="text/javascript">
  </script>

Segundo passo:Julgando se o navegador suporta a API Web Notifications

Aqui é onde julgamos se o navegador suporta a API Web Notifications, apenas com o suporte a essa coisa, podemos continuar com as próximas.

   function justify_notifyAPI(){
      if (window.Notification) {
        // 支持
        console.log("支持"+"Web Notifications API"
      } else {
        // 不支持
        console.log("不支持"+"Web Notifications API"
      }
    }

Terceiro passo:Verificar se o navegador suporta instância de pop-up

Aqui está uma janela pop-up, para verificar se o navegador suporta instância de pop-up (substitua o endereço da imagem pelo seu próprio endereço)

function justify_showMess(){
  if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
      if (status === "granted") {
        var n = new Notification('Received message:',-O', {
          body: 'This is the notification content! What do you want to see, customer?',
          icon:"../../images/headerPic/QQ 图片20160525234650.jpg"
        });
      } else{
        var n = new Notification("baby! I will leave you!");
      }
    });
  }
}

Quarto passo:实例展示弹出的内容

O atributo title do construtor Notification é obrigatório, usado para especificar o título da notificação, formato de string. O atributo options é opcional, formato de um objeto, usado para definir várias configurações. As propriedades do objeto são as seguintes:

dir: direção do texto, possíveis valores são auto, ltr (esquerda para direita) e rtl (direita para esquerda), geralmente herdado das configurações do navegador.

lang: idioma usado, por exemplo, en-US、zh-CN.

body: conteúdo da notificação, formato de string, usado para explicar mais detalhadamente o propósito da notificação.

tag: ID da notificação, formato de string. Uma notificação com o mesmo tag não será exibida ao mesmo tempo, apenas exibida no local original após o usuário fechar a notificação anterior.

icon: URL do gráfico, usado para exibir na notificação.

  function otification_construct(){
  var notification = new Notification('Received new email', {
    body: 'Você tem1E-mail não lido vindo de Xuejing.
    dir: "auto",
    lang:"zh-CN
    tag: "a1",
    icon:"../../images/headerPic/772513932673948130.jpg"
  });
  console.log(notification.title); // "Novo e-mail recebido"
  console.log(notification.body); // "Você tem um total de3E-mail não lido.
}

Quinto passo:Eventos relacionados à API de Notificações

A instância Notification causará os seguintes três eventos:
show: acionado quando a notificação é exibida para o usuário.

click: acionado quando o usuário clica na notificação.

close: acionado quando o usuário fecha a notificação.

error: acionado ao notificar um erro (quando a notificação não pode ser exibida corretamente).

Estes eventos têm métodos correspondentes como onshow, onclick, onclose, onerror, usados para especificar funções de callback correspondentes. O método addEventListener também pode ser usado para especificar funções de callback para esses eventos.

function otification_event(){
  var MM = new Notification("Hi! My beautiful little princess！",{
    body: 'Você tem1E-mail vindo do espaço exterior.
    icon:"../../images/headerPic/20100114212301-1126264202.jpg"
  });
  MM.onshow = function() {
    console.log('Notification showning!');
  };
  MM.onclick = function() {
    console.log('Notification have be click!');
  };
  MM.onerror = function() {
    console.log('Notification have be click!');
    // Fechar manualmente
    MM.close();
  };
}

Aqui estão as funções básicas explicadas, aqui está o código-fonte do demo acima:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta content="eric.wu" name="author">
  <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
  <meta property="qc:admins" />
  <meta content="telephone=no, address=no" name="format-detection">
  <meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <title>Web Notifications API</title>
</head>
<body>
 查看右下角的消息通知..........
</body>
</html>
<script type="text/javascript">
  window.onload= function(){
    justify_notifyAPI();   //判断浏览器是否支持 Web Notifications API
    justify_showMess();   //浏览器是否支持弹出实例
    otification_construct(); //实例展示弹出的内容
    otification_event();   //Eventos relacionados à API de Notificações 
  }
  //判断浏览器是否支持 Web Notifications API 
  function justify_notifyAPI(){
    if (window.Notification) {
      // 支持
      console.log("支持"+"Web Notifications API"
    } else {
      // 不支持
      console.log("不支持"+"Web Notifications API"
    }
  }
  //浏览器是否支持弹出实例
  function justify_showMess(){
    if(window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function(status) {
        if (status === "granted") {
          var n = new Notification('Received message:',-O', {
            body: 'This is the notification content! What do you want to see, customer?',
            icon:"../../images/headerPic/QQ 图片20160525234650.jpg"
          });
          // alert("Hi! this is the notifyMessages!");
        } else{
          var n = new Notification("baby! I will leave you!");
        }
      });
    }
  }
  // 实例展示弹出的内容
  function otification_construct(){
    var notification = new Notification('Received new email', {
      body: 'Você tem1E-mail não lido vindo de Xuejing.
      dir: "auto",
      lang:"zh-CN
      tag: "a1",
      icon:"../../images/headerPic/772513932673948130.jpg"
    });
    console.log(notification.title); // "Novo e-mail recebido"
    console.log(notification.body); // "Você tem um total de3E-mail não lido.
  }
  //Eventos relacionados à API de Notificações
  function otification_event(){
    var MM = new Notification("Hi! My beautiful little princess！",{
      body: 'Você tem1E-mail vindo do espaço exterior.
      icon:"../../images/headerPic/20100114212301-1126264202.jpg"
    });
    MM.onshow = function() {
      console.log('Notification showning!');
    };
    MM.onclick = function() {
      console.log('Notification have be click!');
    };
    MM.onerror = function() {
      console.log('Notification have be click!');
      // Fechar manualmente
      MM.close();
    };
  }
</script>

Isso é tudo o que há no artigo, esperamos que ajude no seu aprendizado e que você apoie o tutorial Grito com mais frequência.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal relevante. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Aparentemente confirmada, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)

Tutorial básico