Installing and Syncing Capacitor Push Notifications

Hello! In our last lesson, we demystified the Capacitor plugin model, exploring how your web-based React code communicates with native Swift and Kotlin modules through the Capacitor bridge. You now have the conceptual framework for how JavaScript calls are proxied, serialized, and executed on the native side.

Today, we will transition from theory to practice. Our objective is to install your first native plugin, @capacitor/push-notifications, and integrate it into your iOS and Android projects. This is the foundational step for achieving one of your key goals: adding push notification capabilities to your application. We will use bun for package management and see how Capacitor's tooling automates the integration into the native builds within your Turborepo workspace.

The Two-Step Plugin Integration Process

Integrating a Capacitor plugin involves two main steps:

1. Installation: The plugin, which contains both the JavaScript interface and the pre-compiled native code, is added as a dependency to your web app's package.json.
2. Synchronization: The sync command is run to update the native projects. Capacitor inspects your web app's dependencies, detects the new plugin, and automatically configures the native projects to include it.

This process ensures that both the web and native layers of your application are aware of the new plugin and its capabilities.

Step 1: Installing the Plugin Package

First, you need to add the @capacitor/push-notifications package to your React SPA. Since you're working in a Turborepo monorepo, you will run this command within the directory of your web application package.

The following guide provides the exact commands, conveniently using bun as you prefer.

From your terminal, navigate to the root of your web app's package (e.g., apps/my-app) and run the first command you saw in the guide:

bun add @capacitor/push-notifications

This command adds the plugin to your package.json file. At this stage, only your web application is aware of the plugin. The native projects remain unchanged.

Step 2: Syncing with Native Projects

Now comes the crucial step where the bridge we discussed in the last lesson is extended. The sync command will connect the JavaScript package you just installed with its corresponding native components on iOS and Android.

From the root of your Turborepo monorepo, run the second command from the guide:

bunx cap sync

This command performs several actions, but its most important role when adding a new plugin is to update the native dependencies:

• For iOS: Capacitor automatically detects the CapacitorPushNotifications plugin and adds it as a dependency to your ios/App/Podfile. It then runs pod install in the background. This process, managed by CocoaPods (the dependency manager for iOS), downloads the plugin's native Swift code and integrates it into your Xcode workspace (App.xcworkspace). You can verify this by checking for a CapacitorPushNotifications entry in your ios/App/Podfile.lock.
• For Android: The sync command registers the plugin's native Java/Kotlin code as a new library module in your Android project's Gradle configuration. Gradle, the build automation tool for Android, will then automatically include this library during the next build. This change is typically registered in the android/capacitor.build.gradle file, which is managed by Capacitor.

By running bunx cap sync, you have effectively "bridged" the gap. The native projects now contain the necessary code to handle push notification events, ready to be called from your React application.

A Glimpse of What's Next: Native Configuration

Installing and syncing the plugin is just the beginning. To make push notifications fully functional, each platform requires specific setup in its native project environment. We will not perform these steps today, but understanding them is essential for what comes next.

The official Capacitor documentation provides a clear overview of these platform-specific requirements.

As you can see from the documentation, the next steps will take us directly into the native IDEs—Xcode and Android Studio—to finalize the configuration.

Conclusion

In this lesson, we successfully installed and integrated your first native plugin, @capacitor/push-notifications. You've put the theory from our previous lesson into practice, using Capacitor's CLI to automate the complex task of linking a JavaScript package to native codebases.

Let's summarize the key takeaways:

• Capacitor plugins are installed as standard npm packages into your web app using bun add.
• The bunx cap sync command is the critical link that detects new plugins and automatically configures the iOS and Android projects by updating their respective dependency managers (CocoaPods and Gradle).
• While installation is automated, plugins often require platform-specific configuration within the native projects to become fully functional.

In our next lesson, we will dive into the iOS-specific setup. You will learn how to enable push notification capabilities in Xcode and provide the necessary credentials from the Apple Developer portal, bringing your app one step closer to receiving its first push notification on an iOS device.