home / skills / secondsky / claude-skills / push-notification-setup
/plugins/push-notification-setup/skills/push-notification-setup
This skill helps you implement cross-platform push notifications with Firebase Cloud Messaging and native services for iOS, Android, and web.
npx playbooks add skill secondsky/claude-skills --skill push-notification-setupReview the files below or copy the command above to add this skill to your agents.
---
name: push-notification-setup
description: Implements push notifications across iOS, Android, and web using Firebase Cloud Messaging and native services. Use when adding notification capabilities, handling background messages, or setting up notification channels.
keywords: push notifications, FCM, Firebase Cloud Messaging, iOS notifications, Android notifications, web notifications, React Native notifications, notification permissions, background messages, notification channels, APNS, APNs, notification tokens, remote notifications, foreground notifications, notification handlers
---
# Push Notification Setup
Implement push notifications across mobile and web platforms.
## Firebase Cloud Messaging (React Native)
```javascript
import messaging from '@react-native-firebase/messaging';
// Request permission
async function requestPermission() {
const status = await messaging().requestPermission();
if (status === messaging.AuthorizationStatus.AUTHORIZED) {
const token = await messaging().getToken();
await sendTokenToServer(token);
}
}
// Handle foreground messages
messaging().onMessage(async message => {
console.log('Foreground message:', message);
showLocalNotification(message);
});
// Handle background/quit messages
messaging().setBackgroundMessageHandler(async message => {
console.log('Background message:', message);
});
// Handle token refresh
messaging().onTokenRefresh(token => {
sendTokenToServer(token);
});
```
## iOS Native (Swift)
```swift
import UserNotifications
func requestAuthorization() {
UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in
if granted {
DispatchQueue.main.async {
UIApplication.shared.registerForRemoteNotifications()
}
}
}
}
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
let token = deviceToken.map { String(format: "%02.2hhx", $0) }.joined()
sendTokenToServer(token)
}
```
## Android (Kotlin)
```kotlin
class MyFirebaseService : FirebaseMessagingService() {
override fun onNewToken(token: String) {
sendTokenToServer(token)
}
override fun onMessageReceived(message: RemoteMessage) {
message.notification?.let {
showNotification(it.title, it.body)
}
}
private fun showNotification(title: String?, body: String?) {
val channelId = "default"
val notification = NotificationCompat.Builder(this, channelId)
.setContentTitle(title)
.setContentText(body)
.setSmallIcon(R.drawable.ic_notification)
.build()
NotificationManagerCompat.from(this).notify(0, notification)
}
}
```
## Best Practices
- Request permission at appropriate time
- Handle token refresh
- Support notification channels (Android)
- Implement deep linking
- Never send sensitive data in payload
- Test on real devices
This skill implements cross-platform push notifications for iOS, Android, and web using Firebase Cloud Messaging and native platform services. It provides ready-to-use patterns for requesting permissions, handling foreground and background messages, registering and refreshing device tokens, and showing local notifications. The code is TypeScript-focused for React Native with native Swift and Kotlin snippets for platform-specific integration.
The skill wires Firebase Cloud Messaging into the app lifecycle: it requests user permission, retrieves and registers device tokens with your server, and listens for incoming messages in foreground, background, and quit states. Platform-specific handlers show local notifications and route users via deep links. Token refresh callbacks keep your backend up to date so you can reliably target devices.
How do I handle token changes?
Listen for token refresh events and send the new token to your server so push targeting stays accurate.
Can I test notifications without a production build?
Yes—use Firebase console and debug builds on physical devices; background/quit handling is best verified on real devices.