Ionic capacitor Local Notification

Question

I am trying to implement Capacitor LocalNotification plugin.

import { Plugins, CameraResultType } from '@capacitor/core';
const { LocalNotifications } = Plugins;

In the code below like like

 schedule() {
    console.log('----')
    LocalNotifications.schedule({
      notifications: [
        {
          title: "aaaa",
          body: "Body",
          id: 1,
          smallIcon: 'house',
          actionTypeId: 'OPEN_PRODUCT',
          
          schedule: {
            every: "minute"
          },

          extra: null
        }
      ]
    });
  }

I am testing on ios simulator, the method is getting called and in Xcode-debug i am getting like this:

   To Native ->  LocalNotifications schedule 1850642
⚡️  TO JS {"notifications":[{"id":"1"}]

But notification not showing in simulator.

I am not using cordova/ionic-native in this project. Please help if i need to run some npm package etc to get this to work.

Answer 1

It should work on the simulator so that's not the issue. I think the problem is that the every parameter is used together with repeats and you also need to specify when the first notification should be shown.

export interface LocalNotificationSchedule {
    at?: Date;
    repeats?: boolean;
    every?: 'year' | 'month' | 'two-weeks' | 'week' | 'day' | 'hour' | 'minute' | 'second';
    count?: number;
    on?: {
        year?: number;
        month?: number;
        day?: number;
        hour?: number;
        minute?: number;
    };
}

So for example if you want to set a notification to be shown one minute after the function is called (and every minute after that) it could be done like this:

 schedule() {
    const randomId = Math.floor(Math.random() * 10000) + 1;

    LocalNotifications.schedule({
      notifications: [
        {
          title: "Test Title",
          body: "Test Body",
          id: randomId,
          schedule: {
            at: new Date(Date.now() + 1000 * 60) // in a minute
            repeats: true,
            every: "minute"
          }
        }
      ]
    });
  }

Answer 2

This works for me on Capacitor 3 .

Offical doc: https://capacitorjs.com/docs/apis/local-notifications#install

local-notifications.service.ts

import { Injectable } from '@angular/core';

import { LocalNotifications } from '@capacitor/local-notifications';

import { random } from 'lodash';

@Injectable({
  providedIn: 'root',
})
export class LocalNotificationsService {
  constructor() {}

  showLocalNotification(title: string, body: string, at: Date, id: number = random(0, 1000)): void {
    LocalNotifications.schedule({
      notifications: [
        {
          title,
          body,
          id,
          schedule: {
            at,
          },
        },
      ],
    });
  }
}

lead-details.component.ts

 createReminder(lead: LeadModel): void {
   this.localNotificationsService.showLocalNotification(
      lead.name,
      lead.address,
      new Date(lead.reminderDate)
    );
  }

lead.model.ts

export interface LeadModel {
  name?: string;
  address?: string;
  reminderDate?: string;
}