Gebruik WebSockets in servicemedewerkers

Deze tutorial laat zien hoe u verbinding kunt maken met een WebSocket in de servicewerker van uw Chrome-extensie. Je kunt een werkend voorbeeld vinden op Github .

Achtergrond

Vanaf Chrome 116 krijgen medewerkers van de uitbreidingsservice verbeterde ondersteuning voor WebSockets . Voorheen kon een servicemedewerker inactief worden ondanks dat er een WebSocket-verbinding actief was als er gedurende 30 seconden geen andere extensiegebeurtenissen plaatsvonden. Hierdoor wordt de servicemedewerker beëindigd en de WebSocket-verbinding gesloten. Voor meer achtergrondinformatie over de levenscyclus van de extensieservicemedewerker leest u de handleiding voor extensieservicemedewerkers .

Vanaf Chrome 116 kunt u een servicemedewerker met een WebSocket-verbinding actief houden door berichten uit te wisselen binnen het activiteitenvenster van de servicemedewerker uit de jaren 30. Deze kunnen worden gestart vanaf uw server of vanaf uw extensie. In het volgende voorbeeld sturen we een regulier bericht van de Chrome-extensie naar de server om ervoor te zorgen dat de servicemedewerker in leven blijft.

Voorbeeld: WebSocket keepalive

Eerst moeten we ervoor zorgen dat onze extensie alleen draait in Chrome-versies die WebSockets ondersteunen in servicewerknemers door de minimale Chrome-versie in het manifest in te stellen op 116:

manifest.json:

{
  ...
  "minimum_chrome_version": "116",
  ...
}

Dan kunnen we de servicemedewerker actief houden door elke 20 seconden een keepalive-bericht te sturen. De keepalive wordt gestart zodra de servicemedewerker verbinding maakt met de WebSocket. De volgende voorbeeld-WebSocket-client registreert berichten en roept keepAlive() aan wanneer de onopen gebeurtenis wordt geactiveerd:

service-werker.js

let webSocket = null;

function connect() {
  webSocket = new WebSocket('wss://example.com/ws');

  webSocket.onopen = (event) => {
    console.log('websocket open');
    keepAlive();
  };

  webSocket.onmessage = (event) => {
    console.log(`websocket received message: ${event.data}`);
  };

  webSocket.onclose = (event) => {
    console.log('websocket connection closed');
    webSocket = null;
  };
}

function disconnect() {
  if (webSocket == null) {
    return;
  }
  webSocket.close();
}

Binnen keepAlive() gebruiken we setInterval(...) om regelmatig een ping naar de server te sturen terwijl er een actieve WebSocket-verbinding is:

function keepAlive() {
  const keepAliveIntervalId = setInterval(
    () => {
      if (webSocket) {
        webSocket.send('keepalive');
      } else {
        clearInterval(keepAliveIntervalId);
      }
    },
    // Set the interval to 20 seconds to prevent the service worker from becoming inactive.
    20 * 1000 
  );
}