Service Worker

Service Worker هو سكريبت خلفي يُسجَّل في المتصفح ويعمل بشكل مستقل عن صفحة الويب المفتوحة. يمكنه اعتراض طلبات الشبكة وتخزين البيانات دون اتصال — والأهم للتسويق — استقبال أحداث Push الواردة وعرض الإشعارات حتى لو كان تبويب المتصفح مغلقاً.

ما هو Service Worker؟

Service Worker هو سكريبت JavaScript يُسجَّل في المتصفح ويعمل كـ worker منفصل تماماً عن صفحة الويب. بينما تنتهي صفحة الويب العادية حين يُغلق تبويبها، يستمر service worker في العمل في الخلفية — حتى دون أي تبويب مفتوح. وهو الأساس التقني لـ Progressive Web Apps (PWAs) الحديثة والطريقة الوحيدة لاستقبال إشعارات Push في المتصفح.

قدّمت Google service workers عام 2014 وهي اليوم مدعومة في جميع المتصفحات الحديثة (Chrome وEdge وFirefox وSafari وSamsung Internet وOpera). تحلّ محل Application Cache API القديم والمهجور الآن.

دورة حياة Service Worker

1. التسجيل: تستدعي صفحة الويب navigator.serviceWorker.register('/sw.js'). يجلب المتصفح السكريبت ويُحلّله.
2. التثبيت: يُشغّل service worker حدث install. عادةً تُخزَّن الموارد مسبقاً هنا.
3. التفعيل: بعد التثبيت الناجح يُفعّل المتصفح service worker. الإصدارات القديمة تُوقف إن وُجدت.
4. الخمول / النشاط: يرتاح service worker في الخلفية ولا يُستيقظ إلا عند وصول حدث (push أو sync أو fetch).
5. الإنهاء: يمكن للمتصفحات إنهاء service workers غير النشطة في أي وقت لتوفير الذاكرة. عند الحدث التالي يُعاد تشغيل الـ worker.

Service Worker وإشعارات Push

لاستقبال إشعارات Browser Push، service worker إلزامي: إنه المستقبل الوحيد لحدث push. بمجرد وصول رسالة Push مشفرة من خدمة Push، يُستيقظ service worker ويستقبل الحدث:

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      badge: data.badge,
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

يظهر إشعار النظام حتى لو كان تبويب المتصفح مغلقاً. عند نقر المستخدم يفتح المتصفح عنوان URL الهدف.

الوظيفة دون اتصال والتخزين المؤقت

ميزة ثانية رئيسية لـ service worker: اعتراض طلبات الشبكة عبر حدث fetch. هذا يُتيح استخدام صفحات الويب دون اتصال (نمط PWA) عن طريق تخزين الموارد الثابتة وردود API. للمواقع الصغيرة والمتوسطة دون طموحات تطبيق، Push هو حالة الاستخدام الأساسية؛ ميزات PWA اختيارية.

اشتراط HTTPS والنطاق

يعمل service workers حصراً عبر HTTPS (استثناء: localhost للتطوير). لا يمكن لـ service worker اعتراض طلبات إلا ضمن نطاقه — افتراضياً مسار ملفه. service worker مسجَّل تحت /sw.js يغطي النطاق بأكمله؛ المسجَّل تحت /blog/sw.js يغطي /blog/* فقط.

الاستكشاف والإصلاح

يوفر Chrome DevTools نظرة عامة على جميع workers المسجَّلة تحت «Application → Service Workers» مع الحالة والمصدر واختبار Push وإلغاء التسجيل اليدوي. لدى Firefox تبويب مماثل تحت about:debugging. يمكن محاكاة أحداث Push من DevTools دون إرسال رسالة فعلية.

أفضل الممارسات للشركات الصغيرة والمتوسطة

• ملف service worker واحد لكل نطاق. عمال مختلفون لمسارات مختلفة يؤدي بسرعة إلى سلوك غير متسق.
• تجنب إصدار اسم الملف. يُعرَّف service workers بالمتصفح عبر عنوان URL؛ مع لواحق الإصدار تحتاج كل تحديث إعادة تسجيل. أفضل إصدار محتوى الملف بدلاً من ذلك (مثلاً ثابت const SW_VERSION = '1.4').
• نفّذ دائماً معالج النقر على الإشعار، وإلا فتح الإشعار لا يفتح شيئاً ويُحبط المستخدم.
• تجديد الاشتراكات: يمكن للمتصفحات إلغاء الاشتراكات دون تحذير. افحص في الزيارة التالية للموقع وأعِد التسجيل إن لزم.

Service Worker مع SendSeven

توفر SendSeven service worker مُهيَّأ مسبقاً لقناة Browser Push يغطي دورة Push الكاملة (اشتراك، استقبال، نقر، إلغاء اشتراك). التضمين يحتاج سطراً واحداً من الكود — لا حاجة لإعداد JavaScript مخصص. من يريد تخصيصاته الخاصة يحصل على مصدر service worker ويمكنه تفريعه. كل رسالة Push تُسلَّم مشفرة عبر Web Push API — بما يتوافق مع متطلبات حماية البيانات، استضافة في الاتحاد الأوروبي وعقد معالجة بيانات.