Schedule a daily Local Notification in Ionic 3 at a designated time

I have integrated the Ionic 3 local notification plugin into my project by running these commands:

ionic cordova plugin add cordova-plugin-local-notification
npm install --save @ionic-native/local-notifications

All necessary dependencies have been added to my constructor.

The code snippet is as follows:

let year = new Date().getFullYear();
let month = new Date().getMonth();
let day = new Date().getDate();

let time1 = new Date(year, month, day, 10, 00, 0, 0);
let time2 = new Date(year, month, day, 12, 00, 0, 0);

this.localNotifications.schedule([
  {
    id: 1,
    title: 'My first notification',
    text: 'First notification test one',
    trigger: { at: new Date(time1) },
    data: {"id": 1, "name": "Mr. A"}
  },
  {
    id: 2,
    title: 'My Second notification',
    text: 'Second notification on 12 pm',
    trigger: { at: new Date(time2) },
    data: {"id": 2, "name": "Mr. B"}
  }
]);

While this setup works fine for triggering notifications on app start for the current day, I now aim to schedule a notification every day at the specified time.

It's important to note that I specifically intend to use local notifications and not push notifications.

Answer №1

If you want to set up a daily recurring notification, you can utilize the every:"day" parameter (or specify the interval in minutes with every: 24*60) along with the firstAt attribute indicating the date and time of the initial trigger for the notification. Check out this code snippet:

let year = new Date().getFullYear();
let month = new Date().getMonth();
let day = new Date().getDate();

let time1 = new Date(year, month, day, 10, 00, 0, 0);
let time2 = new Date(year, month, day, 12, 00, 0, 0);

this.localNotifications.schedule([
  {
    id: 1,
    title: 'My first notification',
    text: 'First notification test one',
    firstAt: new Date(time1),
    every: 24*60,
    data: {"id": 1, "name": "Mr. A"}
  },
  {
    id: 2,
    title: 'My Second notification',
    text: 'Second notification on 12 pm',
    firstAt: new Date(time2),
    every: 24*60,
    data: {"id": 2, "name": "Mr. B"}
  }
]);

Answer №2

Their codebase includes a commented section indicating that this task can be achieved by following these steps:

this.localNotifications.schedule({
 text: 'Delayed ILocalNotification',
 trigger: {at: new Date(new Date().getTime() + 3600)},
 led: 'FF0000',
 sound: null});

If you need to send a notification daily at the same time, you have two options:

1 - schedule multiple notifications and check each time the user opens the app

2 - reschedule a notification every time the user opens an already received notification.

Answer №3

To set up a daily recurring notification, you will need to utilize the every:"day" attribute along with the firstAt property specifying the date and time when the first notification should be triggered.

Important: In contrast to the cordova plugin in Ionic 3, the firstAt property must be nested within the trigger field. For more detailed instructions, refer to the Ionic Local Notification Documentation.

Here is an example code snippet for your implementation:

let year = new Date().getFullYear();
let month = new Date().getMonth();
let day = new Date().getDate();

let time1 = new Date(year, month, day, 10, 00, 0, 0);
let time2 = new Date(year, month, day, 12, 00, 0, 0);

