home / skills / secondsky / claude-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-setup

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.9 KB
---
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

Overview

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.

How this skill works

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.

When to use it

  • Adding notification capabilities to a new or existing React Native app
  • Handling background and quit-state messages on mobile devices
  • Setting up Android notification channels and iOS permission flows
  • Integrating web push alongside mobile using Firebase Cloud Messaging
  • Implementing deep linking from notifications to app screens

Best practices

  • Request permission at a user-friendly moment, not immediately on first open
  • Send device tokens to your backend and update them on token refresh
  • Create Android notification channels for consistent behavior across API levels
  • Avoid including sensitive data in notification payloads; fetch secure data after user action
  • Test notification flows on real devices and across app lifecycle states

Example use cases

  • Marketing campaigns that target active users with promotional offers
  • Transactional alerts for order status, delivery updates, or payment receipts
  • Critical system alerts that require immediate user attention
  • Re-engagement flows using deep links to specific app screens
  • Silent background sync triggers that update local content without UI interruptions

FAQ

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.