Ionic 2本地通知不显示，报未知属性'at'警告求助

Hey there, let's troubleshoot this issue step by step— that "Unknown property: at" warning is a clear clue pointing us right to the problem, and we'll get your notifications working in no time!

Why This Happens #

The core issue here is a parameter structure change in the cordova-plugin-local-notifications plugin. Older versions let you use at directly in the schedule options, but newer releases (v0.9+) require wrapping timing properties like at inside a trigger object. Since your code uses the old structure, the plugin doesn't recognize the at property—hence the warning—and your notification never fires.

Step 1: Fix the Notification Schedule Code #

Update your myNotifications() method to move the at property into a trigger object:

myNotifications() {
  this.localNotifications.schedule({
    id: 1,
    title: 'ABC Meeting Notification',
    text: 'ABC Meeting will start in 20 mins',
    // Wrap `at` inside the trigger object
    trigger: {
      at: new Date(new Date().getTime() + 20*60*1000)
    },
    data: { fullMsq: 'this is the full notification message' }
  });
}

Step 2: Add iOS Notification Permission Request #

iOS requires explicit user permission to show notifications—if you skip this step, your notifications will never appear even if your code is correct. Update your platform ready block to include permission handling:

this.platform.ready().then((ready) =>{
  // Request notification permission first
  this.localNotifications.requestPermission().then(permission => {
    if (permission === 'granted') {
      // Only register the click listener if permission is granted
      this.localNotifications.on('click', (notification, state) => {
        let json = JSON.parse(notification.data);
        let alert = this.alertCtrl.create({
          title: notification.title,
          message: json.fullMsq
        });
        alert.present();
      });
    }
  });
});

Step 3: Verify Ionic Native Version Compatibility #

Since you're using Ionic 2, make sure you're using a compatible version of @ionic-native/local-notifications. Ionic 2 works best with version 4.x of the Ionic Native wrappers. If you installed the latest version (built for Ionic 3+), downgrade it with:

npm install --save @ionic-native/local-notifications@4.20.0

Full Updated HomePage Code #

Here's what your complete HomePage code should look like after these changes:

import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { LocalNotifications } from '@ionic-native/local-notifications';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(
    public navCtrl: NavController, 
    public platform: Platform, 
    private screenOrientation: ScreenOrientation, 
    private localNotifications: LocalNotifications, 
    public alertCtrl: AlertController 
  ) {
    this.platform.ready().then(() =>{
      this.localNotifications.requestPermission().then(permission => {
        if (permission === 'granted') {
          this.localNotifications.on('click', (notification, state) => {
            let json = JSON.parse(notification.data);
            let alert = this.alertCtrl.create({
              title: notification.title,
              message: json.fullMsq
            });
            alert.present();
          });
        }
      });
    });
  }

  myNotifications() {
    this.localNotifications.schedule({
      id: 1,
      title: 'ABC Meeting Notification',
      text: 'ABC Meeting will start in 20 mins',
      trigger: {
        at: new Date(new Date().getTime() + 20*60*1000)
      },
      data: { fullMsq: 'this is the full notification message' }
    });
  }
}

Final Checks #

1. Rebuild your Ionic project for iOS to apply all changes:

   ionic cordova platform remove ios
   ionic cordova platform add ios
   ionic cordova build ios
   

2. Test on a real iOS device (simulators often have limited support for local notifications) and tap the Test button again. You can shorten the delay to 10 seconds (+ 10*1000) to test faster.

You should no longer see the "Unknown property: at" warning, and your notification will appear as expected.

内容的提问来源于stack exchange，提问作者GreenDome