שימוש ב-WebSockets ב-Service Workers

במדריך הזה מוסבר איך להתחבר ל-WebSocket ב-Service Worker של תוסף Chrome. דוגמה מעשית זמינה ב-GitHub.

רקע

החל מ-Chrome 116, יש תמיכה משופרת בWebSockets ב-service workers של תוספים. בעבר, עובד שירות יכול היה להפוך ללא פעיל למרות שחיבור WebSocket היה פעיל, אם לא התרחשו אירועים אחרים של תוספים במשך 30 שניות. הפעולה הזו תסיים את פעולת ה-service worker ותסגור את חיבור ה-WebSocket. כדי לקבל מידע נוסף על מחזור החיים של service worker של תוסף, אפשר לקרוא את המדריך בנושא service worker של תוספים.

מגרסה Chrome 116 ואילך, אפשר לשמור על פעילות של Service Worker עם חיבור WebSocket על ידי החלפת הודעות בחלון הפעילות של Service Worker למשך 30 שניות. הפעולות האלה יכולות להתבצע מהשרת או מהתוסף. בדוגמה הבאה, נשלח הודעה רגילה מתוסף ל-Chrome לשרת כדי לוודא שקובץ השירות (service worker) ממשיך לפעול.

דוגמה: WebSocket keepalive

קודם כל, צריך לוודא שהתוסף פועל רק בגרסאות Chrome שתומכות ב-WebSockets ב-service workers. לשם כך, מגדירים את גרסת Chrome המינימלית ל-116 במניפסט:

manifest.json:

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

אחר כך אפשר לשמור על פעילות של Service Worker על ידי שליחת הודעת keepalive כל 20 שניות. ה-keepalive מתחיל ברגע ש-service worker מתחבר ל-WebSocket. בדוגמה הבאה של לקוח WebSocket, הודעות נרשמות ביומן ומתבצעות קריאות ל-keepAlive() כשמופעל האירוע 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();
}

בתוך keepAlive() אנחנו משתמשים ב-setInterval(...) כדי לשלוח פינג לשרת באופן קבוע בזמן שיש חיבור 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 
  );
}