Ionic Capacitor local notifications "dynamic" body

Capacitor
1

Hi!

Let’s say I want to schedule a local notification where the notification “sends” a new word every day to the user, and these words exist locally in my app (in a .json file).

Is it possible to schedule a local notification that gets a new random word from the .json file each time a notification is “sent” to the user?

Like this:

LocalNotifications.schedule({
  notifications: [
    {
      title: 'Word of the Day',
      body: getWordOfTheDay(),
      id: 1,
      schedule: {
        on: {
          hour: 9,
          minute: 0
        }
      }
    }
  ]
});

Or is that not possible with local notifications?

Or would I need to schedule multiple notifications with different id:s for future dates (let’s say 1 year forward)? And then maybe generate new scheduled notifications whenever the user opens the app (and if they don’t open the app for a year they stop getting notifications)?

Thank you!

2

Hi!

Maybe you figured this out already but it is something I was struggling with for some time. The only way I found to do this was to use the setInterval() to call the Local Notifications scheduling each day.

Just want to clarify, I’m a Hobby programmer so my code is not elegant :slight_smile:

Within the Scheduling function, I remove the Listeners, update the title and body strings, then re-add the Listeners, and call LocalNotifications.schedule again.

It should also be noted that you will need to setup Deeplinks correctly to use the “this.router.navigateByUrl(‘/display-notification/’ + qID);” in the localNotificationActionPerformed Listener.

async ngOnInit() {

this.Questions = AppComponent.Questions;
this.Descriptions = AppComponent.Details;

await LocalNotifications.requestPermissions();
LocalNotifications.registerActionTypes({
  types: [
    {
      id: 'REMINDERS',
      actions: [
        {
          id: 'open',
          title: 'Open App'
        },
        {
          id: 'remove',
          title: 'Clear Message',
          destructive: true
        }
      ]
    }
  ]
});

await this.checkReminderState();

if (this.reminder) {
  await this.scheduleReminder();
}

setInterval(() => {
  // For testing purposes this is currently set  every 60 second - 
  if (this.reminder) {
    this.scheduleReminder();
  }
}, 60000);

}

async checkReminderState() {
…
// Set reminder value true or false
}

async scheduleReminder() {
// Remove Listeners
await LocalNotifications.removeAllListeners();
await LocalNotifications.cancel({ notifications: [{ id: 1 }] });

this.setQuestion(); // Update the values of title and body (this.notificationDetails.title,  this.notificationDetails.body,)

this.addNotificationListeners(); // Re-add the Listeners

await LocalNotifications.schedule({
  notifications: [
    {
      title: this.notificationDetails.title,
      body: this.notificationDetails.body,
      id: 1,
      extra: {
        data: this.notificationDetails.id,
      },
      iconColor: 'green',
      actionTypeId: 'REMINDERS',
      schedule: {
        on: {
          // hour: 10,
          second: 10,
        },
        every: 'day',
        allowWhileIdle: true,
      },
    },
  ],
});

}

addNotificationListeners() {
const qID = this.notificationDetails.id;

LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
//Capturing the actionId for validation
if (notification.actionId) {
    console.log('Local Notification Action ID: ' + notification.actionId);
  }

  if (notification.actionId === 'tap') {
            this.zone.run(() => {
              this.router.navigateByUrl('/display-notification/' + qID);
            });
          }
  else if (notification.actionId === 'open') {
    this.zone.run(() => {
      this.router.navigateByUrl('/display-notification/' + qID);
    });
  }
});

LocalNotifications.addListener('localNotificationReceived', (notification) => {
      });

}