In dieser Anleitung erfahren Sie, wie Sie eine Verbindung zu einem WebSocket im Service Worker Ihrer Chrome-Erweiterung herstellen. Ein funktionsfähiges Beispiel auf GitHub
Hintergrund
Ab Chrome 116 wird die Unterstützung für WebSockets für Erweiterungs-Service-Worker verbessert. Zuvor konnte ein Service Worker trotz aktiver WebSocket-Verbindung inaktiv werden, wenn 30 Sekunden lang keine anderen Erweiterungsereignisse aufgetreten sind. Dadurch wird der Service Worker beendet und die WebSocket-Verbindung geschlossen. Weitere Informationen zum Lebenszyklus des Erweiterungsdienst-Workers finden Sie im Leitfaden für Erweiterungs-Service-Worker.
Ab Chrome 116 können Sie einen Service Worker mit einer WebSocket-Verbindung aktiv halten, indem Sie innerhalb des 30-Sekunden-Aktivitätszeitraums des Service Workers Nachrichten austauschen. Sie können entweder von Ihrem Server oder von Ihrer Erweiterung initiiert werden. Im folgenden Beispiel senden wir eine reguläre Nachricht von der Chrome-Erweiterung an den Server, damit der Dienst-Worker aktiv bleibt.
Beispiel: WebSocket-Keepalive
Zunächst müssen wir sicherstellen, dass die Erweiterung nur in Chrome-Versionen ausgeführt wird, die WebSockets in Service Workern unterstützen. Dazu setzen wir die Chrome-Mindestversion im Manifest auf 116:
manifest.json:
{ ... "minimum_chrome_version": "116", ... } Dann können wir den Dienst-Worker aktiv halten, indem wir alle 20 Sekunden eine keepalive-Nachricht senden. Der keepalive wird gestartet, sobald der Dienst-Worker eine Verbindung zum WebSocket herstellt. Der folgende Beispiel-WebSocket-Client protokolliert Nachrichten und ruft keepAlive() auf, wenn das Ereignis onopen ausgelöst wird:
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(); } In keepAlive() verwenden wir setInterval(...), um regelmäßig einen Ping an den Server zu senden, solange eine aktive WebSocket-Verbindung besteht:
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 ); }