Notification Alerts within Mobile Apps

Just wanted to share an update on my progress with a mobile application built on Ionic and utilizing Firebase as the database. One of the features I'm currently working on is implementing local notifications. Below are the code snippets:

HTML CODE

   <button ion-button full (click)="scheduleNotification()">schedule</button>
   <button ion-button full (click)="scheduleNotification2()">schedule</button>

This HTML code snippet contains buttons that trigger the scheduling of notifications upon clicking.

TYPESCRIPT CODE

      import { Component } from '@angular/core';
      import { NavController, Platform} from 'ionic-angular';
      import { LocalNotifications } from '@ionic-native/local-notifications';
    @Component({
    selector: 'page-home',
     templateUrl: 'home.html'
   })
    export class HomePage {

    constructor(public navCtrl: NavController, private 
    localNotif:LocalNotifications, private platform:Platform) {

     }

    scheduleNotification() {
     this.platform.ready().then(()=>{
      this.localNotif.schedule({
    
        title:'Attention',
        text:'Rk notification',
        at: new Date(new Date().getTime() + 1 * 5000),
       
      });
      });
    }
     
     scheduleNotification2() {
     this.platform.ready().then(()=>{
      this.localNotif.schedule({
    
        title:'Attention',
        text:'Rk notification',
        at: new Date(new Date().getTime() + 1 * 5000),
       
      });
      });
    }


  
}

The issue I've encountered is that when I click both buttons to trigger the notifications, only one notification displays while overriding the other. My goal is to have both notifications appear without any overriding. Any suggestions on how to achieve this?

Answer №1

Make sure to include an id when setting up your localNotification. The id should be a numerical value, and if not specified, it defaults to 0, potentially overriding any previously scheduled notifications.

If users have the ability to interact with notifications (such as editing or deleting), it's recommended to store this id so they can manage them effectively.

Generating unique ids is crucial, and one simple method is using Math.random(), especially if you're unsure about how frequently notifications will be created.

scheduleNotification() {
 this.platform.ready().then(()=>{
  this.localNotif.schedule({
    id: Math.round(Math.random() * 1000000)), // Generates a random 7-digit id
    title:'Attention',
    text:'New notification',
    at: new Date(new Date().getTime() + 1 * 5000),
  });
  });
}

When dealing with time manipulations, always aim for the smallest time unit possible - preferably using milliseconds or seconds.

I hope this explanation proves helpful.

Answer №2

Instead of using local notifications, try implementing an alert controller. For more information on how to do this, check out this link.

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

"Manipulating values in an array with a union type: a guide to setting and

I am currently working on creating an array that can have two different value types: type Loading = { loading: true } type Loaded = { loading: false, date: string, value: number, } type Items = Loading | Loaded const items: Items[] = ...

Creating a function that utilizes a default argument derived from a separate argument

Consider this JavaScript function: function foo({ a, b, c = a + b }) { return c * 2; } When attempting to add type annotations in TypeScript like so: function foo({ a, b, c = a + b }: { a?: number, b?: number, c: number }): number { return c * 2; } ...

Is there a way to turn off the "defer" feature in an Angular build?

After compiling my Angular project, I noticed that the compiler automatically adds the "defer" attribute to the script tag in my "index.html" file. However, I need to disable this feature. Is there a way to do it? I am currently working with Angular versi ...

Angular TSLint: Proceed to the following stage despite any encountered errors

I'm facing issues with TSLint in my Azure Devops Build Pipeline. Despite encountering lint errors, I need the build pipeline to proceed to the next step. How can I achieve this? Command Line: - script: | npm run lint > tsLintReport.txt ...

Determining the sequence of events for @HostListener event within an Angular directive

I am facing an issue with my Angular 9 application wherein a parent component contains a child component (referred to as "overview") which has a button. Upon clicking the button, the child component emits an event that should be handled by the parent compo ...

A step-by-step guide on incorporating MarkerClusterer into a google-map-react component

