Intégration de notifications Push

Une notification push est une alerte qui apparaît sur l’écran de l’utilisateur lorsqu’une mise à jour importante se produit. Vous pouvez recevoir des notifications push même lorsque votre page Web n’est pas actuellement ouverte dans le navigateur de l’utilisateur. Les notifications push constituent un moyen précieux de fournir à vos utilisateurs un contenu urgent et pertinent, ou de les ré-engager avec votre site. Cet article de référence présente comment intégrer les notifications push Braze pour le Web avec le SDK Braze.

Consultez nos meilleures pratiques en matière de push pour plus de ressources.

Les notifications push web sont mises en œuvre à l’aide de la norme push du W3C, prise en charge par la plupart des grands navigateurs.

Pour plus d’informations sur les normes du protocole push et la prise en charge par les navigateurs, vous pouvez consulter les ressources suivantes : AppleSafari MozillaMozilla et MicrosoftMicrosoft

Intégration

Étape 1 : Configurer le service de traitement de votre site

• Si vous ne disposez pas encore d’un service de traitement, créez un nouveau fichier nommé service-worker.js avec l’extrait de code suivant et placez-le dans le répertoire racine de votre site Web.
• Sinon, si votre site enregistre déjà un service de traitement, ajoutez l’extrait de code suivant au fichier du service de traitement et définissez l’option d’initialisation manageServiceWorkerExternally sur true lors de l’initialisation du SDK Web.

Si le nom du fichier de votre service de traitement n’est pas service-worker.js, vous devez utiliser l’option d’initialisation serviceWorkerLocation.

Que se passe-t-il si je ne peux pas enregistrer un service de traitement dans le répertoire racine ?

Par défaut, un service de traitement ne peut être utilisé que dans le même répertoire que celui dans lequel il est enregistré. Par exemple, si votre fichier de service de traitement existe dans /assets/service-worker.js, vous ne pouvez l’enregistrer que dans example.com/assets/* ou un sous-répertoire du dossier assets mais pas sur votre page d’accueil (example.com/). Pour cette raison, il est recommandé d’héberger et d’enregistrer le service de traitement dans le répertoire racine (par exemple, https://example.com/service-worker.js).

Si vous ne pouvez pas enregistrer un service de traitement dans votre domaine racine, une autre approche consiste à utiliser l’en-tête HTTP Service-Worker-Allowed lorsque vous notifiez votre fichier de service de traitement. En configurant votre serveur pour renvoyer Service-Worker-Allowed: / en réponse au service de traitement, le navigateur recevra l’instruction d’élargir la portée et d’autoriser l’utilisation dans un répertoire différent.

Puis-je créer un service de traitement à l’aide d’un Gestionnaire de balises ?

Non, il faut héberger les services de traitement sur le serveur de votre site Web et il n’est pas possible de les charger à l’aide d’un Gestionnaire de balises.

Étape 2 : Enregistrer le navigateur

Pour qu’un navigateur reçoive des notifications push, vous devez l’enregistrer pour que vous puissiez réaliser une notification push en appelant braze.requestPushPermission(). Cela demandera immédiatement l’autorisation de notification push à l’utilisateur.

Si vous souhaitez afficher votre propre IU liée à la notification push avant de demander une autorisation (appelée demande de notification push douce), vous pouvez tester pour voir si la notification push est prise en charge dans le navigateur de l’utilisateur avec braze.isPushSupported(). Reportez-vous à l’exemple d’invite par poussée douce utilisant les messages in-app.

Si vous souhaitez désinscrire un utilisateur, vous pouvez le faire en appelant braze.unregisterPush().

Étape 3 : Configurer les notifications push Safari (facultatif)

Si vous souhaitez prendre en charge les notifications push pour Safari sur macOS X, suivez les instructions supplémentaires suivantes :

• Générez un certificat push safari en suivant les instructions d’enregistrement auprès d’Apple.
• Dans le tableau de bord de Braze, sur la page Paramètres (où se trouvent vos clés API), sélectionnez votre application Web. Cliquez sur Configure Safari Push et suivez les instructions, en téléchargeant le certificat de push que vous venez de générer.
• Lorsque vous appelez braze.initialize, fournissez l’option de configuration facultative safariWebsitePushId avec l’ID de notification push du site Internet que vous avez utilisé lors de la génération de votre certificat de notification push Safari. Par exemple, braze.initialize('YOUR-API-KEY', {safariWebsitePushId: 'web.com.example.domain'})

Notification push Safari Mobile

Safari 16.4+ sur iOS et iPadOS supporte le web push pour les applications qui ont été ajoutées à l’écran d’accueil et qui ont un fichier Web Application Manifest. Une fois que vous avez terminé les étapes d’intégration des notifications push Web, vous pouvez également prendre en charge les notifications push mobiles pour Safari.

Pour prendre en charge le push web Safari mobile, suivez notre guide ici.

Invite de notification push douce

Une invite de notification push douce (également appelée « push primer ») vous aide à optimiser votre taux d’abonnement lorsqu’il s’agit de demander l’autorisation.

Visitez Soft push prompt pour en savoir plus sur la configuration d’un soft push prompt.

Exigence HTTPS

Les normes Web exigent que le domaine demandant l’autorisation de notification push soit sécurisé.

Qu’est-ce qui définit un site sécurisé ?

Un site est considéré comme sécurisé s’il correspond à l’un des modèles d’origine sécurisée suivants :

• (https, , *)
• (wss, *, *)
• (, localhost, )
• (, .localhost, *)
• (, 127/8, )
• (, ::1/128, *)
• (file, *, -)
• (chrome-extension, *, —)

Cette exigence de sécurité dans la spécification des normes ouvertes sur laquelle la notification push Braze pour le Web est créée empêche les attaques de l’homme du milieu.

Que se passe-t-il si un site sécurisé n’est pas disponible ?

Bien que les meilleures pratiques du secteur soient de rendre votre site sûr, les clients qui ne peuvent pas sécuriser leur domaine de site peuvent contourner l’exigence en utilisant un modal sécurisé. Pour en savoir plus, consultez notre guide sur l’utilisation de Alternate push domain ou visualisez une démonstration.

Paramètres avancés du service de traitement

Notre fichier de service de traitement appellera automatiquement skipWaiting lors de l’installation. Si vous souhaitez l’éviter, ajoutez le code suivant à votre fichier de service de traitement, avant l’importation de Braze :

Résolution des problèmes

J’ai suivi les instructions d’intégration, mais je ne reçois toujours aucune notification push.

• Les notifications push Web exigent que votre site soit en HTTPS.
• Tous les navigateurs ne peuvent pas recevoir de messages de notification push. Assurez-vous que braze.isPushSupported() retourne true dans le navigateur.
• Si un utilisateur a refusé au site l’accès aux notifications push, il ne recevra plus de demande d’autorisation à moins qu’il ne supprime l’état refusé de ses préférences de navigateur.