Utilizzo di WebSocket nei service worker

Questo tutorial mostra come connettersi a un WebSocket nel service worker dell'estensione Chrome. Puoi trovare un esempio funzionante su GitHub.

Sfondo

A partire da Chrome 116, i service worker delle estensioni offrono un supporto migliore per i WebSockets. In precedenza, un service worker poteva diventare inattivo nonostante una connessione WebSocket fosse attiva se non si verificavano altri eventi di estensione per 30 secondi. In questo modo, il service worker verrà terminato e la connessione WebSocket verrà chiusa. Per ulteriori informazioni sul ciclo di vita del service worker dell'estensione, consulta la guida al service worker dell'estensione.

A partire da Chrome 116, puoi mantenere attivo un service worker con una connessione WebSocket scambiando messaggi entro la finestra di attività del service worker di 30 secondi. Questi possono essere avviati dal server o dall'estensione. Nell'esempio seguente, invieremo un messaggio normale dall'estensione di Chrome al server per assicurarci che il service worker rimanga attivo.

Esempio: WebSocket keepalive

Innanzitutto, dobbiamo assicurarci che la nostra estensione venga eseguita solo nelle versioni di Chrome che supportano i WebSocket nei service worker impostando la versione minima di Chrome su 116 nel manifest:

manifest.json:

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

In questo modo, possiamo mantenere attivo il service worker inviando un messaggio keepalive ogni 20 secondi. Il keepalive viene avviato una volta che il service worker si connette al WebSocket. Il seguente esempio di client WebSocket registra messaggi e chiamate keepAlive() quando viene attivato l'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();
}

All'interno di keepAlive() utilizziamo setInterval(...) per inviare regolarmente un ping al server mentre è attiva una connessione WebSocket:

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