Push notifications pour les appareils iOS & Android

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.

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

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 > Push notifications > Apple Push Notifications).

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.

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.

Pour le moment, il n’est pas possible de cibler les destinataires, ni de programmer l’heure et l’envoi du message : le message est envoyé automatiquement, à l’ensemble de vos utilisateurs. De nouvelles fonctionnalités viendront prochainement enrichir ce service.

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.

Automatiser les push notifications avec votre backend (Web App)

Si votre application native embarque une Web App (par exemple avec le composant 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.

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 :

<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 :

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

• Exemple FCM :

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