Push notifications in Capacitor with Firebase

Push notifications are table stakes for a real mobile app, and Firebase Cloud Messaging (FCM) is the standard way to deliver them to both iOS and Android from a Capacitor app. This guide walks through the full setup — native config, permissions, tokens, and handling taps — and shows where OtaKit lets you iterate the notification logic without a rebuild.

1. Install the push plugin

npm install @capacitor/push-notifications
npx cap sync

2. Set up Firebase

• Create a Firebase project and register your iOS and Android apps.
• Add google-services.json to the Android project and GoogleService-Info.plist to the iOS project.
• For iOS, upload your APNs key to Firebase — FCM delivers to iOS through APNs.

3. Request permission and register

import { PushNotifications } from '@capacitor/push-notifications';

const perm = await PushNotifications.requestPermissions();
if (perm.receive === 'granted') {
  await PushNotifications.register();
}

PushNotifications.addListener('registration', (token) => {
  // send token.value to your backend to target this device
  saveDeviceToken(token.value);
});

4. Handle received notifications and taps

PushNotifications.addListener('pushNotificationReceived', (notification) => {
  // app in foreground — show your own in-app UI
});

PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
  // user tapped — route to the right screen
  router.navigate(action.notification.data.route);
});

This routing logic is pure web-layer code. When you change how a tap routes, or tweak the in-app presentation, ship it over the air:

otakit upload --release production

Where to go next

See Setup to add OtaKit alongside the push plugin, and deep links since notification taps and deep links often share routing.