Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

La Notificación HTML5


  Publicado hace |  Etiquetas: , , , , , , , , ,

HTML5 ha llegado con un montón de nuevas API para trabajar y mejorar la interacción del usuario con sólo HTML. ¿No es interesante? HTML5 se puede trabajar bien con CSS3.

Hay varias API de geolocalización, como, notificación, archivo, etc. Aquí está el primer artículo  y se relaciona con la API de notificación.

Lo primero que tienes que tener en cuenta, las características de HTML5 y API funcionará en navegadores compatibles solamente. Así que si el navegador no soporta el HTML5, entonces no se puede hacer cualquier cos, si es posible. Vamos a explorar la API de notificación. Quiero que tengas muy en cuenta que este artículo está escrito para los navegadores con WebKit motor como Google Chrome (no Mozila Firefox).

¿QUÉ ES LA NOTIFICACIÓN HTML 5?

La Notificación HTML 5 es una especie de notificación que podemos ofrecer a los usuarios en ciertos eventos, incluso cuando el usuario está en otra pestaña del navegador. Esta notificación puede ser útil para eventos como el correo nuevo, nuevo Tweet, etc.

¿CÓMO FUNCIONA?

Hay varios pasos para trabajar con las API de notificación. En primer lugar tenemos que tener el permiso del usuario para mostrar la notificación o no. Se podrá mostrar la notificación, sólo si el usuario ha dado el permiso para el mismo.

Así se perderá permiso sólo una primera vez, mostrando la notificación en vez de pedir permisos. Ahora bien, si el usuario ha dado consentimiento para mostrar la notificación, entonces podemos ver dos tipos de notificaciones.

  • Notificación normal / Default
  • Notificación HTML

En el código podrás ver, que se ha creado la función javascript para mostrar la notificación, ten en cuenta que ésta función se limita a este artículo, porque hay muchas maneras con las que podemos extender esta función de acuerdo a nuestra necesidad.

HTML

<h2>Notificación Normal</h2>
<button class="btn btn-success" id="show_notification">
    Notificación Normal
</button>

<h2>Notificación con HTML</h2>
<button class="btn btn-success" id="show_html_notification">
    Notificación con HTML
</button>

Javascript

 // Función que activa las notificaciones
 function createNotification(type) 
 {
    if(type ==  '')
      type = 'normal';
                        
    if(type != 'html')
    {
     var title ="Haz recibido una notificación con HTML5.";
     var msg="El contenido va aquí......";
     var notification = window.Notifications.createNotification("1.png", title, msg);
    }
    else
    {
      var notification = window.Notifications.createHTMLNotification('content.html');
    }
    notification.show();
 }
 
 // Enlazar el evento Click en los botones.
 
 $(document).ready(function () 
 {        
   if (window.webkitNotifications) 
   {
    window.Notifications = window.webkitNotifications;
    $('#show_notification').click(function () 
    {
      if (window.Notifications.checkPermission() == 0) 
      {
        createNotification('normal');
      } 
      else 
      {
        window.Notifications.requestPermission();
      }
    });
                                
    $('#show_html_notification').click(function () 
    {
     if (window.Notifications.checkPermission() == 0) 
     {
        createNotification('html');
     } 
     else 
     {
        window.Notifications.requestPermission();
     }
    });
   }     
   else
   {
    alert('Las notificaciones en HTML5 no son soportadas por tu navegador.');
   }
 });

Deberás pedir permiso para mostrar la notificación, si el usuario lo permite entonces podrá mostrar las notificaciones. Por primera vez se le pedirá permiso en lugar de mostrar la notificación.

El demo lo puedes ver en demo.xpertdeveloper.com/html5-notification

CONCLUSIÓN

Todo lo anterior explicado para la notificación de HTML5 es aplicable para los navegadores Web Kit sólo como Google ChromeMozilla Firefox tiene su propia especificación HTML5 para esta notificación.

Fuente original: Notificaciones con HTML5

comments powered by Disqus