Configurer les notifications push Expo avec la gestion des permissions, des tokens et l'intégration backend.

Notifications Push

ScaleRocket Mobile inclut expo-notifications comme dépendance. Ce guide vous accompagne pour activer les notifications push.

1. Configurer le plugin

Ajoutez le plugin de notifications à app.json :

{
  "expo": {
    "plugins": [
      ["expo-notifications", {
        "icon": "./assets/notification-icon.png",
        "color": "#2563EB"
      }]
    ]
  }
}

Note : L'icône de notification doit être un PNG 96x96 avec un fond transparent (Android uniquement). iOS utilise l'icône de l'app.

2. Demander les permissions

Vous devez demander la permission avant d'envoyer des notifications. Ajoutez ceci à l'initialisation de votre app ou à un écran dédié :

import * as Notifications from "expo-notifications";
import { Platform } from "react-native";

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

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

  if (finalStatus !== "granted") {
    console.log("Notification permission denied");
    return false;
  }

  // Requis pour Android
  if (Platform.OS === "android") {
    await Notifications.setNotificationChannelAsync("default", {
      name: "Default",
      importance: Notifications.AndroidImportance.MAX,
    });
  }

  return true;
}

3. Obtenir le push token

Une fois les permissions accordées, récupérez le push token Expo :

import Constants from "expo-constants";

async function getPushToken() {
  const token = await Notifications.getExpoPushTokenAsync({
    projectId: Constants.expoConfig?.extra?.eas?.projectId,
  });
  return token.data; // "ExponentPushToken[xxxx]"
}

4. Sauvegarder le token dans votre backend

Sauvegardez le push token dans le profil de l'utilisateur :

import { supabase } from "../lib/supabase";

async function savePushToken(token: string) {
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) return;

  await supabase.auth.updateUser({
    data: { push_token: token },
  });
}

Ou sauvegardez-le dans une table profiles dédiée :

await supabase
  .from("profiles")
  .update({ push_token: token })
  .eq("id", user.id);

Sauvegardez le push token avec une mutation Convex :

import { useMutation } from "convex/react";
import { api } from "../convex/_generated/api";

const savePushToken = useMutation(api.users.savePushToken);
await savePushToken({ token });

5. Envoyer une notification de test

Utilisez l'outil de notifications push Expo pour envoyer une notification de test. Collez votre ExponentPushToken[xxxx] et envoyez.

Ou utilisez curl :

curl -H "Content-Type: application/json" \
  -d '{
    "to": "ExponentPushToken[xxxx]",
    "title": "Hello!",
    "body": "This is a test notification"
  }' \
  https://exp.host/--/api/v2/push/send

6. Gérer les notifications entrantes

Configurez l'affichage des notifications quand l'app est au premier plan :

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

Ecoutez les taps sur les notifications :

import { useEffect } from "react";

useEffect(() => {
  const subscription = Notifications.addNotificationResponseReceivedListener(
    (response) => {
      const data = response.notification.request.content.data;
      // Naviguez vers l'écran approprié selon les données
    }
  );

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

Notes importantes

Les notifications push nécessitent un build de développement (pas Expo Go)
iOS nécessite un vrai appareil (les simulateurs ne peuvent pas recevoir de notifications push)
Le projectId doit correspondre à votre projet EAS — lancez eas build:configure si ce n'est pas défini

Notifications Push

On this page