React Nativeでプッシュ通知を実装する方法｜Expo・Firebase・OneSignalを徹底比較

npx expo install expo-notifications expo-device expo-constants

{
  "expo": {
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/notification-icon.png",
          "color": "#ffffff",
          "sounds": ["./assets/notification-sound.wav"]
        }
      ]
    ],
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "bundleIdentifier": "com.example.myapp"
    }
  }
}

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';
import Constants from 'expo-constants';
import { Platform } from 'react-native';

// フォアグラウンド時の通知表示設定
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

async function registerForPushNotifications(): Promise<string | null> {
  // 実機チェック（シミュレータでは動作しない）
  if (!Device.isDevice) {
    console.warn('プッシュ通知は実機でのみ動作します');
    return null;
  }

  // Android通知チャネルの設定（Android 8.0以上で必須）
  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'デフォルト通知',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }

  // 権限の確認と取得
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;

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

  if (finalStatus !== 'granted') {
    console.warn('通知権限が許可されませんでした');
    return null;
  }

  // Expo Push Tokenの取得
  const projectId = Constants.expoConfig?.extra?.eas?.projectId
    ?? Constants.easConfig?.projectId;

  const tokenData = await Notifications.getExpoPushTokenAsync({ projectId });
  return tokenData.data; // "ExponentPushToken[xxxx]"
}

import { useEffect, useRef } from 'react';
import * as Notifications from 'expo-notifications';

function useNotificationListeners() {
  const notificationListener = useRef<Notifications.EventSubscription>();
  const responseListener = useRef<Notifications.EventSubscription>();

  useEffect(() => {
    // フォアグラウンドで通知を受信した場合
    notificationListener.current =
      Notifications.addNotificationReceivedListener((notification) => {
        const { title, body } = notification.request.content;
        console.log('通知受信:', title, body);
      });

    // ユーザーが通知をタップした場合
    responseListener.current =
      Notifications.addNotificationResponseReceivedListener((response) => {
        const data = response.notification.request.content.data;
        // data に基づいて画面遷移などの処理を実行
        console.log('通知タップ:', data);
      });

    return () => {
      notificationListener.current?.remove();
      responseListener.current?.remove();
    };
  }, []);
}

import { Expo, ExpoPushMessage } from 'expo-server-sdk';

const expo = new Expo();

async function sendPushNotification(
  pushTokens: string[],
  title: string,
  body: string,
  data?: Record<string, unknown>
) {
  const messages: ExpoPushMessage[] = pushTokens
    .filter((token) => Expo.isExpoPushToken(token))
    .map((token) => ({
      to: token,
      sound: 'default',
      title,
      body,
      data,
    }));

  // チャンク単位で送信（Expo推奨）
  const chunks = expo.chunkPushNotifications(messages);

  for (const chunk of chunks) {
    try {
      const ticketChunk = await expo.sendPushNotificationsAsync(chunk);
      console.log('送信結果:', ticketChunk);
    } catch (error) {
      console.error('送信エラー:', error);
    }
  }
}

import * as Notifications from 'expo-notifications';

// 5秒後にローカル通知を送信
async function scheduleLocalNotification() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'リマインダー',
      body: '予定の時間になりました',
      sound: 'default',
    },
    trigger: {
      type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
      seconds: 5,
    },
  });
}

// 特定の通知をキャンセル
async function cancelNotification(identifier: string) {
  await Notifications.cancelScheduledNotificationAsync(identifier);
}

// すべてのスケジュール済み通知をキャンセル
async function cancelAllNotifications() {
  await Notifications.cancelAllScheduledNotificationsAsync();
}

# React Native Firebase のコアモジュール
npm install @react-native-firebase/app

# Cloud Messagingモジュール
npm install @react-native-firebase/messaging

# iOSの依存関係をインストール
cd ios && pod install

apply plugin: 'com.google.gms.google-services'

<!-- android/app/src/main/AndroidManifest.xml -->
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