I am looking to integrate MarkerClusterer into my Google Map using a library or component. Here is a snippet of my current code. Can anyone provide guidance on how I can achieve this with the google-map-react library? Thank you. const handleApiLoaded = ({ ...

employing constructor objects within classes

I am attempting to utilize a class with a constructor object inside another class. How should I properly invoke this class? For example, how can I use Class 1 within Class 2? Below is an instance where an object is being created from a response obtained f ...

Switching from the `async` pipe to `ngrxPush` for handling state updates in Angular

While utilizing Angular schematics for generating my Angular code, I came across the following line ngrx-push-migration - Migration to replace async pipe with ngrxPush This piqued my interest, so I decided to do some research and discovered The ngrxPu ...

Ways to display Leaflet pins within Angular?

I've been working with Leaflet and despite extensive research, I'm still struggling to get my marker to display on the map. I've tried all the solutions available out there, including the Angular workaround recommended by Leaflet. Currently ...

What might be causing my action function to be triggered during the rendering process?

While working on creating a basic card view in material UI, I encountered an issue where the functions for adding and deleting items seem to be triggered multiple times upon rendering. I am aware that a common reason for this could be using action={myFunc ...

Trouble with React Context State Refreshing

Exploring My Situation: type Props = { children: React.ReactNode; }; interface Context { postIsDraft: boolean; setPostIsDraft: Dispatch<SetStateAction<boolean>>; } const initialContextValue: Context = { postIsDraft: false, setPostIs ...

Obtaining specific information about the target item that a source item was dropped on (using ng2-dragula in Angular)

Issue: I need assistance in implementing the following functionality using the ng2-dragula drag behavior. I am working on creating a feature similar to the app-launcher found on iOS and Android devices. I aim to drag an item A and drop it onto anothe ...

Tips for arranging objects consecutively with angular's *ngFor

I need help with displaying items inline instead of in different rows. I have searched online for solutions, but couldn't find a relevant answer. Can anyone assist me with this? Thank you! https://i.sstatic.net/AvlMj.jpg <!DOCTYPE html> <h ...

The type 'undefined' cannot be assigned to type 'CartItem'

While running my program, I encountered the error 'Type 'undefined' is not assignable to type 'CartItem'. Unfortunately, I am unable to resolve this issue :(. import { Injectable } from '@angular/core'; import { CartItem ...

Issue encountered when attempting to invoke a service from an Angular component within an office.js dialog

Our application utilizes Angular 5 and integrates Office.js to interact with Microsoft Office Word documents. Step 1: We use office displayDialogAsync to load the component. https://i.sstatic.net/uhT66.png Step 2: Inside the attribute-users component, an ...

The compatibility between TypeScript and the Node.js crypto module is currently not fully optimized

Incorporating encryption into my project using vuejs and typescript has been a challenge. I managed to implement it in the .vue file successfully, but encountered an issue when trying to write the encryption into a typescript class. The mocha test runs fin ...

Retrieve Data using Axios and Save in Interface with Multiple Arrays in TypeScript

Hey everyone, I'm facing an issue when trying to make a GET request using Axios through an API. When I try to assign the selected data from Axios to the userDetail interface, it gives me an error. Please take a look at the Code Sandbox where I have in ...

What is the correct way to bring in a utility in my playwright test when I am working with TypeScript?

I am working on a basic project using playwright and typescript. My goal is to implement a logger.ts file that will manage log files and log any logger.info messages in those files. To set up my project, I used the following commands and created a playwri ...

Combining Python, Ionic, and MySQL for Enhanced Notifications

I am working on a Python code that inserts data into a MySQL table. My goal is to receive only the newly inserted data in my Ionic application, not the entire table, in order to notify users whenever a new entry is added. My attempts with observables were ...

What is the method for creating an object type that necessitates a key determined by a variable?

Is it feasible to create a custom type in TypeScript that can check if a given key exists within the Type definition? I am specifically using noUncheckedIndexAccess: true configuration. interface one { foo: string; bar: string; } interface two { b ...