0

Tenho uma aplicação em vue js, que cadastra uma tarefa, gostaria de ser avisado 5 minutos antes da tarefa acontecer, tenho o seguinte codigo .

    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.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
  body: falta 5 minutos para sua tarefa
});
}

porem ele nunca cai no (if) alguém pode me ajudar???

2 Respostas 2

1

Bom, eu testei e ficou interessante com um setTimeout, vai de você melhorar a utilização no seu código:

let time = (1000 * 100) * 5;
setTimeout(()=>{
   let notification = new Notification('Titulo teste',{
   body: falta 5 minutos para sua tarefa
 });
}, time)
1
  • Foi uma boa solução, porem não me ajuda. Eu presido pegar uma data e hora cadastrada, e 5 minutos antes disparar um alerta
    – Felipe
    Commented 30/01/2018 às 12:06
1

você pode criar a notificação de forma imediata, porem agendamento a mesma para um momento no futuro.

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>

Se realmente precisa controlar o agendamento das notificações pelo aplicativo, sugiro que faça o seguinte.:

  1. Adicione o Vuex á sua aplicação
  2. Adicione um modulo para as notificações
  3. Ao carregar o modulo, busque as notificações no Storage, execute os alertas vencidos e agende os futuros pelo window.setTimeout. PouchDb pode vir a calhar.
  4. Crie uma action para adicionar a notificação ao state e registre a mesma no storage, e por fim, agente a sua exibição com a ajuda do window.setTimeout.
  5. Uma vez executada a notificação, lembre-se de remover elas do state e do storage.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .