L’API Web Push vous permet d’envoyer des notifications push aux navigateurs Web et aux API. Bien que la majeure partie de la logique se déroule dans le navigateur, vous avez toujours besoin d’un composant côté serveur pour générer vos notifications. Voici comment implémenter un backend web push en utilisant PHP.
Résumé
Conditions préalables
Pour les besoins de ce tutoriel, nous supposerons que vous connaissez les bases de la construction d’API HTTP en PHP. Vous devrez exposer quelques points de terminaison publics à l’aide de votre infrastructure Web. Ceux-ci seront appelés par le JavaScript de votre navigateur pour enregistrer et désenregistrer les appareils.
Cet article ne couvrira pas le code côté navigateur ni son fonctionnement. Vous devrez configurer un agent de service qui répond aux événements push entrants et affiche une notification à l’utilisateur.
À un niveau élevé, le flux de poussée Web ressemble à ceci:
- Un abonnement push est enregistré dans le navigateur. Le navigateur envoie une URL de point de terminaison unique à votre JavaScript.
- Votre JavaScript envoie des données d’abonnement à votre serveur et identifie l’utilisateur auquel il s’applique.
- Lorsque votre backend doit envoyer une notification push, créez une charge utile et envoyez-la à l’URL du point de terminaison signalée dans le cadre des données d’abonnement.
- Le navigateur de l’utilisateur recevra la charge utile via la plate-forme de notification du fournisseur. Votre agent de service JavaScript gère l’événement résultant et utilise l’API de notification du navigateur pour alerter l’utilisateur.
Voici comment implémenter les aspects côté serveur des étapes 1 à 3.
Obtenir la configuration
Nous utiliserons le package Packagiste web-push par minishlink. Cela ne tient pas compte des interactions avec chaque plate-forme de notification de navigateur, vous n’avez donc pas à distinguer manuellement les types de points de terminaison.
Ajoutez le package à votre projet en utilisant Composer:
composer require minishlink / web-push
Pour utiliser la dernière version, vous avez besoin de PHP 7.2 ou supérieur avec le gmp, mbstring, curl, et openssl extensions. Si vous devez utiliser une ancienne version de PHP, verrouillez le paquet sur une ancienne version pour maintenir la compatibilité.
La bibliothèque expose une classe de noyau WebPush avec des méthodes qui vous permettent d’envoyer des notifications individuellement ou par lots. Les abonnements sont représentés par des instances de la classification Subscription.
Fournir des clés VAPID
La confiance dans l’écosystème web push conforme aux normes est renforcée par l’utilisation des clés VAPID. Votre serveur a besoin d’une paire de clés VAPID pour pouvoir s’authentifier auprès des navigateurs. La clé publique doit être exposée via un point de terminaison API.
Vous pouvez générer un porte-clés VAPID en utilisant l’enveloppe web-push:
use MinishlinkWebPushVAPID; $ keyset = VAPID::createVapidKeys(); // public key - this needs to be accessible via an API endpointthrew out $ keyset; // private key - never expose this!threw out $ keyset; File_put_contents("vapid.json", json_encode($ keyset));
Générez des clés pour votre système et stockez-les dans un emplacement persistant. Ajoutez un point de terminaison API pour que votre JavaScript côté client puisse récupérer la clé publique. Cela sera utilisé pour configurer l’abonnement push du navigateur. L’appareil de l’utilisateur acceptera les événements push entrants s’ils ont été signés à l’aide de la clé privée VAPID correspondante.
Enregistrement des abonnements push
L’étape suivante de la séquence consiste à recevoir les demandes d’abonnement push de vos clients. Une fois que le navigateur a confirmé un nouvel abonnement push, votre JavaScript doit envoyer l’URL du point de terminaison de l’abonnement et les clés d’authentification associées à votre serveur. Stockez ces détails avec l’ID utilisateur afin que vous puissiez récupérer ultérieurement tous les périphériques inscrits par push liés à l’utilisateur.
Nous omettons les exemples de code pour cette étape car l’implémentation dépend de votre couche de stockage de données et des valeurs envoyées par votre JavaScript. Typiquement, ce sera une représentation JSON d’un objet PushSubscription. Vous avez besoin d’un ensemble simple de points de terminaison d’API CRUD basés sur une base de données pour créer un abonnement, remplacer un abonnement existant et demander la suppression lorsque l’utilisateur se désinscrit.
Préparation des abonnements
Une fois qu’un client est enregistré avec succès, vous pouvez commencer à envoyer des notifications à l’aide de la bibliothèque web-push. Commencez par créer une instance du WebPush à classer:
use MinishlinkWebPushWebPush; $ webPush = new WebPush(]);
Vous pouvez réutiliser une instance WebPush chaque fois que vous envoyez une notification. La bibliothèque doit être configurée avec le porte-clés VAPID que vous avez généré précédemment. Les clés doivent être encodées en Base64, mais cela est géré pour vous si vous les créez avec la bibliothèque.
VAPID subject est utilisé pour identifier votre serveur et ses coordonnées. Vous pouvez fournir une URL de site Web ou un lien d’adresse e-mail mailto:.
Ensuite, vous devez saisir l’abonnement push auquel vous allez envoyer. Utilisez votre système d’accès aux données pour trouver les URL de point de terminaison push associées à l’utilisateur auquel vous souhaitez envoyer. Convertir chaque abonnement en un exemple Subscription:
use MinishlinkWebPushSubscription; // Get user's push data ...// SELECT * FROM push_subscriptions WHERE user_id = 123456 $ subscription = Subscription::create(]);
La propriété auth de la PushSubscription est répétée deux fois pour traiter deux versions différentes de la spécification utilisée par les services de navigateur. La propriété P256DH est une autre clé publique qui doit être fournie lorsqu’elle est définie sur l’abonnement.
La web-push La bibliothèque est compatible avec les terminaux push Chrome et Firefox. Il fonctionnera également avec toute autre implémentation de push Web conforme à la norme actuelle.
Envoi d’une notification
Combinez maintenant vos instances WebPush et Subscription pour envoyer une notification:
$ result = $ webPush -> sendOneNotification( $ subscription, json_encode());
Appel sendOneNotification() fournit une livraison immédiate pour une seule notification. La charge utile dans ce cas est un tableau codé JSON avec deux propriétés. C’est à vous de décider quelles données vous envoyez et quel format vous utilisez – votre client JavaScript les reçoit telles quelles et peut les interpréter au besoin.
L’envoi d’une notification renvoie une classe de résultat qui vous permet de vérifier si l’opération a réussi:
if ($ result -> isSuccess()) { // all good}else { // something went wrong error_log($ result -> getReason()); // provides raw HTTP response data error_log($ result -> getResponse()); }
Vous pouvez prendre des mesures pour réessayer ou annuler la livraison en cas d’erreur.
Les abonnements aux notifications peuvent également expirer. Appelez le isSubscriptionExpired() sur une classe de résultat pour déterminer si c’est la raison de l’échec. Vous pouvez supprimer l’abonnement de votre base de données dans ce scénario, en veillant à ne rien envoyer d’autre à un point mort.
Notifications par lots
Les notifications peuvent être regroupées pour être livrées avec un seul appel de méthode:
$ webPush -> queueNotification($ subscription, );$ webPush -> queueNotification($ subscription, ); foreach ($ webPush -> flush() as $i => $ result) { threw out ("Notification $i was " . ($ result -> isSuccess() ? "feels" : "not sent"));}
Ceci est utile lorsque vous savez que vous allez envoyer un grand nombre de notifications dans un court laps de temps. Mettez en file d’attente toutes vos charges utiles et laissez web-push les livrer de manière optimale.
Vous pouvez limiter le nombre de notifications envoyées dans un flush() en passant un entier à la méthode:
$ webPush -> flush(100); // send 100 messages
La valeur par défaut est 1000.
Options de notification
sendOneNotification() et queueNotification() acceptez les options suivantes comme troisième argument du tableau:
-
TTL– Contrôle la durée pendant laquelle la plate-forme de notification du navigateur conservera la notification si elle ne peut pas être transmise immédiatement à l’appareil de l’utilisateur. Si l’appareil de l’utilisateur est hors ligne, les plates-formes essaieront de le livrer pendant les quatre prochaines semaines par défaut. Si vous envoyez une notification qui ne sera pas pertinente la semaine prochaine, ajustez l’âge en conséquence afin que l’utilisateur ne voie pas de contenu obsolète. -
urgency– Accepteznormal,lowouvery-lowcomme valeurs. Certaines plateformes peuvent l’utiliser pour ajuster la fréquence de livraison des notifications. Les appareils qui entrent en mode d’économie de batterie peuvent suspendre la livraison des notifications non urgentes. -
batchSize– Cela a le même effet que l’argument deflush()décrit ci-dessus.
Vous pouvez configurer les valeurs d’option par défaut à l’aide du deuxième argument du fabricant WebPush:
$ webPush = new WebPush(], );
Résumé
La web-push bibliothèque facilite l’envoi de notifications push web en utilisant PHP. Vous obtenez une couche d’abstraction au-dessus des différentes plates-formes de navigateur qui prend en charge le traitement par lots, la gestion des erreurs et toutes les fonctionnalités de push Web.
Le mécanisme de poussée Web est un système de navigateur inhabituel car il repose sur des composants côté serveur distants que vous fournissez vous-même. Cela peut le faire paraître opaque et technique. En pratique, la création d’un backend PHP simple est rapide et facile ; l’implémentation frontale est généralement l’aspect le plus chronophage, surtout si vous n’utilisez pas déjà les fonctionnalités de service worker.