mcpField
P
push-notifications

push-notifications

github.com/timequity开发0107 次安装44 周前更新
代码仓库

关于 push-notifications

为移动应用实现推送通知的技能指南，介绍 Expo Notifications 和 Firebase 的基础用法。面向需要接收前台、后台通知并将通知接入服务端的开发者。

主要功能

  1. 01安装 Expo 通知依赖
  2. 02设置通知处理器
  3. 03监听前台通知
  4. 04向 Expo 推送接口发送通知
  5. 05获取 FCM 令牌并处理后台消息

适用场景

  1. 01在 Expo 应用中配置通知显示与声音
  2. 02处理应用前台收到的通知
  3. 03由服务端向 Expo 设备令牌发送消息
  4. 04在 bare workflow 中处理 Firebase 后台推送

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/push-notifications确认已加载。

README 原文English

来自项目 README

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);
});

评论

支持 Markdown