Comment implémenter des notifications push sur une application Next.js

Vous avez créé une application Next.js élégante, dotée de fonctionnalités impressionnantes et de performances fluides. Mais vous êtes désormais confronté à un défi majeur : vos utilisateurs n'interagissent plus avec votre contenu une fois qu'ils quittent votre site. Vous devez trouver un moyen de les faire revenir, de les informer des mises à jour importantes, des nouvelles fonctionnalités ou des informations urgentes, même lorsqu'ils n'utilisent pas activement votre application.

Les notifications push sont la solution, mais leur implémentation dans une application Next.js peut s'avérer complexe. Entre les problèmes de compatibilité des navigateurs, les exigences coûteuses d'Apple pour les développeurs et la complexité technique de la configuration des systèmes de notifications, de nombreux développeurs sont frustrés et ne savent pas par où commencer.

Comprendre les notifications push

Les notifications push sont de petits messages envoyés depuis une application web vers les appareils des utilisateurs, visibles même lorsque ces derniers n'interagissent pas activement avec l'application. Selon OneSignal , ces notifications apparaissent sur l'appareil de l'utilisateur sans que l'application soit ouverte, ce qui en fait un puissant outil de réengagement.

Il existe deux principaux types de notifications push :

1. Notifications Web Push : diffusées via les navigateurs Web sur les ordinateurs de bureau ou les appareils mobiles

2. Notifications push mobiles : envoyées via des applications mobiles installées sur les appareils

Principaux services et API de notification push

Pour mettre en œuvre les notifications push, vous devrez comprendre les principaux services disponibles :

• Firebase Cloud Messaging (FCM) : le service gratuit de Google pour envoyer des notifications aux applications Web et mobiles

• Service de notifications push Apple (APN) : requis pour l'envoi de notifications aux appareils iOS (nécessite un compte développeur Apple payant)

• API Web Push : l'API de navigateur standard qui permet aux applications Web de recevoir des messages push

Chacun de ces services a des exigences et des limites d’implémentation spécifiques, que nous explorerons tout au long de cet article.

Avantages de la mise en œuvre des notifications push

Avant de plonger dans les détails de mise en œuvre, il est important de comprendre pourquoi les notifications push valent la peine :

• Engagement utilisateur accru : les notifications push peuvent atteindre des taux d'ouverture d'environ 20 %, contre seulement 2 % pour les e-mails

• Amélioration de la rétention des utilisateurs : des notifications régulières et utiles permettent de garder votre application en tête

• Mises à jour urgentes : fournissez immédiatement des informations critiques

• Communication ciblée : segmentez les utilisateurs et diffusez des notifications personnalisées

Selon une enquête menée par Localytics , les utilisateurs de 2017 étaient en réalité plus disposés à recevoir des notifications push que ceux de 2015 avant de les désactiver, ce qui montre une acceptation croissante de ce canal de communication lorsqu'il est utilisé correctement.

Implémentation des notifications push dans Next.js : différentes approches

Explorons plusieurs approches pour implémenter des notifications push dans une application Next.js, de la création de votre propre solution à l'utilisation de services tiers.

Approche 1 : Création avec Firebase Cloud Messaging (FCM)

Firebase Cloud Messaging offre une solution robuste et gratuite pour implémenter des notifications push. Voici comment la configurer dans votre application Next.js :

Étape 1 : Configurer le projet Firebase

Tout d’abord, créez un projet dans la console Firebase et obtenez les détails de votre configuration.

Étape 2 : installer le SDK Firebase

npm install firebase
# or
yarn add firebase

Étape 3 : Créer une configuration Firebase

Créez un firebase.jsfichier dans votre projet :

// firebase.js
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Cloud Messaging
let messaging;

// We need to check if we're in the browser environment
if (typeof window !== 'undefined') {
  messaging = getMessaging(app);
}

export { messaging, getToken, onMessage };

Étape 4 : Créer un Service Worker

Pour que FCM fonctionne, vous avez besoin d'un service worker. Créez un fichier nommé firebase-messaging-sw.jsdans votre publicdossier :

// public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

// Handle background messages
messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/favicon.ico'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Étape 5 : Demander l’autorisation et obtenir le jeton

Créez un composant pour demander des autorisations de notification :

// components/NotificationPermission.jsx
import { useEffect, useState } from 'react';
import { messaging, getToken } from '../firebase';

