javascript – I am unable to create notifications with the $cordovaLocalNotification plugin using IONIC

Question:

I tried to do it based on the code from this site: https://devdactic.com/local-notifications-ionic/

But when I press the button "Add notification" this error appears:

ionic.bundle.js:26771 ReferenceError: device is not defined
    at Scope.$scope.add (controllers.js:83)
    at fn (eval at <anonymous> (ionic.bundle.js:27615), <anonymous>:4:200)
    at ionic.bundle.js:65290
    at Scope.$eval (ionic.bundle.js:30372)
    at Scope.$apply (ionic.bundle.js:30472)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:65289)
    at defaultHandlerWrapper (ionic.bundle.js:16764)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:16752)
    at triggerMouseEvent (ionic.bundle.js:2953)
    at tapClick (ionic.bundle.js:2942)

And when I press the "Is Scheduled" button, this error appears:

ionic.bundle.js:26771 TypeError: Cannot read property 'plugins' of undefined
    at Object.isScheduled (ng-cordova.min.js:8)
    at Scope.$scope.isScheduled (controllers.js:97)
    at fn (eval at <anonymous> (ionic.bundle.js:27615), <anonymous>:4:224)
    at ionic.bundle.js:65290
    at Scope.$eval (ionic.bundle.js:30372)
    at Scope.$apply (ionic.bundle.js:30472)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:65289)
    at defaultHandlerWrapper (ionic.bundle.js:16764)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:16752)
    at triggerMouseEvent (ionic.bundle.js:2953)

Searching the internet I found that Cordova from version 4.0 to use this type of resource needs Whitelist for secure access to external domains I'm not sure about that, but even so I installed this plugin and added this tag to index.html:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *; style-src  &apos;self&apos; &apos;unsafe-inline&apos; *">

and even then it doesn't work.

The template looked like this:

<ion-content>
    <button class="button" ng-click="add()">Add notification</button>
    <button class="button" ng-click="isScheduled()">Is Scheduled</button>
</ion-content>

The script looked like this:

app.controller('AlarmeCtrl', function ($scope, $cordovaLocalNotification, $ionicPlatform) {

  //Notificações locais do Alarme
  $scope.add = function () {
    var alarmTime = new Date();
    alarmTime.setMinutes(alarmTime.getMinutes() + 1);
    var sound = device.platform == 'Android' ? 'file:C:\Users\knot\Music\I Stand Alone (2014_12_11 04_07_36 UTC).mp3' : 'file://beep.caf';
    $cordovaLocalNotification.add({
      id: "1234",
      date: alarmTime,
      message: "This is a message",
      title: "This is a title",
      autoCancel: true,
      sound: sound,
    }).then(function () {
      console.log("The notification has been set");
    });
  };

Answer:

The cordova object is only created when it is tested on a real or emulated device (such as AVD). The same goes for "device is undefined", device is a property of the global Window object, which cordova adds. Test by emulating an environment or running directly on a physical device.

If you want to test for iOS, and you don't have an iPhone, I advise you to use https://app.io/ . Here you can upload your app to a cloud and see it working as if it were on a device

Scroll to Top