Dans les extensions, vous pouvez utiliser n'importe quel fournisseur de notifications push pour envoyer des notifications et des messages push. Un push de l'API Push sera traité par votre service worker dès qu'il sera reçu. Si le service worker a été suspendu, un push le réactive. La procédure à suivre pour l'utiliser dans les extensions est exactement la même que celle que vous utiliseriez 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 d'autorisation s'affiche pour l'utilisateur. Avec les extensions, cette invite ne s'affichera pas. Pour utiliser l'API Push dans votre extension, vous devez définir l'autorisation notifications dans votre fichier manifeste.json.
{
"manifest_version": 3,
...
"permissions": ["notifications"]
Si vous ne disposez pas de cette autorisation, toute interaction avec registration.pushManager se traduira par une erreur immédiate, le même résultat que si l'utilisateur avait refusé l'autorisation. En outre, 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 des avertissements liés aux autorisations.
Fournisseurs et services Push
Une fois l'autorisation ajoutée à votre fichier manifeste.json, vous devez configurer la connexion entre votre backend et l'extension. Cette connexion peut être divisée en deux parties : le fournisseur de service 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, et n'importe quel fournisseur de notifications push peut fonctionner avec l'API Push (bien qu'il ne propose pas forcément de SDK facilitant l'intégration). Vous devrez tester le SDK de votre fournisseur pour voir ce qui est possible. Un service push correspond au système avec lequel l'appareil de l'utilisateur final est enregistré. Il peut donc être alerté de tout message push envoyé par un fournisseur push. C'est quelque chose sur lequel vous n'avez aucun contrôle, car il est codé en dur dans chaque navigateur. Pour Chrome, Firebase Cloud Messaging est le service de push. Tous les messages envoyés à un utilisateur Chrome seront acheminés via ce service.
Auto-hébergement d'un fournisseur Push
N'importe quel fournisseur push peut fonctionner, mais tous ne proposent pas de SDK compatible avec les service workers. Si vous rencontrez des difficultés à le configurer, contactez votre fournisseur. Vous n'avez cependant 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 devrez copier la clé publique VAPID du serveur Push pour 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 pour s'enregistrer auprès du gestionnaire de transfert du navigateur. Des bibliothèques sont disponibles pour exécuter cette logique, mais tout ce dont vous avez besoin est le code suivant.
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;
}
Cette valeur est transmise au Gestionnaire de transfert.
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 qui contient les métadonnées du serveur Push. Étant donné que vous utilisez web-push-codelab.glitch.me, cette valeur doit être copiée dans la section "Abonnement push" de la page.
Une fois que vous avez le PushSubscription, vous pouvez enregistrer un écouteur pour les messages push dans le service worker de votre 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 consignés dans la console du service worker.
Comme il s'agit d'une norme Web ouverte, de nombreuses documentations existent sur l'implémentation de Web Push, y compris sur le blog de Chrome. Pour obtenir une version complète de l'exemple présenté ici, vous pouvez consulter notre dépôt d'exemples d'extensions.
Push silencieux
Vous pouvez recevoir une notification push dans votre extension Manifest V3 depuis l'introduction de Manifest V3 dans Chrome 88. Toutefois, il a toujours été obligatoire que la notification affiche une invite visible par l'utilisateur, comme une notification Web. Cela la rendait beaucoup moins utile si vous souhaitiez envoyer des commandes ou des mises à jour de données à votre extension sans gêner l'utilisateur avec des informations inutiles. À partir de Chrome 121, les extensions peuvent définir userVisibleOnly sur false. Vous pouvez désormais envoyer à vos utilisateurs des notifications push silencieuses qui ne sont pas visibles par l'utilisateur. Pour l'utiliser, définissez userVisibleOnly sur false lorsque vous appelez pushManager.subscribe.
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});