mcpField
P
push-notifications

push-notifications

github.com/timequity開発0107 回インストール44 週間前に更新
リポジトリ

push-notifications について

モバイルアプリでプッシュ通知を実装するためのスキルガイドで、Expo Notifications と Firebase の基本的な使い方を扱います。フォアグラウンド・バックグラウンド通知やバックエンド連携を行う開発者向けです。

主な機能

  1. 01Expo 通知関連パッケージのインストール
  2. 02通知ハンドラーの設定
  3. 03フォアグラウンド通知の監視
  4. 04Expo プッシュエンドポイントへの通知送信
  5. 05FCM トークンの取得とバックグラウンドメッセージ処理

活用シーン

  1. 01Expo アプリで通知表示とサウンドを設定
  2. 02アプリが前面にある間に受信した通知を処理
  3. 03バックエンドから Expo のデバイストークンへメッセージ送信
  4. 04bare 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 対応