Android LocalNotifications with Cordova (while Capacitor v3 is still not working)

Here is a simple example of how to set up Local Notifications on Android with Cordova / Capacitor, for every day or a specific day at time X

Android LocalNotifications with Cordova (while Capacitor v3 is still not working)

NOTE: This post is just for Android. I have not tried any of this with iOS.

Capacitor v3 has a LocalNotifications plugin. Despite the claims that these plugins are maintained and up-to-date by the Ionic core team, this is simply not always true. At time of writing, the plugin simply does not work properly, at least on Android. Additioanlly, there is zero helpful documentation on how to do even the simplest of things with it.

So I have for now, canned using this plugin and instead opted for the Cordova plugin. My intention is to swap this out as soon as the Capacitor plugin actually works and their documentation is updated accordingly.

Additional resources

For generating notification icon: https://romannurik.github.io/AndroidAssetStudio/index.html

Install the plugins

In order for the Android project to build, tThe old support library references need replacing. This is the sequence of stuff I did (something like this anyway):

Run these in commands in the terminal without the line numbers obviously:

npm install https://github.com/Steffaan/cordova-plugin-local-notifications.git
npm install cordova-plugin-badge
npm install cordova-plugin-device
npm install jetifier
npx cap sync
npx jetify
npx cap copy
npx cap open android

You should see old support library dependencies replaced with AndroidX and project should compile now inside Android Studio.

In the .ts of your page below your imports e.g.

import { Capacitor } from '@capacitor/core';

declare var cordova: any; // stop TypeScript complaining.

Note on Ionic Native wrapper

I don't bother using these for the most part as I find them completely unnecessary. Your mileage may vary and that's fine.

Every day at time X:

var smallIcon: "res://notification-logo";
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();

cordova.plugins.notification.local.schedule({
  id: 1,
  smallIcon: smallIcon,
  title: "My Amazing App",
  text: "Wow what a day!",
  trigger: { every: { hour: hours, minute: mins }, count: 365 },
  foreground: true
}); 

Specific weekday at time X (Monday = 1 to Sunday = 7):

var d = new Date();
var weekday = 3 // Wednesday
var hours = d.getHours();
var mins = d.getMinutes();

cordova.plugins.notification.local.schedule({
  id: 1,
  smallIcon: smallIcon,
  title: "My Amazing App",
  text: "Wow what a day!",
  trigger: { every: { weekday: weekday, hour: hours, minute: mins }, count: 365 },
  foreground: true
});

Conclusion

Despite Capacitor being at v3 and the promise of the plugins being solid, it's simply not true still. Capacitor does make writing your own plugins and integrating them much easier, I will readily admit that. However, whether it's Cordova or Capacitor, if you're relying on 3rd party plugins (i.e. not yourself who has written them) and there is a bug, it's exactly the same situation whichever approach you choose.

Comments: