مقدمة

عندما سمعت لأول مرة عن هذه المصطلحات اعتقدت، حسنًا، إنهم يفعلون نفس الأشياء تقريبًا مع موضوعهم المنفصل. إذن لماذا نحتاج إلى هذين المصطلحين؟

ولكن لأقول لك الحقيقة، هناك اختلافات كبيرة بين هذين المصطلحين وكيفية تصرفهما.

سنحاول الشرح بالتفصيل.

الأرضية المشتركة بين هذين الاثنين هي

1. يتم تشغيلها في موضوع منفصل، دون حظر الموضوع الرئيسي الوحيد لجافا سكريبت.

عامل الويب

• هنا يستطيع الخيط العامل أداء المهام دون التدخل في الخيط الرئيسي.
• يتم استخدامها للمهام التي تتطلب قدرًا كبيرًا من وحدة المعالجة المركزية، مثل معالجة/معالجة الصور والحسابات الثقيلة ومعالجة البيانات.
• ليس لديها القدرة على الوصول إلى DOM، ولا يمكنها اعتراض طلبات الشبكة.
• ليس لها دورة حياة

عامل الخدمة

• إنه نوع من عمال الويب يتمتع بقدرات إضافية.
• يمكن تشغيله بشكل منفصل عن المتصفح / حتى عندما يكون المتصفح مغلقا.
• إنه مكون أساسي في PWA، لأنه تم استخدامه لتمكين ميزات مثل الدعم دون اتصال بالإنترنت ومزامنة الخلفية ودفع الإشعارات.
• يعمل كخادم وكيل يقع بين المتصفح والشبكة.

دورة حياة عامل الخدمة

1. تسجيل

• سنخبر المتصفح هنا بمكان وجود ملف جافا سكريبت الخاص بعامل الخدمة.

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2. تثبيت

• عندما يعتبر المتصفح أن عامل الخدمة جديد، يتم تشغيل حدث التثبيت.

الكود أدناه الذي نحتاج إلى كتابته في service-worker.js

self.addEventListener('install', (event) => {
// do your operations
})

3. التنشيط

• بعد التثبيت سوف ينتقل هنا

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4. عاطل

• عندما لا يقوم عامل الخدمة بأي شيء، فإنه يكون في حالة الخمول.

5. جلب/رسالة

• عند تقديم طلب/رسالة للشبكة، يستيقظ عامل الخدمة ويتولى السيطرة

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6. الإنهاء

• إذا لم يكن قيد الاستخدام، فسيقوم المتصفح بإنهاء عامل الخدمة لحفظ الذاكرة. ولكن عندما لا نعرف.

سوف يحافظ على العاملين في الخدمة لفترة طويلة جدًا.

مثال:-

في chrome افتح هذا الرابط هناك وسترى الكثير من عمال الخدمة معلقين، ويمكنك القيام بالكثير من الأشياء مثل فحص/بدء وإرسال رسالة.

chrome://serviceworker-internals/

كيف يمكننا إيقاظ العاملين في الخدمة حتى لو كان المتصفح مغلقًا.

ملحوظة:-
لهذا الغرض تحديدًا، يمكننا استخدام الدفع للاستيقاظ، ولكن لهذا الاستخدام يجب منح إذن الإعلام للمتصفح، وإلا فلا توجد طريقة.

هناك طرق أخرى ذات صلة عندما يكون المتصفح مفتوحًا

1. جلب الحدث

• يتم تشغيل هذا الحدث عند تقديم طلب جلب.

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2. رسالة

• يتم تشغيل هذا الحدث عند تلقي رسالة من برنامج نصي آخر. (يحدث الاتصال عامل الخدمة ملفات جافا سكريبت الأخرى)

   self.addEventListener('message', (event) => {
// Handle message Event
})

3. يدفع

• يتم إطلاق هذا الحدث عند تلقي رسالة دفع

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4. حدث المزامنة

• يتم إطلاق هذا الحدث عند تلقي حدث مزامنة في الخلفية.

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

مرجع

1. https://frontendmasters.com/courses/background-javascript