Basic about HTML / CSS Notifications

0

I'd like to know how to include notifications on my sites, as basic as possible. I researched a bit about it but I did not get any results ... I hope you can help.

Beyond this doubt ... I would like to know if you are making notifications using Cocoon.io > If you have any examples of how to use notifications in this tool please put them there in the answers

THANK YOU

    
asked by anonymous 01.11.2016 / 21:24

1 answer

2

The easiest way to use notifications in web applications is to use the html5 browser notification API.

It's quite simple, the example I'm going to get here comes from Tableless

var notify = function() {
  if(!window.Notification) {
    console.log('Este browser não suporta Web Notifications!');
    return;
  }

  if (Notification.permission === 'default') {
    Notification.requestPermission(function() {
      console.log('Usuário não falou se quer ou não notificações. Logo, o requestPermission pede a permissão pra ele.');
    });
  } else if (Notification.permission === 'granted') {
    console.log('Usuário deu permissão');

    var notification = new Notification('O título da Notifcação', {
     body: 'Mensagem do corpo da notificação',
     tag: 'string única que previne notificações duplicadas',
    });
    notification.onshow = function() {
     console.log('onshow: evento quando a notificação é exibida')
    },
    notification.onclick = function() {
     console.log('onclick: evento quando a notificação é clicada')
    },
    notification.onclose = function() {
     console.log('onclose: evento quando a notificação é fechada')
    },
    notification.onerror = function() {
     console.log('onerror: evento quando a notificação não pode ser exibida. É disparado quando a permissão é defualt ou denied')
    }

  } else if (Notification.permission === 'denied') {
    console.log('Usuário não deu permissão');
  }

};

And you also have a cool little library to simulate notifications within the application, not the browser, notify.js .

    
01.11.2016 / 21:52