Gebruik Webpush

In extensies kunt u elke pushprovider gebruiken om pushmeldingen en -berichten te verzenden. Een push van de Push API wordt door uw service worker verwerkt zodra deze binnenkomt. Als de service worker is opgeschort, zal een push deze weer activeren. Het gebruik ervan in extensies is precies hetzelfde als op het open web.

Vraag toestemming om de Push API te gebruiken.

Wanneer je een pushserver registreert op een normale website, krijgt de gebruiker een prompt te zien om toestemming te geven of te weigeren. Bij extensies wordt die prompt niet weergegeven. Om de push-API in je extensie te gebruiken, moet je de toestemming notifications instellen in je manifest.json.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Als deze toestemming ontbreekt, resulteert elke interactie met registration.pushManager in een onmiddellijke foutmelding, hetzelfde resultaat als wanneer de gebruiker de toestemming heeft geweigerd. Houd er bovendien rekening mee dat de toestemming notifications een waarschuwing zal weergeven tijdens de installatie. Chrome zal de extensie ook uitschakelen voor bestaande installaties totdat de gebruiker het nieuwe toestemmingsverzoek goedkeurt. Meer informatie over hoe u hiermee omgaat, vindt u in de handleiding voor toestemmingswaarschuwingen .

Push-providers en push-services

Nadat je de toestemming aan je manifest.json hebt toegevoegd, moet je de verbinding tussen je backend en de extensie configureren. Deze verbinding bestaat uit twee delen: de pushprovider en de pushservice. Een provider is de SDK die je gebruikt om het bericht naar de pushservice te sturen. Er zijn veel verschillende opties en elke pushprovider kan werken met de push-API (hoewel ze mogelijk geen SDK aanbieden die de integratie vereenvoudigt). Je zult moeten experimenteren met de SDK van je provider om te zien wat er mogelijk is. Een pushservice is de service waarmee het apparaat van de eindgebruiker is geregistreerd, zodat het een melding kan ontvangen van elk pushbericht dat door een pushprovider wordt verzonden. Hier heb je geen controle over, omdat dit is vastgelegd in de code van individuele browsers. Voor Chrome is Firebase Cloud Messaging de pushservice. Alle berichten die naar een Chrome-gebruiker worden gepusht, worden via deze service gerouteerd.

Zelf hosten van een Push-provider

Elke pushprovider kan werken, maar niet alle providers bieden een SDK aan die compatibel is met service workers. Neem contact op met uw provider als u problemen ondervindt bij het opstarten. U hoeft echter geen openbare provider te gebruiken. Met behulp van bibliotheken zoals web-push kunt u uw eigen backend hosten.

Je kunt deze bibliotheek testen via web-push-codelab.glitch.me . Je moet de openbare VAPID-sleutel van de pushserver kopiëren om een ​​pushabonnement in de browser te genereren. Deze openbare sleutel is een base64- gecodeerde binaire waarde die moet worden gedecodeerd en omgezet naar een Uint8Array om zich te registreren bij de pushmanager van de browser. Er zijn bibliotheken beschikbaar die deze logica uitvoeren, maar het volgende is alles wat je nodig hebt.

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;
}

De opgegeven waarde wordt doorgegeven aan de pushmanager.

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();

De subscribe functie retourneert een PushSubscription , een object dat de metadata van de pushserver bevat. Aangezien je web-push-codelab.glitch.me gebruikt, moet deze waarde worden gekopieerd naar het pushabonnementgedeelte van de pagina.

Zodra je de PushSubscription hebt, kun je een listener voor pushberichten registreren in de service worker van onze extensie.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

Zodra je listener is ingesteld, kun je een bericht verzenden via web-push-codelab.glitch.me . De berichten worden vervolgens geregistreerd in de console van de service worker.

Omdat het een open webstandaard is, is er veel bestaande documentatie over hoe Web Push geïmplementeerd kan worden, onder andere op de blog van Chrome . Een complete versie van het hier besproken voorbeeld is beschikbaar in onze voorbeeldrepository voor extensies .

Stille druk

Je kunt al pushmeldingen ontvangen in je Manifest v3-extensie sinds Manifest v3 werd geïntroduceerd in Chrome 88. Er was echter altijd de vereiste dat de melding een soort zichtbare prompt voor de gebruiker weergaf, zoals een webnotificatie . Dit maakte het een stuk minder handig als je opdrachten of data-updates naar je extensie wilde pushen zonder de gebruiker te belasten met onnodige informatie. Vanaf Chrome 121 kunnen extensies userVisibleOnly instellen op false . Je kunt nu stille, niet-zichtbare pushmeldingen naar je gebruikers sturen. Om dit te gebruiken, stel je userVisibleOnly in op false wanneer je pushManager.subscribe aanroept.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});