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

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

الخلفية

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

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

مثال: WebSocket keepalive

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

manifest.json:

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

ثم يمكننا إبقاء عامل الخدمة نشطًا من خلال إرسال رسالة التحقق كل 20 ثانية. يتم بدء ميزة "إبقاء الاتصال مفتوحًا" بعد أن يتصل عامل الخدمة بخدمة 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 
  );
}