LocalNotifications - @ionic-native/local-notifications

Ionic Native
1

I’m having some issue using “LocalNotifications” in my ionic2 app. Here is my ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.3.2 Build version 8E2002

I have followed the documentation from:

$ ionic plugin add de.appplant.cordova.plugin.local-notification
$ npm install --save @ionic-native/local-notifications

I see "de.appplant.cordova.plugin.local-notification 0.8.5-dev “LocalNotification” installed in my project.

class MyApp
constructor(
    public platform: Platform,
    public localNotifications: LocalNotifications, ....)

   platform.pause.subscribe(() => {
        console.log('pause started');
        localNotifications.schedule({
          id: 1,
          title: "Test Title",
          text: "Delayed Notification",
          at: new Date(new Date().getTime() + (5 * 1000))
        });
      });.....

But when i tested it on emulator or my iphone 7+, i’m not getting the notification.

Any help will be appreciated.

2

Hi Hyongilmoon,

I have tried local notification. the way you are trying is applicable to ionic 2 version. Your ionic framework version is - 3.0.1. For this ionic 3 version use following link.
https://ionicframework.com/docs/native/local-notifications/'
I have successfully implemented this.
What you need to do is
1.create provider for local notification. Write scheduling method in this provider (given in link I shared)
2. call the scheduling method in provider from your home.ts file.

let me know if you need more

3

Hi there @hyongilmoon

I have just implemented this plugin into one of my projects and I had a little trouble. One thing to watch out for is that IOS now only display local notifications when the app is in the background mode/not focused (link).

I also used Eddy Verbruggen repo as I believed this has the IOS 10 fixes. Although both Eddy Verbruggen and Katzer do have an IOS 10 branches on there repos. Could be that you code is all good in the hood, just local notification are not working in the way in witch toy attend them to do.

EddyVerbruggen : https://github.com/EddyVerbruggen/cordova-plugin-local-notifications

4

Thank for your reply!

But I’m still having some issue with local notification. The following code works when testing with iOS simulator but not in my iPhone7+.

What I want to do is when an app’s running in the background, i want to send a notification to a user after a few seconds…

// The pause event emits when the native platform puts the application into the background, typically when the user switches to a different application.
this.platform.pause.subscribe(() => {

console.log(‘pause before’);
this.localNotifications.cancelAll().then(() => {
let notification = {
id: 999,
title: ‘Hey!’,
text: ‘You put me into background :(’,
at: new Date(new Date().getTime() + (10 * 1000)),
every: ‘0’
};
this.localNotifications.schedule(notification);

      console.log('localNotifications schedule --> success');

    }, (err) => {

      console.log('localNotifications schedule --> fail:' + err);

    });

});

this.platform.resume.subscribe(() => {
console.log(‘resume’);
});

Running it within iOS simulator, I see logs (pause before, localNotifications schedule --> success) from console and received notification after 10 seconds when app goes into background. But running with real iOS device, I only see the log for “pause before” when i put the app into background. The rest of code is not executed until resume…

5

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

6

local-notification.ts

export class LocalNotificationProvider {

  constructor(private localNotifications: LocalNotifications) {
    console.log('Hello LocalNotificationProvider Provider');
  }

  schedule(notification: any[]): Promise<any> {

    return new Promise((resolve, reject) =>
      this.cancellAll().then((results) => {
        this.localNotifications.schedule(notification);
        resolve(results)
      }, err => reject(err)))
  }

  cancellAll(): Promise<any> {

    return this.localNotifications.cancelAll()

  }

}

app.component.ts

this.platform.pause.subscribe(() => {

        console.log('pause');

        let notification = {
          id: 999,
          title: 'Hey!',
          text: 'You put me into background :(',
          at: new Date(new Date().getTime() + (10 * 1000)),
          every: '0'
        };

        this.localNotificationProvider.schedule([notification]).then(() => {
          console.log('localNotifications schedule --> success');
        }, (err) => {
          console.log('localNotifications schedule --> fail:' + err);
        });

      });

      this.platform.resume.subscribe(() => {
        console.log('resume');
      });

Running it with iOS simulator:

Notfication works and I see the logs in the safari console -
[Log] pause (console-via-logger.js, line 173)
[Log] localNotifications schedule --> success (console-via-logger.js, line 173)

Running it with real device (iPhone7+);

Notification works after app’s running in forground (resume) again. I only see the following in the safari console when I put the app into background mode.
[Log] pause (console-via-logger.js, line 173)

schedule call back block is called after app’s resumed.

7

Finally got it working :smile: I had to use cordova background mode instead of using Platform

this.backgroundMode.on('activate').subscribe(() => {

        console.log('backgroundMode --> activate')

        let notification = {
          id: 999,
          title: 'Hey!',
          text: 'You put me into background :(',
          at: new Date(new Date().getTime() + (5 * 1000)),
          every: '0'
        };

        this.localNotificationProvider.scheduleWithoutCancel([notification])

      })
2 Likes