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',
}]
});