How to Set Up Firebase Push Notifications in Capacitor Apps

The Challenge of Native Push Notifications

For web developers using Capacitor, push notifications are often the most difficult feature to implement. Unlike a standard web app, a native app requires a handshake between your server, Firebase Cloud Messaging (FCM), and the platform-specific services: Apple Push Notification service (APNs) for iOS and Google Play Services for Android.

While the @capacitor/push-notifications plugin provides the bridge, the configuration involves multiple moving parts. If you are building with tools like Lovable, Bolt, or Cursor, you may find the manual setup process time-consuming. This guide outlines the technical steps required to get notifications working and explains why many founders choose a native mobile app one-time fee service to handle the complexity.

Prerequisites for Capacitor Push Notifications

Before writing code, you must have your developer accounts ready. Apple requires a paid membership to use the push notification capability.

1. Apple Developer Program: $99 per year.
2. Google Play Console: $25 one-time fee.
3. Firebase Project: A free Spark plan is sufficient for starting with FCM.

Step 1: Install the Capacitor Plugins

To handle Firebase Cloud Messaging in a Capacitor environment, you generally need the core push plugin and the Firebase Cloud Messaging plugin to ensure iOS compatibility.

npm install @capacitor/push-notifications
npm install @capacitor-firebase/messaging
npx cap sync

The standard @capacitor/push-notifications plugin is excellent for registering the device, but on iOS, it often returns a native APNs Token (hexadecimal). Firebase requires an FCM token to send messages. Using the @capacitor-firebase/messaging plugin helps bridge this gap automatically.

Step 2: Android Configuration

Android is generally more straightforward but requires specific file placements.

1. Create an Android App in your Firebase Console.
2. Download the google-services.json file.
3. Place this file in your project at android/app/google-services.json.
4. Ensure your variables.gradle file includes the necessary Google Services versions.

Step 3: iOS Configuration (The Complex Part)

iOS requires several steps within Xcode and the Apple Developer Portal to function.

Certificates and Identifiers

You must create a Push Notifications Key (.p8 file) in the Apple Developer Portal. This key allows Firebase to communicate with APNs on your behalf. Upload this .p8 file to your Firebase Project Settings under the "Cloud Messaging" tab.

Xcode Capabilities

Open your project in Xcode and perform the following:

1. Select your main app target.
2. Go to Signing & Capabilities.
3. Click + Capability and add Push Notifications.
4. Click + Capability again and add Background Modes.
5. In the Background Modes section, select the Remote notifications checkbox.

Step 4: Initialising the Plugin in Code

You must request permission from the user before the device can receive notifications. This logic should live in your app's entry point (e.g., App.tsx or main.js).

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

const registerPush = async () => {
  let permStatus = await PushNotifications.checkPermissions();

  if (permStatus.receive === 'prompt') {
    permStatus = await PushNotifications.requestPermissions();
  }

  if (permStatus.receive !== 'granted') {
    throw new Error('User denied permissions!');
  }

  await PushNotifications.register();
};

Common Pitfalls and Debugging

Even with the correct code, notifications often fail for three reasons:

1. Simulator Limitations: Push notifications do not work on the iOS Simulator. You must test on a physical iPhone.
2. Provisioning Profiles: If your Xcode provisioning profile doesn't include the "Push Notifications" capability, the register() method will fail.
3. Token Mismatch: If your backend sends a message to an APNs token instead of an FCM token, the message will never arrive.

The Cost of Manual Implementation vs. Managed Services

Setting up push notifications manually takes a significant amount of developer time, especially when dealing with Apple's strict certificate requirements. If you are a non-technical founder, this process can be a major roadblock to launching on the App Store.

When comparing options, consider the long-term costs:

• DIY: $99/year (Apple) + $25 (Google) + your time.
• BuildNatively: Starts at $19 per month, which totals $228 per year. You do not own the source code.
• Median.co: $229 one-time fee, but they charge a $179 annual fee starting from the second year.
• KW Native: A one-time fee starting at £399. We handle the entire Firebase and APNs setup for you. You receive the full source code and GitHub repository, meaning you own the implementation forever with no forced subscriptions.

Why KW Native is the Better Choice

We specialise in converting web apps built on platforms like Lovable, Bolt, and Cursor into high-performance native apps.

Every KW Native build includes:

• Full Firebase FCM integration.
• Native permission dialogues.
• Background notification handling.
• Deep linking (Universal Links and App Links) so notifications open specific pages.

If you want to avoid the headache of certificates, tokens, and Xcode configuration, our Standard plan covers both iOS and Android setup in 12 business days for a single one-time payment. We ensure your app passes Apple's review, including the tricky Guideline 4.2, by providing a truly native experience.

Conclusion

Capacitor is a powerful tool for bringing web apps to mobile, and Firebase is the industry standard for notifications. While the manual setup is possible for technical users, it requires meticulous attention to detail across three different consoles (Apple, Google, and Firebase). For founders who want to focus on their product rather than infrastructure, a managed service provides a faster, more reliable path to the App Store.

Ready to skip the configuration? Convert your web app to mobile with KW Native today.