Envoyer des notifications push

Zean n’envoie aucune notification push lui-même. Chaque réponse d’un membre arrive à votre serveur dans l’événement message.member, avec la notification prête dans data.push : votre serveur l’envoie avec votre service de notifications. Votre app garde le sien : expo-notifications, Firebase ou un autre.

Recevoir le webhook

Configurez le webhook de l’App et vérifiez la signature de chaque appel. Voir Recevoir les événements par webhook et Vérifier la signature d’un webhook.

Donner le jeton push au chat

Dans l’app, passez le jeton push de l’appareil à setPushToken() de useZean() : un jeton Expo, FCM ou APNs. null l’oublie. Après une déconnexion, le chat le redonne seul. Zean le met dans push.tokens de chaque message.member de ce Contact.

import { useEffect } from "react";import * as Notifications from "expo-notifications";import { useZean } from "@zean-chat/react-native";export function ZeanPush() {  const { setPushToken } = useZean();  useEffect(() => {    Notifications.requestPermissionsAsync().then(async ({ granted }) => {      if (granted) setPushToken((await Notifications.getExpoPushTokenAsync()).data);    });  }, [setPushToken]);  return null;}

Envoyer la notification depuis votre serveur

Sur message.member, envoyez push.title et push.body à chaque jeton de push.tokens, avec push.data comme données de la notification. Avec des jetons Expo, le service push d’Expo suffit :

// Appelée avec l’événement, une fois sa signature vérifiée.export async function sendPush(event) {	if (event.type !== 'message.member' || event.data.push.tokens.length === 0) return;	const { title, body, tokens, data } = event.data.push;	await fetch('https://exp.host/--/api/v2/push/send', {		method: 'POST',		headers: { 'Content-Type': 'application/json' },		body: JSON.stringify(tokens.map(to => ({ to, title, body, data, sound: 'default' })))	});}

• Des jetons FCM ou APNs : envoyez les mêmes title, body et data par Firebase Cloud Messaging ou par Apple, comme votre serveur le fait déjà.
• push.language donne la langue du Contact, pour écrire votre propre texte si vous le préférez.
• Seule la réponse d’un membre envoie message.member : les réponses automatiques de l’IA n’envoient aucun événement, donc aucune notification.

Afficher le badge

unreadCount compte les réponses que le Contact n’a pas lues, et revient à 0 quand il ouvre le chat. Dans ZeanPush, mettez-le sur l’icône de l’app :

const { setPushToken, unreadCount } = useZean();useEffect(() => {  Notifications.setBadgeCountAsync(unreadCount);}, [unreadCount]);

Ouvrir le chat au toucher

openFromNotification() ouvre le chat quand la notification touchée vient d’une réponse d’un membre, et renvoie false pour toute autre notification. Il marche aussi quand le toucher lance l’app, avant que ZeanChat soit affiché. Placez la ligne hors de tout composant, dans le fichier racine :

import * as Notifications from "expo-notifications";import { openFromNotification } from "@zean-chat/react-native";Notifications.addNotificationResponseReceivedListener(r => openFromNotification(r.notification.request.content.data));

Pour trier vous-même vos notifications, isZeanNotification(data) dit si elle vient de Zean, sans ouvrir le chat.

Tester en développement

1. Lancez votre serveur, puis pointez la CLI Zean vers sa route de webhook. Voir Recevoir les webhooks sur votre ordinateur.
2. Ouvrez le chat dans une version de développement de votre app et écrivez un message : l’appareil devient « Votre appareil de test ».
3. Dans Paramètres de l’App > Développeurs > Webhook > « Événements de test », choisissez message.member, puis « Envoyer un événement de test ».
4. Zean écrit une réponse de test dans la Conversation de l’appareil. Votre serveur reçoit l’événement avec le vrai jeton de l’appareil et envoie la notification. Touchez-la : le chat s’ouvre sur la réponse, et le badge suit.

Sur Android, Expo Go ne reçoit plus de notifications push depuis Expo SDK 53 : testez-les avec un build de développement.