this.localNotifications.schedule([
  {
    id: 1,
    title: 'My first notification',
    text: 'First notification test one',
    trigger: {firstAt: new Date(time1)},
    every: "day",
    data: {"id": 1, "name": "Mr. A"}
  },
  {
    id: 2,
    title: 'My Second notification',
    text: 'Second notification on 12 pm',
    trigger: {firstAt: new Date(time2)}, 
    every: "day",  // Options include "day", "hour", "minute", or "week"
    data: {"id": 2, "name": "Mr. B"}
  }
]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with observable errors in Angular 2 beta.12 and RxJS 5 beta.3

Greetings, Currently, I am working with Angular2 beta 12 within VS2015. Upon updating from rxjs version 5.0.0-beta.2 to beta.3, I started encountering several exceptions primarily related to promises. For instance: The property map is not present in th ...

security fails to redirect promptly

There seems to be an issue with the page not redirecting correctly when using "the guard," resulting in the URL staying as http://localhost:8100/ instead of http://localhost:8100/auth, which causes a blank page to display. In the file auth.guard.ts: canL ...

Issue with deep linking functionality on S3 storage service turning out to be

After successfully deploying my angular5 app to: http://myApp.s3domain.amazonaws.com The Angular router is automatically directing me to http://myApp.s3domain.amazonaws.com/home However, when I try to access a link with a unique parameter like so: http:/ ...

Caution in version 3.5.1 of Vue Router: The tag prop of `<router-link>` is now obsolete and has been eliminated in Vue Router 4

After updating the node packages of our Vue.js app, a warning is now appearing in the browser console: [vue-router] The 'tag' prop has been deprecated and removed in Vue Router 4. To remove this warning, use the v-slot API. Check out the migrat ...

How can I apply bold styling to my interpolation binding in Angular while working on my HTML code?

Below is the code snippet where I am attempting to highlight profile.userId: <p class="profile__last-login" *ngIf="profile.lastLoggedIn"> {{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId + ',' + (pr ...

Verifying the legitimacy of the elements in an n-dimensional array

In my journey to create my own Tensor class (n-dimensional arrays) in typescript, I have devised a structure where the data is stored in a 1D array property, and the shape of the data is stored separately for indexing purposes. My goal is to develop a fun ...

How to utilize the same route in Angular 8 with varying states using NavigationExtras?

In my project, I am using Angular 8 and Ionic 4. I have a route for activities where users can create (POST) or edit (PUT) based on the value of the onEditMode parameter provided in the NavigationExtras state. However, after accessing the route for the se ...

Why can't I omit <someUnion, oneInterface> in TypeScript?

Kindly review this simple example: interface A { a: number; } interface B { b: number; } interface C { c: number; } type ABC = A | B | C; type omitA = Omit<ABC, A>; https://i.sstatic.net/5Mun4.png Unfortunately, I am unable to exclude an i ...

What is the method for activating a hook after a state change in a functional component?

I'm currently working on a custom pagination hook that interacts with an API to fetch data similar to React Query. The concept is straightforward. I aim to invoke this hook whenever a specific state (referred to as cursor) undergoes a change. Below i ...

Encountering an error in Angular: Module '@angular-devkit/core' not found

Whenever I run ng serve on my fresh Angular project, I encounter the following error: module.js:538 throw err; ^ Error: Cannot find module '@angular-devkit/core' What could be causing this issue? ...

Disabling an attribute/element from change detection in Angular

Let's say I have the following code in my template: <img src="..." alt="myService.getImgAlt()" /> This works fine, but calling this function at every change detection can impact performance negatively. Is there a way to excl ...

Issue: Import statement cannot be used outside a module in Appium

Encountering the following error while working on a colleague's laptop, so it appears that there is no issue with the code itself. It could be related to my local packages but I am not entirely certain. node version: v18.20.1 npm version : 10.5.0 impo ...

Difficulties with managing button events in a Vue project

Just getting started with Vue and I'm trying to set up a simple callback function for button clicks. The callback is working, but the name of the button that was clicked keeps showing as "undefined." Here's my HTML code: <button class="w ...

Oops! The program encountered an issue where it was unable to access the properties of an undefined variable, specifically while trying to

When creating a custom validation function in Angular, I encountered an issue where using a variable within the validation would result in an error: "ERROR TypeError: Cannot read properties of undefined (reading 'file')". This occurred when chang ...

Implementing TypeScript inheritance by exporting classes and modules

I've been struggling with TypeScript's inheritance, it seems unable to resolve the class I'm trying to inherit. lib/classes/Message.class.ts ///<reference path='./def/lib.d.ts'/> ///<reference path='./def/node.d.ts& ...

Getting a list of the stack resources available in cloudformation using TypeScript

My team is developing an application that will deploy multiple stacks to AWS. One of these stacks is called SuperStar, and it can only exist once per AWS account. I am currently exploring how our TypeScript CDK can retrieve a list of stacks from CloudFor ...

Guide on incorporating a library into an external project without the need to publish it on NPM for Angular applications

I've encountered an issue with my 2 angular apps that require the use of the same services and interfaces. To address this, I decided to create a separate project where I built a library containing these shared services and interfaces. Once the librar ...

Utilizing a variety of Reactive FormGroups to manage a shared data source

My data source is structured as follows: data = { Bob: { hobbies: ['cycling', 'swimming'], pets: ['cat', 'dog'] }, Alice: { hobbies: ['cycling, 'chess'] ...

How can I retrieve a response from an iframe login within an Angular application?

I am currently implementing a third-party login page within my Angular 8 application. I have been working on integrating third-party identity management into Angular 8 apps and am using an Iframe to load the login page. While I can successfully log in with ...

Html Showing two objects

I am working with an object array that is being sent from an API. Right now, it is displaying the index position, but I actually want to display the object key and its corresponding value. I believe I may be mapping the object key incorrectly. Could anyone ...