Gebruik Webpush

In extensies kunt u elke Push-provider gebruiken om pushmeldingen en berichten te verzenden. Een push vanuit de Push API wordt door uw servicemedewerker verwerkt zodra deze binnenkomt. Als de servicemedewerker geschorst is, zal een Push hem weer wakker maken. Het proces om het in extensies te gebruiken is precies hetzelfde als wat u op het open web zou gebruiken.

Krijg toestemming om de Push API te gebruiken

Wanneer u een Push-server op een normale website registreert, krijgt de gebruiker een toestemmingsprompt te zien om deze te verlenen of te weigeren. Bij extensies wordt deze prompt niet weergegeven. Om de Push API in uw extensie te gebruiken, moet u de machtiging notifications instellen in uw manifest.json

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

Als u deze toestemming mist, zal elke interactie met registration.pushManager resulteren in een onmiddellijke fout, hetzelfde resultaat alsof de gebruiker de toestemming heeft geweigerd. Houd er bovendien rekening mee dat de machtiging notifications ervoor zorgt dat er tijdens de installatie een toestemmingswaarschuwing wordt weergegeven. Chrome schakelt de extensie ook uit voor bestaande installaties totdat de gebruiker het nieuwe toestemmingsverzoek goedkeurt. U kunt meer leren over hoe u hiermee om kunt gaan in de handleiding voor toestemmingswaarschuwingen .

Pushaanbieders en Pushdiensten

Nadat u de machtiging aan uw manifest.json heeft toegevoegd, moet u de verbinding tussen uw backend en de extensie configureren. Deze verbinding kan in twee delen worden opgevat: de Push-provider en de Push-service. Een provider is de SDK die u gebruikt om het bericht naar de Push-service te verzenden. Er zijn veel verschillende opties en elke Push-provider kan voor de Push API werken (hoewel ze mogelijk geen SDK bieden die de integratie eenvoudig maakt). U moet experimenteren met de SDK van uw provider om te zien wat er mogelijk is. Bij een Push-dienst is het apparaat van de eindgebruiker geregistreerd, zodat het op de hoogte kan worden gesteld van elk push-bericht dat door een Push-provider wordt verzonden. Dit is iets waar u geen controle over heeft, omdat het hardgecodeerd is in individuele browsers. Voor Chrome is Firebase Cloud Messaging de Push-service. Alle berichten die naar een Chrome-gebruiker worden gepusht, worden hier doorheen geleid.

Zelf een Push-provider hosten

Elke Push-provider kan werken, maar niet alle providers bieden een SDK die werkt in servicemedewerkers. Als u problemen ondervindt bij het opstarten, moet u uw provider raadplegen. 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 met web-push-codelab.glitch.me . Concreet moet u de openbare VAPID-sleutel van de Push-server kopiëren om het Push-abonnement in de browser te genereren. Deze openbare sleutel is eigenlijk een base64- gecodeerde binaire waarde die moet worden gedecodeerd en geconverteerd naar een Uint8Array om te kunnen registreren bij de Push Manager van de browser. Er zijn bibliotheken beschikbaar om deze logica uit te voeren, maar het volgende is alles wat nodig is.

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 Push Manager

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 retourneert een PushSubscription , een object dat de metadata van de Push-server bevat. Omdat u web-push-codelab.glitch.me gebruikt, moet deze waarde worden gekopieerd naar het Push Subscription-gedeelte van de pagina.

Zodra u het PushAbonnement heeft, bent u klaar om een ​​luisteraar voor pushberichten te registreren in de servicemedewerker van ons toestel.

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

Als uw luisteraar op zijn plaats staat, kunt u een bericht indienen op web-push-codelab.glitch.me , waarna de berichten worden ingelogd in de console van de servicemedewerker.

Omdat het een open webstandaard is, is er veel bestaande documentatie over hoe Web Push te implementeren, ook op de blog van Chrome . Voor een volledige versie van het hier behandelde voorbeeld is er een beschikbaar in onze voorbeeldrepository voor extensies .

Stille druk

U kunt een pushmelding ontvangen in uw Manifest v3-extensie sinds Manifest v3 werd geïntroduceerd in Chrome 88. Er was echter altijd de vereiste dat de melding een voor de gebruiker zichtbare prompt liet zien, zoals een webmelding . Dit maakte het een stuk minder handig als u opdrachten of gegevensupdates naar uw extensie wilde pushen zonder de gebruiker lastig te vallen met onnodige informatie. Vanaf Chrome 121 kunnen extensies userVisibleOnly instellen op false . U kunt nu stille, niet-gebruikersgerichte pushmeldingen naar uw gebruikers sturen. Om dit te gebruiken, stelt u userVisibleOnly in op false wanneer u pushManager.subscribe aanroept.

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