mcpField
P
push-notifications

push-notifications

github.com/timequityDevelopment0107 installsUpdated 44w ago
Repository

About push-notifications

A skill guide to implementing push notifications in mobile apps, covering basic Expo Notifications and Firebase usage. It is for developers handling foreground and background notifications and connecting notifications to a backend.

Key features

  1. 01Install Expo notification dependencies
  2. 02Configure a notification handler
  3. 03Listen for foreground notifications
  4. 04Send notifications to the Expo push endpoint
  5. 05Get FCM tokens and handle background messages

Use cases

  1. 01Configure notification display and sound in an Expo app
  2. 02Handle notifications received while the app is foregrounded
  3. 03Send messages from a backend to Expo device tokens
  4. 04Handle Firebase background pushes in a bare workflow

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/timequity/vibe-coder --skill push-notifications

After installing, type/push-notificationsin Claude Code to confirm it loaded.

Details

From the project README

Push Notifications

Expo Notifications

npx expo install expo-notifications expo-device

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';

// Configure
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

// Request permission
async function registerForPushNotifications() {
  if (!Device.isDevice) return null;

  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;

  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    finalStatus = status;
  }

  if (finalStatus !== 'granted') return null;

  const token = await Notifications.getExpoPushTokenAsync({
    projectId: 'your-project-id',
  });

  return token.data;
}

Handle Notifications

// Foreground
useEffect(() => {
  const subscription = Notifications.addNotificationReceivedListener(
    (notification) => {
      console.log('Received:', notification);
    }
  );

  return () => subscription.remove();
}, []);

// Tap response
useEffect(() => {
  const subscription = Notifications.addNotificationResponseReceivedListener(
    (response) => {
      const data = response.notification.request.content.data;
      // Navigate based on data
      navigation.navigate(data.screen, data.params);
    }
  );

  return () => subscription.remove();
}, []);

Backend Integration

// Send from server
await fetch('https://exp.host/--/api/v2/push/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    to: expoPushToken,
    title: 'New message',
    body: 'You have a new message',
    data: { screen: 'Chat', chatId: '123' },
  }),
});

Firebase (bare workflow)

import messaging from '@react-native-firebase/messaging';

// Get FCM token
const fcmToken = await messaging().getToken();

// Background handler
messaging().setBackgroundMessageHandler(async (message) => {
  console.log('Background message:', message);
});

Comments

Markdown supported