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

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

خلفية

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

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

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

أولاً، علينا التأكّد من أنّ الإضافة لا تعمل إلا في إصدارات Chrome التي تتيح استخدام بروتوكولات WebSocket في مشغّلي الخدمة من خلال ضبط الحد الأدنى لإصدار 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(...) لإرسال طلب ping بانتظام إلى الخادم أثناء وجود اتصال 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 
  );
}