Usa WebSockets en service workers

En este instructivo, se muestra cómo conectarte a un WebSocket en el service worker de tu extensión de Chrome. Puedes encontrar un ejemplo de funcionamiento en GitHub.

Segundo plano

A partir de Chrome 116, los service workers de extensiones obtienen compatibilidad mejorada con WebSockets. Anteriormente, un trabajador de servicio podía volverse inactivo a pesar de que una conexión WebSocket estaba activa si no se producían otros eventos de extensión durante 30 segundos. Esto finalizaría el trabajador de servicio y cerraría la conexión de WebSocket. Para obtener más información sobre el ciclo de vida del service worker de extensiones, consulta la guía del service worker de extensiones.

A partir de Chrome 116, puedes mantener activa un service worker con una conexión de WebSocket activa si intercambias mensajes dentro de la ventana de actividad del service worker de 30 s. Estas se pueden iniciar desde tu servidor o desde tu extensión. En el siguiente ejemplo, enviaremos un mensaje normal desde la extensión de Chrome al servidor para asegurarnos de que el service worker siga activo.

Ejemplo: keepalive de WebSocket

Primero, debemos asegurarnos de que nuestra extensión solo se ejecute en versiones de Chrome que admitan WebSockets en los service workers. Para ello, configuramos la versión mínima de Chrome en 116 en el manifiesto:

manifest.json:

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

Luego, podemos mantener el trabajador de servicio activo enviando un mensaje de mantenimiento activo cada 20 s. El keepalive se inicia una vez que el service worker se conecta al WebSocket. En el siguiente ejemplo de cliente WebSocket, se registran mensajes y se llama a keepAlive() cuando se activa el evento onopen:

service-worker.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();
}

En keepAlive(), usamos setInterval(...) para enviar con regularidad un ping al servidor mientras haya una conexión de WebSocket activa:

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