Introduction

Les notifications push sont un élément clé pour engager les utilisateurs dans une Progressive Web App (PWA). Cependant, leur mise en œuvre sur iOS peut être un défi. Dans cet article, nous allons explorer comment créer un système de notifications robuste pour votre PWA sur iOS, en couvrant les abonnements, les permissions, et la création d'une API Express pour gérer le tout.

Configuration initiale

Avant de plonger dans le code, assurez-vous que votre PWA est correctement configurée avec un fichier manifest et un service worker. Vous aurez également besoin d'un certificat Apple Push Notification service (APNs) pour envoyer des notifications sur iOS.

Gestion des permissions

La première étape consiste à demander la permission d'envoyer des notifications. Voici comment procéder :

async function requestNotificationPermission() {
  if (!("Notification" in window)) {
    console.log("Ce navigateur ne supporte pas les notifications desktop");
    return;
  }

  try {
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      console.log("Permission de notification accordée");
      subscribeUserToPush();
    } else {
      console.log("Permission de notification refusée");
    }
  } catch (error) {
    console.error("Erreur lors de la demande de permission:", error);
  }
}

Abonnement aux notifications

Une fois la permission accordée, nous pouvons abonner l'utilisateur aux notifications push :

async function subscribeUserToPush() {
  const swRegistration = await navigator.serviceWorker.ready;
  
  try {
    const subscription = await swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
    });
    
    console.log('Utilisateur abonné:', subscription);
    sendSubscriptionToServer(subscription);
  } catch (error) {
    console.error('Échec de l'abonnement:', error);
  }
}

API Express pour la gestion des abonnements

Créons maintenant une API Express simple pour gérer les abonnements côté serveur :

const express = require('express');
const webpush = require('web-push');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

const subscriptions = new Set();

app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  subscriptions.add(subscription);
  res.status(201).json({});
});

app.post('/unsubscribe', (req, res) => {
  const subscription = req.body;
  subscriptions.delete(subscription);
  res.status(200).json({});
});

app.post('/notify', (req, res) => {
  const notification = {
    title: 'Nouvelle notification',
    body: 'Ceci est le corps de la notification',
    icon: '/icon.png'
  };

  Promise.all(
    Array.from(subscriptions).map(subscription => 
      webpush.sendNotification(subscription, JSON.stringify(notification))
    )
  )
  .then(() => res.status(200).json({}))
  .catch(error => {
    console.error('Erreur lors de l'envoi des notifications:', error);
    res.sendStatus(500);
  });
});

app.listen(3000, () => console.log('Serveur démarré sur le port 3000'));

Envoi de notifications

Pour envoyer des notifications, utilisez l'endpoint /notify de votre API. Vous pouvez le déclencher manuellement ou via un système automatisé selon vos besoins.

Conclusion

La mise en place d'un système de notifications pour une PWA sur iOS nécessite une attention particulière aux permissions et à la gestion des abonnements. En suivant ces étapes, vous pouvez créer une expérience utilisateur engageante tout en respectant les préférences de vos utilisateurs en matière de notifications.

N'oubliez pas de tester abondamment votre implémentation sur différents appareils iOS pour assurer une compatibilité optimale.

Note : Cet article couvre les bases de la mise en place des notifications pour PWA sur iOS. Pour des scénarios plus avancés ou des problèmes spécifiques, n'hésitez pas à consulter la documentation officiale d'Apple sur les notifications web push ou à me contacter via la page Contact.