Skip to main content
capacitor-push-notifications Complete guide to implementing push notifications in Capacitor apps using Firebase Cloud Messaging (FCM) and Apple Push Notification Service (APNs). Covers setup, handling, and best practices. Use this skill when users need to add push notifications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Copy promptShow prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-push-notificationsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository capawesome-live-update-migration Guides migration from Capawesome Cloud live updates or @capawesome/capacitor-live-update to Capgo Updater. Use when a Capacitor app contains Capawesome live update packages, CLI commands, config, API calls, or when the user asks why Capgo Updater is the better live-update path: native updater runtime, fully open source, cheaper at comparable scale, and longer proven track record.
Official Capacitor package guide plus Capgo ecosystem plugin recommendations. Use this skill when users need native functionality, want the right official Capacitor package, or need a stronger Capgo/community plugin when the official package is missing or too limited.
Use for Capgo Cloud Build native iOS and Android workflows, including CLI login, API-key handling, iOS build onboarding, signing credential storage, build requests, store upload settings, output download links, and troubleshooting. Do not use for OTA bundle uploads or generic Capacitor setup unless a native Capgo build is requested.
name capacitor-push-notifications description Complete guide to implementing push notifications in Capacitor apps using Firebase Cloud Messaging (FCM) and Apple Push Notification Service (APNs). Covers setup, handling, and best practices. Use this skill when users need to add push notifications.
Push Notifications in Capacitor
Implement push notifications for iOS and Android using Firebase and APNs.
When to Use This Skill
User wants push notifications
User needs FCM setup
User asks about APNs
User has notification issues
User wants rich notifications
Quick Start
Install Plugin
npm install @capacitor/push-notifications
npx cap sync
Basic Implementation
import { PushNotifications } from '@capacitor/push-notifications' ;
async function initPushNotifications ( ) {
const permission = await PushNotifications .requestPermissions ();
if (permission.receive === 'granted' ) {
await PushNotifications . ();
}
. ( , {
. ( , token. );
(token. );
});
. ( , {
. ( , error);
});
. ( , {
. ( , notification);
(notification);
});
. ( , {
. ( , action);
(action. );
});
}
register
PushNotifications
addListener
'registration'
(token ) =>
console
log
'Push token:'
value
sendTokenToServer
value
PushNotifications
addListener
'registrationError'
(error ) =>
console
error
'Registration error:'
PushNotifications
addListener
'pushNotificationReceived'
(notification ) =>
console
log
'Notification received:'
showInAppNotification
PushNotifications
addListener
'pushNotificationActionPerformed'
(action ) =>
console
log
'Notification action:'
handleNotificationTap
notification
Firebase Setup
1. Create Firebase Project
2. Android Configuration Download google-services.json to android/app/
// android/build.gradle
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.4.0'
}
}
// android/app/build.gradle
apply plugin: 'com.google.gms.google-services'
dependencies {
implementation platform('com.google.firebase:firebase-bom:32.7.0')
implementation 'com.google.firebase:firebase-messaging'
}
3. iOS Configuration Download GoogleService-Info.plist to ios/App/App/
import Firebase
import FirebaseMessaging
@UIApplicationMain
class AppDelegate : UIResponder , UIApplicationDelegate {
func application (
_ application : UIApplication ,
didFinishLaunchingWithOptions launchOptions : [UIApplication .LaunchOptionsKey : Any ]?
) -> Bool {
FirebaseApp .configure()
return true
}
func application (
_ application : UIApplication ,
didRegisterForRemoteNotificationsWithDeviceToken deviceToken : Data
) {
Messaging .messaging().apnsToken = deviceToken
}
}
4. iOS Capabilities
Select App target
Signing & Capabilities
Add "Push Notifications"
Add "Background Modes" > "Remote notifications"
APNs Key Setup (iOS)
Create APNs Key
Add to Firebase
Firebase Console > Project Settings
Cloud Messaging tab
iOS app configuration
Upload APNs Authentication Key (.p8)
Enter Key ID and Team ID
Sending Notifications
Firebase Admin SDK (Node.js) import admin from 'firebase-admin' ;
admin.initializeApp ({
credential : admin.credential .cert (serviceAccount),
});
async function sendToDevice (token : string ) {
await admin.messaging ().send ({
token,
notification : {
title : 'Hello!' ,
body : 'You have a new message' ,
},
data : {
type : 'message' ,
messageId : '123' ,
},
android : {
priority : 'high' ,
notification : {
channelId : 'messages' ,
icon : 'ic_notification' ,
color : '#4285f4' ,
},
},
apns : {
payload : {
aps : {
badge : 1 ,
sound : 'default' ,
},
},
},
});
}
async function sendToTopic (topic : string ) {
await admin.messaging ().send ({
topic,
notification : {
title : 'Breaking News' ,
body : 'Something important happened' ,
},
});
}
async function sendToMultiple (tokens : string [] ) {
await admin.messaging ().sendEachForMulticast ({
tokens,
notification : {
title : 'Update' ,
body : 'New features available' ,
},
});
}
HTTP v1 API curl -X POST \
'https://fcm.googleapis.com/v1/projects/YOUR_PROJECT/messages:send' \
-H 'Authorization: Bearer ACCESS_TOKEN' \
-H 'Content-Type: application/json' \
-d '{
"message": {
"token": "DEVICE_TOKEN",
"notification": {
"title": "Hello",
"body": "World"
}
}
}'
Advanced Features
Notification Channels (Android) import { PushNotifications } from '@capacitor/push-notifications' ;
await PushNotifications .createChannel ({
id : 'messages' ,
name : 'Messages' ,
description : 'Message notifications' ,
importance : 5 ,
visibility : 1 ,
sound : 'notification.wav' ,
vibration : true ,
lights : true ,
lightColor : '#FF0000' ,
});
await PushNotifications .deleteChannel ({ id : 'old-channel' });
const channels = await PushNotifications .listChannels ();
Topic Subscription
await PushNotifications .addListener ('registration' , async () => {
const messaging = getMessaging ();
await subscribeToTopic (messaging, 'news' );
await subscribeToTopic (messaging, 'promotions' );
});
Rich Notifications (iOS)
import UserNotifications
class NotificationService : UNNotificationServiceExtension {
override func didReceive (
_ request : UNNotificationRequest ,
withContentHandler contentHandler : @escaping (UNNotificationContent ) -> Void
) {
guard let mutableContent = request.content.mutableCopy() as? UNMutableNotificationContent else {
contentHandler(request.content)
return
}
if let imageUrl = request.content.userInfo["image" ] as? String ,
let url = URL (string: imageUrl) {
downloadImage(url: url) { attachment in
if let attachment = attachment {
mutableContent.attachments = [attachment]
}
contentHandler(mutableContent)
}
} else {
contentHandler(mutableContent)
}
}
}
Notification Actions
PushNotifications .addListener ('pushNotificationActionPerformed' , (action ) => {
switch (action.actionId ) {
case 'reply' :
const input = action.inputValue ;
sendReply (input);
break ;
case 'dismiss' :
break ;
default :
navigateToContent (action.notification .data );
}
});
Background Handling
Data-Only Notifications
{
"to" : "DEVICE_TOKEN" ,
"data" : {
"type" : "sync" ,
"action" : "refresh"
}
}
class FirebaseService : FirebaseMessagingService () {
override fun onMessageReceived (message: RemoteMessage ) {
message.data ["type" ]?.let { type ->
when (type) {
"sync" -> performBackgroundSync()
"update" -> checkForUpdates()
}
}
}
}
Local Notifications Fallback import { LocalNotifications } from '@capacitor/local-notifications' ;
PushNotifications .addListener ('pushNotificationReceived' , async (notification) => {
await LocalNotifications .schedule ({
notifications : [
{
id : Date .now (),
title : notification.title || '' ,
body : notification.body || '' ,
extra : notification.data ,
},
],
});
});
Best Practices
Permission Handling async function requestNotificationPermission ( ) {
const { receive } = await PushNotifications .checkPermissions ();
if (receive === 'prompt' ) {
const shouldRequest = await showPermissionExplanation ();
if (shouldRequest) {
const result = await PushNotifications .requestPermissions ();
return result.receive === 'granted' ;
}
return false ;
}
if (receive === 'denied' ) {
showSettingsPrompt ();
return false ;
}
return receive === 'granted' ;
}
Token Refresh
PushNotifications .addListener ('registration' , async (token) => {
const oldToken = await getStoredToken ();
if (oldToken !== token.value ) {
await updateServerToken (oldToken, token.value );
await storeToken (token.value );
}
});
Error Handling PushNotifications .addListener ('registrationError' , (error ) => {
console .error ('Push registration failed:' , error);
analytics.logEvent ('push_registration_failed' , {
error : error.error ,
});
scheduleRetry ();
});
Troubleshooting
iOS Not Receiving
Check APNs key in Firebase
Verify Push Notifications capability
Check provisioning profile
Verify device token format
Test with Firebase Console
Android Not Receiving
Verify google-services.json
Check notification channel exists
Verify FCM token
Check battery optimization
Test with Firebase Console
Common Issues Issue Solution No token Check permissions, network Foreground only Implement background handler Delayed delivery Use high priority, data-only No sound Configure notification channel Badge not updating Set badge in payload
Resources Related occupations SOC
Based on SOC occupation classification