Web Push - Implémenter les notifications à distance

Dans cette page, vous découvrirez comment les notifications sont gérées dans votre application et quelles sont toutes les options à votre disposition pour créer une excellente expérience de messagerie pour vos utilisateurs.

info

Veuillez noter que tous les navigateurs, à l'exception de Safari, devront être ouverts pour recevoir des notifications. Safari sous MacOS recevra toujours des notifications même lorsque le navigateur n'est pas ouvert du tout. Les utilisateurs recevront des notifications même si votre site Web n'est pas ciblé ou ouvert du tout, tant que le navigateur est en cours d'exécution.

Demander une autorisation

Pour activer les notifications à distance au sein de votre application, il est important d'obtenir les autorisations des utilisateurs avant d'envoyer des notifications. En raison de certaines contraintes imposées par les navigateurs web, cette demande d'autorisation ne peut pas se produire automatiquement lors du chargement de la page. Au lieu de cela, elle doit être déclenchée comme le résultat direct d’une action de l’utilisateur, comme un clic sur un bouton désigné.

Il existe deux méthodes principales pour accueillir les utilisateurs afin d'activer les notifications à distance : utiliser les fonctionnalités standard ou intégrer manuellement la fonctionnalité via votre base de code.

Lors de l'utilisation de la fonctionnalité standard, notre SDK se chargera d'afficher les composants d'interface utilisateur requis en fonction des informations fournies lors de la configuration (logo, langues, ...). De plus, le SDK gérera de manière transparente l’activation des notifications à distance lorsque cela sera jugé approprié pour la configuration sélectionnée. Enfin, assurez-vous d'inclure le fichier CSS Notificare Push qui est nécessaire pour afficher correctement l'interface utilisateur d'intégration gérée.

import 'notificare-web/push/push.css';

Alternativement, si vous choisissez d'activer manuellement les notifications à distance, il vous incombe de superviser l'interface utilisateur d'intégration et l'ensemble du processus associé.

Activer les notifications

Pour permettre à l'appareil de recevoir des notifications, il vous suffit d'invoquer une seule méthode.

import { enableRemoteNotifications } from 'notificare-web/push';

await enableRemoteNotifications();

Vous pouvez vérifier si l'utilisateur a déjà activé les notifications à distance.

import { hasRemoteNotificationsEnabled } from 'notificare-web/push';

const enabled = hasRemoteNotificationsEnabled();

De plus, vous pouvez vérifier si l'utilisateur a désactivé les notifications dans les paramètres du navigateur.

import { getAllowedUI } from 'notificare-web/push';

const allowedUI = getAllowedUI();

Bien que les modifications n'aient lieu que lorsque l'utilisateur recharge la page, vous pouvez également être informé des modifications apportées aux autorisations de notification du navigateur.

import { onNotificationSettingsChanged } from 'notificare-web/push';

onNotificationSettingsChanged((allowedUI) => {
  // more code ...
});

Désactiver les notifications à distance

La désactivation des notifications à distance peut être réalisée de la même manière que leur activation.

import { disableRemoteNotifications } from 'notificare-web/push';

await disableRemoteNotifications();

Lorsque cette méthode est appelée, nous enregistrerons automatiquement votre appareil pour ne jamais recevoir de notifications à distance, même si vous conserverez toujours le même profil utilisateur, les mêmes messages de boîte de réception et profiterez de tous les autres services pris en charge par votre forfait. Vous pouvez à tout moment demander une réinscription aux notifications push si vous le souhaitez.

Recevoir des notifications

Afin de recevoir des notifications, il est nécessaire de disposer d'un fichier Service Worker disponible dans le répertoire racine de votre site Web.

Pour simplifier le processus, nous proposons un fichier de travail qui gère les notifications entrantes, éliminant ainsi le besoin de toute intégration manuelle.

Assurez-vous de diffuser ce fichier sur https://your-website/sw.js. Si vous intégrez ce fichier dans le cadre de votre procédure de build, vous pouvez l'importer depuis le package en utilisant l'exemple ci-dessous.

import 'notificare-web/push/sw';

Alternativement, vous avez la possibilité de l'importer directement depuis le CDN en utilisant la fonction importScripts. Cependant, il est important de confirmer que la version importée correspond à la version de vos packages.

importScripts('https://cdn.notifica.re/libs/web/v3/{version}/notificare-push-sw.js');

Pour des informations plus complètes sur les Service Workers, reportez-vous aux informations détaillées disponibles ici.

Afin de prendre en charge Web Push dans iOS 16.4 ou version ultérieure, il est nécessaire de servir un fichier manifeste définissant la propriétédisplay sur standalone. Vous pouvez vous référer au manifest.json suivant comme point de départ pour votre application.

{
  "name": "Your app name",
  "short_name": "Your app name",
  "display": "standalone",
  "start_url": "/"
}

Enfin, déclarez votre manifeste dans votre fichier HTML comme illustré ci-dessous.

<!DOCTYPE html>
<html>
<head>
  <link rel="manifest" href="/manifest.json" />
</head>
</html>

remarque

Web Push dans iOS 16.4 ou version ultérieure n'est disponible que lorsque l'utilisateur ajoute l'application Web à l'écran d'accueil.

Vous pouvez trouver plus d'informations sur les fichiers Web App Manifest ici.