Notification in Vue

Question

I have an application in Vue js, which registers a task, I would like to be notified 5 minutes before the task happens, I have the following code .

    function getData(){
    let data = new Date();
    let dia = data.getDate();
      if (dia.toString().length == 1){
      dia = "0"+dia;
      }
    let mes = data.getMonth() + 1; 
      if (mes.toString().length == 1){
        mes = "0"+mes;
      }
    let ano = data.getFullYear();

    let dataFull = dia + '/' + mes + '/' + ano;

    let hora = data.getHours();
      if (hora.toString().length == 1){
        hora = "0"+hora;
      }
    let minuto = data.getMinutes();
      if (minuto.toString().length == 1){
        minuto = "0"+minuto;
      }
    let horaFull = hora + ':' + minuto;
    let horaAlarm =  hora + ':' + (minuto - 5);
    return {
      dia: dia,
      mes: mes,
      ano: ano,
      hora: hora,
      minuto: minuto,
      dataFull: dataFull,
      horaFull: horaFull,
      horaAlarm: horaAlarm
    }
}

    document.addEventListener('DOMContentLoaded', function(){
  if(Notification.permission !== 'granted')
    Notification.requestPermission(); 
});

if(getData().horaFull == getData().horaAlarm){
var notification = new Notification('Titulo teste',{
  ico: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
  body: falta 5 minutos para sua tarefa
});
}

but he never falls in (if) someone can help me???

Answer 1

Well, I tested and got interesting with a setTimeout, will you improve the use in your code:

let time = (1000 * 100) * 5;
setTimeout(()=>{
   let notification = new Notification('Titulo teste',{
   body: falta 5 minutos para sua tarefa
 });
}, time)

Answer 2

you can create the notification immediately, but schedule it for a time in the future.

var addNotification = document.getElementById("add_notification");
addNotification.addEventListener("click", function (event) {
  Notification.requestPermission().then(function(permission) { 
    if (permission === "granted") {
      var now = new Date()
      var data = new Date()
      data.setSeconds(now.getSeconds() + 30)
      var options = {
        body: `Mensagem programada para as ${data} e criada as ${now}`,
        timestamp: data
      }
      new Notification('Notificação',options);
    }
  });
})

<button id="add_notification">Add Notificação</button>

If you really need to track the scheduling of notifications by the app, I suggest you do the following.:

1. Add the Vuex to its application
2. Add a module for notifications
3. When loading the module, search for notifications on Storage, execute the expired alerts and schedule the futures by window.setTimeout. Pouchdb might come in handy.
4. Create an action to add the notification to the state and register it in the Storage, and finally, agent its display with the help of window.setTimeout.
5. Once the notification is executed, remember to remove them from the state and Storage.