استخدام مآخذ الويب في مشغّلي الخدمات

يوضح هذا البرنامج التعليمي كيفية الاتصال بـ WebSocket في مشغّل الخدمات لإضافة Chrome. يمكنك العثور على مثال عملي على جيت هب.

الخلفية

بدءًا من إصدار Chrome 116، يحصل مقدِّمو خدمات الإضافات على دعم مُحسَّن لـ WebSockets. في السابق، كان مشغّل الخدمات غير نشط حتى لو كان اتصال WebSocket نشطًا إذا لم تحدث أي أحداث أخرى للإضافة لمدة 30 ثانية. سيؤدي ذلك إلى إنهاء مشغّل الخدمة وإغلاق اتصال WebSocket. للحصول على مزيد من المعلومات عن دورة حياة مشغّل خدمات الإضافات، يُرجى الاطّلاع على دليل مشغّل خدمات الإضافات).

بدءًا من الإصدار 116 من Chrome، يمكنك إبقاء مشغّل الخدمات الذي لديه اتصال WebSocket نشطًا من خلال تبادل الرسائل ضمن نافذة نشاط مشغّل الخدمات لمدة 30 ثانية. يمكن بدء هذه الأحداث إما من الخادم أو من الإضافة. وفي المثال التالي، سنرسل رسالة عادية من إضافة Chrome إلى الخادم لضمان بقاء مشغّل الخدمة قيد التشغيل.

مثال: رسالة التحقّق من WebSocket

نحتاج أولاً إلى التأكّد من أنّ الإضافة لا تعمل إلا في إصدارات Chrome التي تتوافق مع WebSockets لدى العاملين في الخدمة، وذلك من خلال ضبط الحد الأدنى لإصدار Chrome على 116 في ملف البيان:

manifest.json:

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

ثم يمكننا إبقاء مشغّل الخدمات نشطًا من خلال إرسال رسالة رسالة التحقّق من الاتصال كل 20 ثانية. يبدأ عمل رسالة التحقّق من الاتصال بمجرد اتصال عامل الخدمة بـ WebSocket. يسجِّل نموذج عميل WebSocket التالي الرسائل ويستدعي keepAlive() عند بدء حدث onopen:

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