Utiliser Web Push

Dans les extensions, vous pouvez utiliser n'importe quel fournisseur push pour envoyer des notifications push et messages. Une transmission depuis l'API Push est traitée par votre service worker de la façon suivante : dès sa réception. Si le service worker est suspendu, l'exécution de la requête Push le réactiver. Le processus pour l'utiliser dans les extensions est exactement le même que vous l'utiliseriez 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 un l'autorisation pour l'accorder ou la refuser. Avec les extensions, l'invite ne sera pas affichés. Pour utiliser l'API Push dans votre extension, vous devez définir le paramètre 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îne une erreur immédiate, le même résultat que si l'utilisateur a refusé l'autorisation. De plus, n'oubliez pas que L'autorisation notifications entraînera un avertissement à afficher lors de l'installation. Chrome désactive également l'extension installations existantes jusqu'à ce que l'utilisateur approuve la nouvelle demande d'autorisation. Vous pouvez découvrez comment gérer ce problème dans la guide d'avertissement relatif aux autorisations.

Fournisseurs et services push

Après avoir ajouté l'autorisation à votre fichier manifest.json, vous devrez configurer la connexion entre votre backend et l'extension. Cette connexion se divise en deux parties : le fournisseur Push et le service Push. A est le SDK que vous utilisez pour envoyer le message au service Push. Il existe de nombreuses options, et n'importe quel fournisseur push peut fonctionner pour le mode Push. (même s'il n'est pas possible de proposer un SDK qui facilite l'intégration). Toi devront tester le SDK de votre fournisseur pour voir ce qui est possible. Poussée est le service avec lequel l'appareil de l'utilisateur final est enregistré, afin qu'il puisse être alerté à tout message push envoyé par un fournisseur Push. C'est quelque chose que vous n'avez pas car il est codé en dur dans chaque navigateur. Pour Chrome, Firebase Cloud Messaging est le service push. Tous les messages transférés vers un navigateur Chrome l'utilisateur y sera acheminée.

Auto-hébergement d'un fournisseur push

N'importe quel fournisseur push peut fonctionner, mais tous ne proposent pas de SDK compatible. sur les service workers. Si vous rencontrez des problèmes, vous devez vous adresser à votre fournisseur pour la faire fonctionner. Toutefois, vous n'avez pas besoin d'utiliser un fournisseur public. En utilisant comme web-push, vous pouvez héberger votre propre backend.

Vous pouvez tester cette bibliothèque en utilisant web-push-codelab.glitch.me. Plus précisément, vous devrez copier la clé publique VAPID du serveur Push pour générer l'invite push ; dans le navigateur. Cette clé publique est en fait une clé base64 qui doit être décodée et convertie en Uint8Array afin de s'inscrire au service Push du navigateur administrateur. Il existe des bibliothèques pour exécuter cette logique, les éléments suivants sont 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 abonnement PushSubscription, un qui contient les métadonnées du serveur push. Puisque 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 et push vers le service worker de l'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, et les messages seront connectés à la console du service worker.

Puisqu'il s'agit d'une norme Web ouverte, il existe une grande quantité de documentation sur comment implémenter Web Push, y compris sur le blog Chrome. Pour une la version complète de l'exemple présenté ici, il y en a une disponible dans notre exemple de dépôt extensions.

Poussée silencieuse

Vous avez pu recevoir une notification push dans votre extension Manifest V3 depuis que Manifest V3 a été introduit dans Chrome 88. Cependant, il y avait toujours eu l'exigence que la notification affichait une sorte d'invite visible par l'utilisateur, telle qu'une notification Web. Cela le rendait beaucoup moins utile si vous souhaitez envoyer des commandes ou des mises à jour de données à votre extension sans déranger avec des informations inutiles. Depuis 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
});