# Push notifications pour les appareils iOS & Android

> Apprenez à envoyer et configurer des push notifications pour retenir vos utilisateurs et maintenir leur engagement sur iOS et Android.

https://docs.pandasuite.com/fr/essentials/deployment-services/push-notifications-to-ios-and-android-devices/

**Envoyez un message directement sur l'appareil iOS ou Android de vos utilisateurs même si l'application n'est pas ouverte. Vous pouvez également rediriger automatiquement vers un écran au sein de l'application.**

[Image : Écran verrouillé d'un iPhone avec une push notification d'une app de musée, qui invite à y aller un jour de pluie]

Véritable outil marketing, elle vous permet de retenir vos utilisateurs et de maintenir leur engagement au fil du temps. Découvrez comment envoyer et configurer vos push notifications.

## Configurer les push notifications

Pour envoyer des push notifications, votre application doit être publiée sur l'App Store ou sur Google Play.

Découvrez les paramètres à configurer en fonction de chaque plateforme :

### Sur iOS

Il est nécessaire de créer un certificat iOS spécifique pour activer les push notifications. Pour en savoir plus : [Créer un certificat iOS](https://docs.pandasuite.com/fr/essentials/mobile-publishing/ios/generate-an-ios-certificate/)

Ensuite, il suffit d'uploader ce certificat et d'insérer le mot de passe dans la section dédiée de votre dashboard ( **Paramètres** > **Notifications Push** > **Configurer les push notifications iOS**).

[Image : Section Configure iOS Push Notifications des paramètres de l'app : le certificat P12, son mot de passe et le type de certificat sont encadrés]

### Sur Android

Il est nécessaire d'associer un compte Firebase Cloud Messaging à votre projet Firebase. Voici le tutoriel à suivre : [Configurer les push notifications sur Android](https://docs.pandasuite.com/fr/essentials/mobile-publishing/android/configure-push-notifications-for-your-android-app/).

Si vous rencontrez des soucis pour configurer ce service, n'hésitez pas à contacter l'équipe ! 😊

## Envoyer une push notification

Pour envoyer une push notification, rendez-vous dans votre dashboard onglet Apps :

- Sélectionnez votre application
- Rendez-vous dans la section **Services** > **Notifications Push**
- Cliquez sur le bouton **Envoyer un message**
- Tapez votre message dans le champ : il doit être court et impactant, **la limite est de 150 caractères**.

[Image : Fenêtre Envoyer un message : un message de 84/150 caractères est encadré ; dessous, un Payload facultatif avec wid et le bouton Envoyer un message]

Si votre app comporte des [channels](https://docs.pandasuite.com/fr/essentials/content-management/channel/), une section **Groupe de diffusion** vous permet de choisir qui reçoit le message : sélectionnez un channel pour l'envoyer uniquement aux utilisateurs de ce channel, ou laissez **Aucun Channel** pour l'envoyer à l'ensemble de vos utilisateurs. Sans channel, **le message est envoyé à l'ensemble de vos utilisateurs**. Il n'est pas possible de programmer l'envoi : le message part dès que vous cliquez sur **Envoyer un message**.

Si vos utilisateurs ont accepté de recevoir des notifications lorsqu'ils ont installé votre application, ils recevront votre message sur leur téléphone ou sur leur smartphone.

## Rediriger vers un écran

Vous pouvez faire en sorte que l'utilisateur soit automatiquement redirigé dans un écran après avoir cliqué sur la notification.

Pour cela, lors de l'écriture du message, ajoutez un paramètre dans le champ **Payload**.

Indiquez `"wid" = "id"` dans lequel id est l'identifiant de votre écran. Pour obtenir l'identifiant de votre écran, rendez-vous dans PandaSuite Studio. Sélectionnez votre écran et cliquez sur le menu déroulant.

[Image : Menu de l'écran 1. Articles dans PandaSuite Studio, avec Copier l'ID encadré pour obtenir l'identifiant de l'écran]

## Utiliser les données de push dans le projet

Lorsqu'une push notification est reçue, PandaSuite met à jour la donnée projet **Push Notification (données)** et déclenche le déclencheur projet **Push Notification reçue**. Vous pouvez ensuite exploiter ces informations dans vos bindings, vos conditions et vos actions.

Dans PandaSuite Studio :

- Sélectionnez **Projet**
- Ouvrez le panneau **Propriétés**
- Ajoutez un déclencheur **Push Notification reçue**
- Utilisez la branche **Push Notification (données)** dans le panneau **Data binding**

La structure exposée est la suivante :

- `Projet > Push Notification (données) > title`
- `Projet > Push Notification (données) > message`
- `Projet > Push Notification (données) > sound`
- `Projet > Push Notification (données) > Données > ...`

La branche **Données** contient les clés personnalisées envoyées dans le payload de la push. Par exemple, si votre push contient `campaign`, `discount` ou `wid`, vous pouvez lire ces valeurs depuis `Projet > Push Notification (données) > Données`.

Exemple :

```json
{
  "wid": "page_promo",
  "campaign": "summer2026",
  "discount": "20"
}
```

Vous pouvez ensuite :

- Afficher un message promotionnel adapté à `campaign`
- Afficher une offre spéciale selon `discount`
- Déclencher une action quand **Push Notification reçue** se produit

> **Info**
>
> Utilisez `title`, `message` et `sound` pour les métadonnées de la notification, et `data` pour vos clés personnalisées.

## Automatiser les push notifications avec votre backend (Web App)

Si votre application native embarque une Web App (par exemple avec le [composant Web](https://docs.pandasuite.com/fr/essentials/components/web/)), vous pouvez envoyer de vraies notifications push déclenchées par votre propre backend. Le shell natif récupère le jeton d’appareil et l’expose à votre Web App via PandaBridge.

Pour les projets créés directement dans PandaSuite Studio, le même token est aussi disponible via le data binding dans `Projet > Contexte > Viewer > deviceToken`. Utilisez ce chemin si vous voulez envoyer le device token courant à une API depuis une action ou un composant standard PandaSuite. Consultez [Informations du projet](https://docs.pandasuite.com/fr/essentials/project-properties/project-information/) pour l'arborescence complète des données projet.

### Prérequis

- Avoir réalisé la configuration par plateforme ci‑dessus (certificat iOS/APNs et Android Firebase/FCM).
- Charger PandaBridge dans votre contenu Web.

Ajoutez le script PandaBridge et récupérez le jeton à l’initialisation :

```html
<script src="https://cdn.jsdelivr.net/npm/pandasuite-bridge/lib/pandasuite-bridge.min.js"></script>
<script>
  // S'exécute dans votre Web App (page embarquée)
  PandaBridge.init(() => {
    PandaBridge.onLoad((properties) => {
      const deviceToken = properties && properties.__ps_device_token;
      if (deviceToken) {
        // Associez ce token à l'utilisateur connecté dans votre backend
        saveTokenForCurrentUser(deviceToken);
      } else {
        // Token non disponible (permission refusée ou premier lancement)
        // Vous pouvez retenter plus tard dans la session
      }
    });
  });
</script>
```

Une fois stockés côté serveur, vous pilotez vos règles automatisées (ex. X jours après un événement) et l’envoi des notifications via les services des plateformes :

- Android : Firebase Cloud Messaging (FCM) en utilisant le device token
- iOS : Apple Push Notification service (APNs) en utilisant le device token

Pour ouvrir un écran précis depuis votre serveur, incluez le même paramètre de payload présenté plus haut :

- Exemple APNs :

```json
{
  "aps": { "alert": "Votre message" },
  "wid": "id-de-votre-ecran"
}
```

- Exemple FCM :

```json
{
  "notification": { "body": "Votre message" },
  "data": { "wid": "id-de-votre-ecran" }
}
```

> **Attention**
>
> Le device token peut être absent si l’utilisateur refuse les notifications ou au tout premier lancement. Prévoyez des relances (par exemple, actualiser le token à la connexion) et n’en supposez pas la présence systématique.

> **Info**
>
> La propriété `__ps_device_token` est disponible uniquement dans les builds natifs iOS/Android. Elle n’est pas présente pour les projets web.