Chapter 5 of 12 Key Chapter ~20 min read

Push Notifications ⭐

Side-by-side Cordova vs Capacitor — practical migration with working code.


Firebase Push — Full Migration

Cordova
// phonegap-plugin-push
const push = PushNotification.init({
  android: {
    senderID: "YOUR_SENDER_ID"  // deprecated!
  },
  ios: {
    alert: "true",
    badge: true,
    sound: "true"
  }
});

push.on('registration', data => {
  console.log('Token:', data.registrationId);
});

push.on('notification', data => {
  console.log('Notification:', data.message);
  push.finish(() => console.log('done'));
});

push.on('error', err => {
  console.error('Push error:', err);
});
Capacitor
// npm install @capacitor/push-notifications
import {
  PushNotifications, Token,
  ActionPerformed, PushNotificationSchema
} from '@capacitor/push-notifications';

async function initPush() {
  // 1. Request permission
  const perm = await PushNotifications.requestPermissions();
  if (perm.receive !== 'granted') return;

  // 2. Register with FCM/APNs
  await PushNotifications.register();
}

// 3. Listeners (add once at app start)
PushNotifications.addListener('registration',
  (token: Token) => {
    console.log('FCM Token:', token.value);
    // Send to your backend server
  }
);

PushNotifications.addListener('pushNotificationReceived',
  (notification: PushNotificationSchema) => {
    console.log('Foreground push:', notification.title);
  }
);

PushNotifications.addListener('pushNotificationActionPerformed',
  (action: ActionPerformed) => {
    // User tapped notification — navigate!
    console.log('Tapped:', action.notification.data);
  }
);
Android setup — google-services.json

Place google-services.json from Firebase Console into android/app/google-services.json. For iOS, place GoogleService-Info.plist inside Xcode via Android Studio/Xcode — you own these native projects directly, so no Cordova hook tricks needed.

Local Notifications

Cordova
// cordova-plugin-local-notification
cordova.plugins.notification.local.schedule({
  id: 1,
  title: 'Reminder',
  text: 'Don't forget your task!',
  trigger: { at: new Date(Date.now() + 5000) }
});
Capacitor
import { LocalNotifications } from
  '@capacitor/local-notifications';

await LocalNotifications.schedule({
  notifications: [{
    id: 1,
    title: 'Reminder',
    body: "Don't forget your task!",
    schedule: {
      at: new Date(Date.now() + 5000)
    },
    channelId: 'reminders',
  }]
});