export default function NotificationPermission() {
  const [token, setToken] = useState('');
  const [notificationPermission, setNotificationPermission] = useState('default');

  useEffect(() => {
    if (typeof window !== 'undefined' && messaging) {
      // Request permission
      Notification.requestPermission().then((permission) => {
        setNotificationPermission(permission);
        
        if (permission === 'granted') {
          // Get FCM token
          getToken(messaging, { 
            vapidKey: "YOUR_VAPID_KEY" 
          }).then((currentToken) => {
            if (currentToken) {
              // Send the token to your server
              console.log('FCM Token:', currentToken);
              setToken(currentToken);
              
              // Here you would typically send this token to your backend
              sendTokenToServer(currentToken);
            } else {
              console.log('No registration token available.');
            }
          }).catch((err) => {
            console.log('An error occurred while retrieving token. ', err);
          });
        }
      });
    }
  }, []);

  const sendTokenToServer = async (token) => {
    try {
      const response = await fetch('/api/registerPushToken', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token })
      });
      const data = await response.json();
      console.log('Token registered:', data);
    } catch (error) {
      console.error('Error registering token:', error);
    }
  };

  return (
    <div>
      {notificationPermission === 'granted' ? (
        <p>Thank you for enabling notifications!</p>
      ) : (
        <button onClick={() => Notification.requestPermission()}>
          Enable Push Notifications
        </button>
      )}
    </div>
  );
}

Étape 6 : Gérer les messages de premier plan

Pour recevoir des notifications lorsque votre application est ouverte, configurez un gestionnaire :

// In your _app.js or a component that's always mounted
import { useEffect } from 'react';
import { messaging, onMessage } from '../firebase';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== 'undefined' && messaging) {
      // Handle messages when the app is in the foreground
      const unsubscribe = onMessage(messaging, (payload) => {
        console.log('Message received in foreground:', payload);
        // You can show a custom notification UI here
        // Or use the browser's notification API
        new Notification(payload.notification.title, {
          body: payload.notification.body,
          icon: '/favicon.ico'
        });
      });
      
      return () => unsubscribe();
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Étape 7 : Configurer le point de terminaison de l'API pour envoyer des notifications

Créez un point de terminaison d'API dans votre application Next.js pour envoyer des notifications :

// pages/api/sendNotification.js
import admin from 'firebase-admin';

// Initialize Firebase Admin if it hasn't been initialized yet
if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
    }),
  });
}

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { token, title, body } = req.body;

  try {
    const message = {
      notification: {
        title,
        body,
      },
      token,
    };

    const response = await admin.messaging().send(message);
    return res.status(200).json({ success: true, response });
  } catch (error) {
    console.error('Error sending notification:', error);
    return res.status(500).json({ error: error.message });
  }
}

Approche 2 : Utilisation de OneSignal

OneSignal est un service tiers populaire qui simplifie la mise en œuvre des notifications push. Particulièrement adapté aux applications e-commerce, il propose une offre gratuite généreuse.

Étape 1 : Créer un compte et une application OneSignal

Inscrivez-vous à OneSignal et créez une nouvelle application dans leur tableau de bord.

Étape 2 : installer le SDK OneSignal

npm install react-onesignal
# or
yarn add react-onesignal

Étape 3 : Initialisez OneSignal dans votre application Next.js

// pages/_app.js
import { useEffect } from 'react';
import OneSignal from 'react-onesignal';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      notifyButton: {
        enable: true,
      },
      allowLocalhostAsSecureOrigin: true,
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Étape 4 : Créer une route API pour l'envoi de notifications