import messaging from '@react-native-firebase/messaging';
import { Platform, PermissionsAndroid } from 'react-native';

// Android 13以上で通知権限を要求
async function requestAndroidPermission() {
  if (Platform.OS === 'android' && Platform.Version >= 33) {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  return true;
}

// iOS権限要求 + FCMトークン取得
async function initializeFirebaseMessaging() {
  // iOS: 通知権限を要求
  if (Platform.OS === 'ios') {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (!enabled) {
      console.warn('iOS通知権限が拒否されました');
      return null;
    }
  }

  // Android: 権限を要求
  if (Platform.OS === 'android') {
    await requestAndroidPermission();
  }

  // FCM Registration Tokenを取得
  const token = await messaging().getToken();
  console.log('FCM Token:', token);

  // トークン更新の監視
  messaging().onTokenRefresh((newToken) => {
    console.log('新しいFCMトークン:', newToken);
    // サーバーにトークンを再登録
  });

  return token;
}

// フォアグラウンドで通知を受信
messaging().onMessage(async (remoteMessage) => {
  console.log('フォアグラウンド通知:', remoteMessage);
  // 独自のUIで通知を表示する処理を実装
});

// バックグラウンドで通知を受信
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('バックグラウンド通知:', remoteMessage);
});

import { GoogleAuth } from 'google-auth-library';

const PROJECT_ID = 'your-firebase-project-id';
const FCM_ENDPOINT = `https://fcm.googleapis.com/v1/projects/${PROJECT_ID}/messages:send`;

async function sendFcmNotification(
  token: string,
  title: string,
  body: string
) {
  const auth = new GoogleAuth({
    scopes: ['https://www.googleapis.com/auth/firebase.messaging'],
  });
  const client = await auth.getClient();
  const accessToken = await client.getAccessToken();

  const message = {
    message: {
      token,
      notification: { title, body },
      android: {
        priority: 'high',
        notification: {
          channelId: 'default',
          sound: 'default',
        },
      },
      apns: {
        payload: {
          aps: {
            sound: 'default',
            badge: 1,
          },
        },
      },
    },
  };

  const response = await fetch(FCM_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${accessToken.token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });

  return response.json();
}

npm install react-native-onesignal

import { OneSignal } from 'react-native-onesignal';

// 初期化（App起動時に1度だけ呼ぶ）
OneSignal.initialize('YOUR_ONESIGNAL_APP_ID');

// 通知権限の要求（iOS）
OneSignal.Notifications.requestPermission(true);

// 通知クリック時のハンドラ
OneSignal.Notifications.addEventListener('click', (event) => {
  console.log('通知がクリックされました:', event);
});

// Expoの場合
await Notifications.setNotificationChannelAsync('marketing', {
  name: 'マーケティング通知',
  importance: Notifications.AndroidImportance.DEFAULT,
  sound: 'default',
});

await Notifications.setNotificationChannelAsync('urgent', {
  name: '緊急通知',
  importance: Notifications.AndroidImportance.MAX,
  sound: 'alarm.wav',
  vibrationPattern: [0, 500, 250, 500],
});

# Expo Push APIへの送信
curl -X POST https://exp.host/--/api/v2/push/send \
  -H "Content-Type: application/json" \
  -d '{
    "to": "ExponentPushToken[xxxx]",
    "title": "テスト通知",
    "body": "動作確認用のテスト通知です"
  }'

import * as Notifications from 'expo-notifications';

// バッジ数を設定
await Notifications.setBadgeCountAsync(5);

// 現在のバッジ数を取得
const count = await Notifications.getBadgeCountAsync();

// バッジをクリア
await Notifications.setBadgeCountAsync(0);

# EAS CLIのインストール
npm install -g eas-cli

# EASプロジェクトの初期化
eas init

# 開発ビルドの作成
eas build --profile development --platform all

# プレビュービルドの作成（内部テスト用）
eas build --profile preview --platform all