Timer Inside Local Notification

Capacitor
1

currently working on a timer and i would like to create a notification with the current timer.

It’s possible to make that with local notifications? I’ve not seen on the doc a way to update current notification (every seconds, i’m not sure is this the best way to make that).

1 Like
2

hey @jay44444 i have recently resolved that issue hope this will help you
the code below is of service i have created for local notifications (Ionic v6 and Capacitor v3)
local-notification.service.ts

import { Injectable } from '@angular/core';
import { LocalNotifications } from '@capacitor/local-notifications';
@Injectable({
  providedIn: 'root'
})
export class LocalNotificationService {

  constructor() {
  }

  async showLocalNotification(id: number, title: string, text: string, m: any) {

    await LocalNotifications.schedule({
      notifications: [
        {
          title:title,
          body: text,
          id:id,
          schedule: {
            at: new Date(m) // Here i have passing the date and time with parameter m that i m sending to service from home.page.ts after getting from ion-datetime
          },
        },
      ],
    });
  }

}
// by Zagham Nadeem (Senior Developer at Learn2Earn)

the below code is of home.page.ts

import { Component } from '@angular/core';
import { LocalNotificationService } from "../services/local-notification.service";
import {format, formatISO, parseISO} from 'date-fns';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public id:number;
  public title:any;
  public body:any;
  public Date:any;
  constructor ( private localNotification : LocalNotificationService ) {
  }

  async sendLocalNotification () {
    //get input from the ion-datetime and convert it to ISO Format using date-fns
    const dateFromIonDatetime = this.Date;
    const formattedString = formatISO(parseISO(dateFromIonDatetime));
    console.log(formattedString+ 1000 * 60);
    // Creating Random id
    const randomId = Math.floor(Math.random() * 10000) + 1;
    await this.localNotification.showLocalNotification ( randomId,this.title, this.body,  formattedString  ).then(r=>{
      console.log('Notification Sent', r);
    });
  }
}
// by Zagham Nadeem (Senior Developer at Learn2Earn)

in the upper code i make a logic of random number that on every local notification you will get the notification with different id.

now
in the below code is of home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Local Notifications
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-datetime presentation="time-date" [(ngModel)]="Date"></ion-datetime>
  <ion-input [(ngModel)]="title" placeholder="Enter Title"></ion-input>
  <ion-input [(ngModel)]="body" placeholder="Enter Body" ></ion-input>
  <ion-button expand="block" (click)="sendLocalNotification()">
    Send Local notification
  </ion-button>

</ion-content>

this is code for setting timmer in local notifications with ion-datetime component

if u want to get notification at specific day hour minute and sec you can do this simply in local-notification.service.ts

await LocalNotifications.schedule({
      notifications: [
        {
          title:title,
          body: text,
          id:id,
          schedule: {
       // below you can set the timmer to 
           day: 1 // 0-6 : Sunday - Saturday
           hour: 12 // X will be the hour 0-24
           minute: 30 // 0-60
          },
        },
      ],
    });

hope it will help you

3

Hello Zagham

I could not understand this part.
await LocalNotifications.schedule({
notifications: [
{
title:title,
body: text,
id:id,
schedule: {
// below you can set the timmer to
day: 1 // 0-6 : Sunday - Saturday
hour: 12 // X will be the hour 0-24
minute: 30 // 0-60
},
},
],
});

schedule object doesnt have properties like day,hour,min?

What I really want is to update the body of notification every second. like 2:20:29 then 2.20.28 then 2.20.27 etc…

4

hey @jay44444 try this one
this will fulfill your requirements
this is code of home.page.ts

import { Component, OnInit } from '@angular/core';
import{LocalNotifications,ScheduleOptions}from"@capacitor/local-notifications";
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  ids:number[]=[];
 resume:boolean=false;
  constructor(){}
  ngOnInit(){
    setInterval( ()=>{
      if(this.resume)
     {
      this.schedule();
      console.log('Test', this.ids)
     }
    },1000);
}
  
schedule() {
 var t = new Date();
  t.setSeconds(t.getSeconds()+5);
   let id=this.ids.length;
   this.ids.push(id);
  let options:ScheduleOptions={notifications:[{
    id:id,
    title:"Local Notifications id="+id,
    body:"Local Notifications body",
    // schedule:{
   // at:t,
   }]
}
if(this.resume){
{
 LocalNotifications.schedule(options).then(()=>{
   console.log('test')
  })
}
}
}}

and this one is of home.page.html

it will send Local Notifications every second when the toglle will on

<ion-header style="z-index:0;">
  <ion-toolbar>
       <ion-title></ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-item>
       <ion-label>
            Local Notifications
       </ion-label>
       <ion-toggle [(ngModel)]="resume"></ion-toggle>
  </ion-item>
</ion-content>
5

here is the apk Notify.apk

6

This is not what he meant, what he wants is to display a count-down timer inside a local notification, so he’s asking if there is a way to update the body of a local notification after being delivered. Documentation of Capacitor local notifications plugin doesn’t mention updating a local notification. I tried your apk, it fires a new local notification every second that’s not what he wants.

1 Like
7

Hi, Did you find any solution?