// pages/api/sendOneSignalNotification.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { segments, heading, content } = req.body;

  try {
    const response = await fetch('https://onesignal.com/api/v1/notifications', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Basic ${process.env.ONESIGNAL_REST_API_KEY}`,
      },
      body: JSON.stringify({
        app_id: process.env.ONESIGNAL_APP_ID,
        included_segments: segments || ['All'],
        headings: { en: heading },
        contents: { en: content },
      }),
    });

    const data = await response.json();
    return res.status(200).json(data);
  } catch (error) {
    console.error('Error sending OneSignal notification:', error);
    return res.status(500).json({ error: error.message });
  }
}

Approche 3 : Utilisation de poutres de poussée

Pusher Beams est un autre excellent service pour mettre en œuvre des notifications push en mettant l'accent sur les capacités en temps réel.

Étape 1 : Configurer le compte Pusher et l'instance Beams

Inscrivez-vous à Pusher et créez une instance Beams.

Étape 2 : Installer le SDK Pusher Beams

npm install @pusher/beams-client
# or
yarn add @pusher/beams-client

Étape 3 : Créer un fournisseur de contexte Beams

// contexts/BeamsContext.jsx
import { createContext, useContext, useEffect, useState } from 'react';
import * as PusherPushNotifications from '@pusher/beams-client';

const BeamsContext = createContext();

export function BeamsProvider({ children }) {
  const [beamsClient, setBeamsClient] = useState(null);
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const client = new PusherPushNotifications.Client({
        instanceId: 'YOUR_INSTANCE_ID',
      });

      client.start()
        .then(() => client.addDeviceInterest('hello'))
        .then(() => {
          console.log('Successfully registered and subscribed!');
          setBeamsClient(client);
        })
        .catch(console.error);
    }
  }, []);

  const subscribeToInterest = (interest) => {
    if (beamsClient) {
      beamsClient.addDeviceInterest(interest)
        .then(() => console.log(`Subscribed to ${interest}`))
        .catch(console.error);
    }
  };

  const unsubscribeFromInterest = (interest) => {
    if (beamsClient) {
      beamsClient.removeDeviceInterest(interest)
        .then(() => console.log(`Unsubscribed from ${interest}`))
        .catch(console.error);
    }
  };

  return (
    <BeamsContext.Provider 
      value={{ 
        beamsClient, 
        subscribeToInterest, 
        unsubscribeFromInterest 
      }}
    >
      {children}
    </BeamsContext.Provider>
  );
}

export const useBeams = () => useContext(BeamsContext);

Étape 4 : Enveloppez votre application avec le fournisseur

// pages/_app.js
import { BeamsProvider } from '../contexts/BeamsContext';

function MyApp({ Component, pageProps }) {
  return (
    <BeamsProvider>
      <Component {...pageProps} />
    </BeamsProvider>
  );
}

export default MyApp;

Étape 5 : Créer une route API pour l'envoi de notifications

// pages/api/sendBeamsNotification.js
import Pusher from '@pusher/push-notifications-server';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { interests, title, body } = req.body;

  try {
    const beamsClient = new Pusher({
      instanceId: process.env.PUSHER_INSTANCE_ID,
      secretKey: process.env.PUSHER_SECRET_KEY,
    });

    const response = await beamsClient.publishToInterests(interests, {
      web: {
        notification: {
          title,
          body,
        },
      },
    });

    return res.status(200).json(response);
  } catch (error) {
    console.error('Error sending Pusher Beams notification:', error);
    return res.status(500).json({ error: error.message });
  }
}

Comparaison des solutions de notifications push

Comparons ces approches pour vous aider à choisir la bonne solution pour votre application Next.js :

Messagerie cloud Firebase (FCM)

Avantages :

• Utilisation gratuite avec des quotas généreux

• Excellente intégration avec d'autres services Firebase

• Bonne documentation et support communautaire

• Fonctionne bien pour les applications Web et mobiles

• Intégration directe avec les services Google

Inconvénients :

• Processus de configuration complexe

• Nécessite le maintien d'un travailleur de service

• Personnalisation limitée de l'apparence des notifications

Idéal pour : les applications qui utilisent déjà les services Firebase ou qui ont besoin d’une solution gratuite avec une bonne évolutivité.

OneSignal

Avantages :

• Facile à installer avec une configuration minimale

• Excellent tableau de bord pour la gestion des campagnes

• Excellentes capacités d'analyse et de segmentation

• Gère les problèmes de compatibilité du navigateur pour vous

• Niveau gratuit disponible avec des limites généreuses

Inconvénients :

• Les plans payants peuvent devenir coûteux à grande échelle

• Moins de contrôle sur la mise en œuvre technique

• Ajoute des dépendances tierces à votre application

Idéal pour : les entreprises et applications de commerce électronique qui nécessitent une mise en œuvre rapide avec des fonctionnalités d'analyse et de segmentation avancées.

Poutres de poussée

Avantages :

• API simple pour les notifications en temps réel

• Bonne documentation et intégration facile

• Système de livraison fiable

• Fonctionne bien avec d'autres services Pusher

Inconvénients :

• Niveau gratuit limité

• Pas aussi riche en fonctionnalités que OneSignal à des fins marketing

• Moins mature que FCM

Idéal pour : les applications utilisant déjà les services Pusher ou nécessitant des fonctionnalités en temps réel avec une implémentation simple.

Compatibilité et défis des navigateurs

Lors de la mise en œuvre des notifications push, soyez conscient de ces défis courants :

Assistance Safari et programme pour développeurs Apple

L'obstacle le plus important auquel sont confrontés de nombreux développeurs est la prise en charge de Safari. Comme l'a fait remarquer un développeur sur Reddit :

« Pour envoyer des notifications à Safari, vous devez vous abonner au forfait développeur annuel d'Apple, qui est payant. »

Cette exigence d'un compte développeur Apple payant (99 $/an) constitue un obstacle important pour de nombreux projets, en particulier les plus petits ou ceux en début de développement.

Perception et acceptation des utilisateurs

Un autre défi réside dans la perception des utilisateurs. Nombre d'entre eux déclinent instinctivement les demandes de notifications push web :

« Quand un site web me demande si je souhaite autoriser les notifications, je n'y pense même pas, je dis simplement non. Mais si une application mobile me le demande, je lui laisse généralement une chance avant de la désactiver. »

Cela souligne l’importance de chronométrer votre demande d’autorisation et d’expliquer la valeur des notifications avant de demander l’autorisation.

Complexité technique

Les systèmes de notification push sont intrinsèquement complexes :

« Le push pose TOUJOURS des problèmes. Entre son manque de fiabilité et sa difficulté à mettre en œuvre, c'est vraiment pénible. »

Cette complexité rend les services tiers particulièrement attractifs pour de nombreux développeurs, notamment pour les applications de commerce électronique :

« Si votre entreprise est un commerce électronique, je choisirais un service, construire à partir de zéro demanderait trop de travail. »

Bonnes pratiques pour les notifications push dans Next.js

Pour maximiser l'efficacité de vos notifications push :

1. Demandez la permission au bon moment

Ne demandez pas immédiatement l'autorisation à un utilisateur lorsqu'il visite votre site. Attendez qu'il interagisse avec votre contenu et comprenne l'intérêt de vos notifications.

2. Communiquez clairement la valeur

Expliquez quels types de notifications vous enverrez et comment elles bénéficieront à l'utilisateur avant de demander l'autorisation.

3. Personnaliser et segmenter

Utilisez les données utilisateur pour envoyer des notifications pertinentes plutôt que des messages génériques à tout le monde.

4. Respectez la fréquence et le timing

Ne submergez pas les utilisateurs avec trop de notifications. Tenez compte des fuseaux horaires et envoyez les notifications aux heures appropriées.

5. Facilitez la désinscription

Fournissez toujours aux utilisateurs un moyen clair de se désabonner ou de gérer leurs préférences de notification.

Conclusion

L'intégration de notifications push dans une application Next.js peut considérablement améliorer l'engagement et la fidélisation des utilisateurs. Malgré des défis techniques, notamment en termes de compatibilité avec les navigateurs et d'acceptation par les utilisateurs, les avantages l'emportent souvent sur la complexité.

Pour la plupart des développeurs, en particulier ceux qui travaillent sur des applications de commerce électronique ou qui n'ont pas d'expertise spécifique en matière de notifications push, l'utilisation d'un service tiers comme OneSignal ou Pusher Beams fournira le chemin le plus rapide vers la mise en œuvre avec le moins de frais techniques.

Pour ceux qui utilisent déjà Firebase ou qui ont besoin de plus de contrôle sur la mise en œuvre, FCM propose une solution robuste et gratuite qui s'intègre bien avec d'autres services.

Quelle que soit l'approche choisie, veillez à respecter l'attention de vos utilisateurs et à leur offrir une réelle valeur ajoutée grâce à vos notifications. Cela garantira leur engagement et leur intérêt pour votre application sur le long terme.

Ressources supplémentaires

• Guide des notifications Web Push - Documentation complète de MDN

• Firebase Cloud Messaging – Documentation officielle du FCM

• Documentation OneSignal - Guides de mise en œuvre de OneSignal

• Documentation des poutres poussoirs - Guides officiels des poutres poussoirs

• Documentation Next.js - Pour les questions générales sur l'implémentation de Next.js

Powered by Synscribe