Dans les extensions, vous pouvez utiliser n'importe quel fournisseur push pour envoyer des notifications et des messages push. Un push de l'API Push sera traité par votre service worker dès sa réception. Si le service worker a été suspendu, il est réactivé via une commande Push. Le processus pour l'utiliser dans les extensions est exactement le même que sur le Web ouvert.
Obtenir l'autorisation d'utiliser l'API Push
Lorsque vous enregistrez un serveur push sur un site Web normal, une invite s'affiche pour demander à l'utilisateur de l'accorder ou de le refuser. Avec les extensions,
ce message ne s'affichera pas. Pour utiliser l'API Push dans votre extension, vous devez définir l'autorisation notifications dans le fichier manifest.json.
{
"manifest_version": 3,
...
"permissions": ["notifications"]
Si vous ne disposez pas de cette autorisation, toute interaction avec registration.pushManager entraînera une erreur immédiate, le même résultat que si l'utilisateur avait refusé l'autorisation. De plus, n'oubliez pas que l'autorisation notifications entraîne l'affichage d'un avertissement d'autorisation lors de l'installation. Chrome désactivera également l'extension pour toutes les installations existantes jusqu'à ce que l'utilisateur approuve la nouvelle demande d'autorisation. Pour en savoir plus sur la gestion de ce problème, consultez le guide d'avertissement relatif aux autorisations.
Fournisseurs et services Push
Une fois l'autorisation ajoutée au fichier manifest.json, vous devez configurer la connexion entre votre backend et l'extension. Cette connexion se compose de deux parties : le fournisseur Push et le service Push. Un fournisseur est le SDK que vous utilisez pour envoyer le message au service Push. Il existe de nombreuses options différentes, et n'importe quel fournisseur Push peut fonctionner pour l'API Push (bien qu'il ne propose pas toujours de SDK facilitant l'intégration). Vous devez tester le SDK de votre fournisseur pour voir ce qu'il est possible de faire. Un service Push est celui avec lequel l'appareil de l'utilisateur final est enregistré. Il peut donc être alerté de tout message push envoyé par un fournisseur Push. Vous n'avez aucun contrôle sur ce paramètre, car il est codé en dur dans chaque navigateur. Pour Chrome, Firebase Cloud Messaging est le service push. Tous les messages envoyés à un utilisateur de Chrome y sont acheminés.
Auto-héberger un fournisseur push
Tous les fournisseurs push peuvent fonctionner, mais tous ne proposent pas de SDK fonctionnant dans les service workers. Si vous rencontrez des problèmes pour le faire fonctionner, vous devrez le consulter. Toutefois, vous n'avez pas besoin d'utiliser un fournisseur public. À l'aide de bibliothèques telles que web-push, vous pouvez héberger votre propre backend.
Vous pouvez tester cette bibliothèque à l'aide de web-push-codelab.glitch.me. Plus précisément, vous devez copier la clé publique VAPID du serveur push afin de générer l'abonnement push dans le navigateur. Cette clé publique est en réalité une valeur binaire encodée en base64 qui doit être décodée et convertie en Uint8Array afin de pouvoir être enregistrée auprès du gestionnaire d'envoi du navigateur. Des bibliothèques sont disponibles pour exécuter cette logique, mais il suffit de suivre les étapes ci-dessous.
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
La valeur fournie est transmise au gestionnaire de transmission.
const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);
async function subscribe() {
try {
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey
});
console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);
return subscription
} catch (error) {
console.error('Subscribe error: ', error);
}
}
const subscription = await subscribe();
La fonction subscribe renvoie un PushSubscription, un objet contenant les métadonnées du serveur Push. Comme vous utilisez web-push-codelab.glitch.me, cette valeur doit être copiée dans la partie "Abonnement push" de la page.
Une fois que vous disposez de l'abonnement PushSubscription, vous pouvez enregistrer un écouteur pour les messages push dans le service worker de notre extension.
self.addEventListener('push', function (event) {
console.log(`Push had this data/text: "${event.data.text()}"`);
});
Une fois votre écouteur en place, vous pouvez envoyer un message sur web-push-codelab.glitch.me. Les messages seront alors connectés à la console du service worker.
Comme il s'agit d'une norme Web ouverte, il existe de nombreuses documentations expliquant comment implémenter Web Push, y compris sur le blog de Chrome. Pour obtenir une version complète de l'exemple présenté ici, vous en trouverez une dans notre dépôt d'exemples d'extensions.
Push silencieux
Depuis l'introduction de Manifest V3 dans Chrome 88, vous pouvez recevoir une notification push dans votre extension Manifest V3. Cependant, il avait toujours été exigé que la notification affichait une sorte d'invite visible par l'utilisateur, telle qu'une notification Web. Cela rendait beaucoup moins utile si vous souhaitiez transmettre des commandes ou des mises à jour de données à votre extension sans déranger l'utilisateur avec des informations inutiles. Depuis Chrome 121, les extensions peuvent définir userVisibleOnly sur false. Vous pouvez désormais leur envoyer des notifications push silencieuses qui ne sont pas visibles par l'utilisateur. Pour cela, définissez userVisibleOnly sur false lorsque vous appelez pushManager.subscribe.
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});