Dans les extensions, vous pouvez utiliser n'importe quel fournisseur de notifications push pour envoyer des notifications et des messages push. Une notification push de l'API Push sera traitée par votre service worker dès sa réception. Si le service worker a été suspendu, une notification Push le réactivera. La procédure à suivre pour l'utiliser dans les extensions est exactement la même que celle à suivre sur le Web ouvert.
Obtenir l'autorisation d'utiliser l'API Push
Lorsque vous enregistrez un serveur Push sur un site Web normal, l'utilisateur voit une invite d'autorisation pour l'accorder ou la refuser. 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 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, comme si l'utilisateur avait refusé l'autorisation. De plus, gardez à l'esprit que l'autorisation notifications entraînera l'affichage d'un avertissement concernant les autorisations 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 sur les avertissements concernant les autorisations.
Fournisseurs et services Push
Une fois que vous avez ajouté l'autorisation à votre fichier manifest.json, vous devez configurer la connexion entre votre backend et l'extension. Cette connexion peut être divisée en 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 de notifications push peut fonctionner avec l'API Push (même s'il ne propose pas forcément de SDK qui facilite l'intégration). Vous devrez tester le SDK de votre fournisseur pour voir ce qui est possible. Un service Push est celui auprès duquel l'appareil de l'utilisateur final est enregistré, afin qu'il puisse être averti 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 de notification push. Tous les messages envoyés à un utilisateur Chrome seront acheminés par ce biais.
Auto-héberger un fournisseur Push
N'importe quel fournisseur de notifications push peut fonctionner, mais tous ne proposent pas de SDK fonctionnant dans les service workers. Vous devrez contacter votre fournisseur si vous rencontrez des problèmes pour l'exécuter. Toutefois, vous n'avez pas besoin d'utiliser un fournisseur public. Vous pouvez héberger votre propre backend à l'aide de bibliothèques telles que web-push.
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 fait une valeur binaire encodée en base64 qui devra être décodée et convertie en Uint8Array pour pouvoir être enregistrée auprès du gestionnaire Push du navigateur. Des bibliothèques sont disponibles pour effectuer cette logique, mais ce qui suit est tout ce qui est nécessaire.
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 notifications push.
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. Comme vous utilisez web-push-codelab.glitch.me, cette valeur doit être copiée dans la section "Push Subscription" (Abonnement push) de la page.
Une fois que vous avez l'objet PushSubscription, vous êtes prêt à 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 enregistrés dans la console du service worker.
Comme il s'agit d'une norme Web ouverte, il existe de nombreuses documentations sur la façon d'implémenter Web Push, y compris sur le blog de Chrome. Pour obtenir une version complète de l'exemple présenté ici, consultez notre dépôt d'exemples d'extensions.
Notification push silencieuse
Vous pouvez recevoir des notifications push dans votre extension Manifest V3 depuis l'introduction de Manifest V3 dans Chrome 88. Toutefois, il a toujours été exigé que la notification affiche une invite visible par l'utilisateur, comme une notification Web. Cela le rendait beaucoup moins utile si vous souhaitiez envoyer des commandes ou des mises à jour de données à votre extension sans déranger l'utilisateur avec des informations inutiles. À partir de Chrome 121, les extensions peuvent définir userVisibleOnly sur false. Vous pouvez désormais envoyer des notifications push silencieuses et non visibles par les utilisateurs. Pour l'utiliser, définissez userVisibleOnly sur false lorsque vous appelez pushManager.subscribe.
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});