كيف يمكن للعاملين على الويب وعاملي الخدمات تحسين أداء موقعك الإلكتروني، والحالات التي يمكن فيها استخدام عامل ويب مقابل عامل خدمات.
توضّح هذه النظرة العامة كيف يمكن للعاملين على الويب وعاملي الخدمات تحسين أداء موقعك الإلكتروني، والحالات التي يمكن فيها استخدام عامل ويب مقابل عامل خدمات. يمكنك الاطّلاع على بقية هذه السلسلة للاطّلاع على أنماط محدَّدة في إطار التواصل بين النوافذ وموظفي الخدمات.
كيفية تحسين الموظفين لموقعك الإلكتروني
يستخدم المتصفح سلسلة تعليمات واحدة (سلسلة السلسلة الرئيسية) لتشغيل كل محتوى JavaScript في صفحة ويب، بالإضافة إلى تنفيذ مهام مثل عرض الصفحة وتنفيذ عملية جمع البيانات غير المرغوب فيها. قد يؤدي الإفراط في استخدام رمز JavaScript إلى حظر سلسلة التعليمات الرئيسية، ما يؤدي إلى تأخير المتصفّح في تنفيذ هذه المهام وتقديم تجربة سيئة للمستخدم.
في تطوير تطبيقات iOS/Android، هناك نمط شائع لضمان أنّ سلسلة التعليمات الرئيسية للتطبيق لا تزال حرة في الاستجابة لأحداث المستخدمين، وهو نقل العمليات إلى سلاسل محادثات إضافية. في الواقع، في أحدث إصدارات Android، قد يؤدي حظر سلسلة التعليمات الرئيسية لفترة طويلة جدًا إلى تعطُّل التطبيق.
تم تصميم JavaScript على الويب استنادًا إلى مفهوم سلسلة تعليمات واحدة، وتفتقر إلى الإمكانيات اللازمة لتنفيذ نموذج سلاسل التعليمات المتعددة مثل النموذج المتوفّر في التطبيقات، مثل الذاكرة المشتركة.
وعلى الرغم من هذه القيود، يمكن تحقيق نمط مشابه على الويب باستخدام العاملين لتشغيل النصوص البرمجية في سلاسل التعليمات في الخلفية، ما يسمح لهم بتنفيذ المهام بدون التدخل في سلسلة التعليمات الرئيسية. العاملون عبارة عن نطاق JavaScript كامل يتم تشغيله على سلسلة محادثات منفصلة، بدون أي ذاكرة مشتركة.
ستتعرف في هذه المشاركة على نوعين مختلفين من العاملين (عاملي الويب وعاملي الخدمات)، وأوجه التشابه والاختلاف بينهما، والأنماط الأكثر شيوعًا لاستخدامهم في مواقع الويب الإنتاجية.
![مخطّط بياني يعرض رابطين بين كائن Window وعامل على الويب ومشغّل خدمات](https://web.dev/static/articles/workers-overview/image/diagram-showing-links-be-3f8d21126eb87.png?authuser=6&hl=ar)
مشغّلو الويب ومشغّلو الخدمات
أوجه التشابه
عاملو الويب وعاملو الخدمات نوعان من العاملين في المواقع الإلكترونية. وهناك بعض الأشياء المشتركة:
- وتعمل كلتاهما في سلسلة محادثات ثانوية، ما يتيح تنفيذ رمز JavaScript بدون حظر سلسلة التعليمات الرئيسية وواجهة المستخدم.
- ولا يمكنهم الوصول إلى عنصرَي
Window
وDocument
، لذلك لا يمكنهم التفاعل مع DOM مباشرةً، ولديه إمكانية وصول محدودة إلى واجهات برمجة تطبيقات المتصفّح.
أوجه الاختلاف
قد يعتقد المرء أن معظم الأشياء التي يمكن تفويضها لعامل الويب يمكن إجراؤها في مشغّل الخدمات والعكس صحيح، ولكن هناك اختلافات مهمة بينها:
- على عكس مشغّلي الويب، يتيح لك مشغّلو الخدمات اعتراض طلبات الشبكة (من خلال حدث
fetch
) والاستماع إلى أحداث Push API في الخلفية (عبر حدثpush
). - يمكن أن تتسبب الصفحة في ظهور العديد من موظفي الويب، إلا أنّ عامل خدمات واحد يتحكّم في جميع علامات التبويب النشطة ضمن النطاق الذي تم تسجيلها فيه.
- يرتبط عمر عامل الخدمة على الويب ارتباطًا وثيقًا بعلامة التبويب التي ينتمي إليها، في حين أنّ دورة حياة عامل الخدمة مستقلة عنها. ولهذا السبب، سيؤدي إغلاق علامة التبويب التي يعمل بها عامل الويب إلى إنهائها، بينما يستمر مشغّل الخدمات في العمل في الخلفية حتى إذا لم يكن الموقع الإلكتروني يحتوي على أي علامات تبويب نشطة مفتوحة.
حالات الاستخدام
تشير الاختلافات بين كلا النوعين من العاملين في المواقف التي قد يرغب أحدهما في استخدام أحدهما أو الآخر:
تكون حالات الاستخدام لدى العاملين على الويب أكثر صلة بتفريغ العمل (مثل الحسابات المثقلة) بسلسلة تعليمات ثانوية، لتجنُّب حظر واجهة المستخدم.
![مخطّط بياني يعرض رابطًا من كائن Window إلى عامل ويب.](https://web.dev/static/articles/workers-overview/image/diagram-showing-link-th-27e9ed5676ba6.png?authuser=6&hl=ar)
- مثال: أراد الفريق الذي أنشأ لعبة الفيديو PROXX ترك سلسلة التعليمات الرئيسية مجانًا قدر الإمكان للاعتناء بإدخالات المستخدمين وصورهم المتحركة. ولتحقيق ذلك، تم استخدام عمال البرامج على الويب لتشغيل منطق اللعبة وصيانة الحالة على سلسلة محادثات منفصلة.
![لقطة شاشة للعبة الفيديو PROXX](https://web.dev/static/articles/workers-overview/image/a-screenshot-the-videoga-d7cb8cb8a682c.png?authuser=6&hl=ar)
بشكل عام، تكون مهام موظفي الخدمات أكثر ارتباطًا بالعمل كخادم وكيل للشبكة، والتعامل مع المهام التي تعمل في الخلفية، وأشياء مثل التخزين المؤقت بلا اتصال بالإنترنت.
![لقطة شاشة للعبة الفيديو PROXX](https://web.dev/static/articles/workers-overview/image/a-screenshot-the-videoga-e3257857d928d.png?authuser=6&hl=ar)
مثال: في تطبيق الويب التقدّمي للبودكاست، قد تريد السماح للمستخدمين بتنزيل حلقات كاملة للاستماع إليها بلا إنترنت. يمكن استخدام مشغّل الخدمات، لا سيّما Background Fetch API، لتحقيق هذه الغاية. بهذه الطريقة، إذا أغلق المستخدم علامة التبويب أثناء تنزيل الحلقة، لن تتم مقاطعة المهمة.
![لقطة شاشة لتطبيق ويب تقدّمي للبودكاست](https://web.dev/static/articles/workers-overview/image/a-screenshot-a-podcast-p-910200b097c52.png?authuser=6&hl=ar)
الأدوات والمكتبات
يمكن تنفيذ الاتصال بين النوافذ والعاملين باستخدام واجهات برمجة تطبيقات مختلفة ذات مستوى أقل. لحسن الحظ، هناك مكتبات تختص هذه العملية، وتعتني بحالات الاستخدام الأكثر شيوعًا. في هذا القسم، سنتناول درسَين منها للاعتناء بالنافذة للعاملين على الويب وعاملي الخدمات على التوالي: Comlink وWorkbox.
![لقطة شاشة للعبة الفيديو PROXX](https://web.dev/static/articles/workers-overview/image/a-screenshot-the-videoga-1d6073255f591.png?authuser=6&hl=ar)
رابط Comlink
Comlink هي مكتبة صغيرة (1.6 كيلوبايت) RPC لمعالجة العديد من التفاصيل الأساسية عند إنشاء مواقع إلكترونية تستخدم Web Workers. وتم استخدامه في مواقع إلكترونية مثل PROXX وSquoosh. يمكن العثور على ملخّص دوافعها وعيّنات التعليمات البرمجية لها هنا.
Workbox
Workbox هي مكتبة شهيرة لإنشاء مواقع إلكترونية تستخدم مشغّلي الخدمات. وهي تقدّم مجموعة من أفضل الممارسات حول أمور مثل التخزين المؤقت، وبلا اتصال بالإنترنت،
والمزامنة في الخلفية، وما إلى ذلك. وتوفّر وحدة workbox-window
طريقة ملائمة لتبادل الرسائل بين مشغّل الخدمة والصفحة.
الخطوات التالية
وتركز بقية هذه السلسلة على أنماط التواصل بين النوافذ وعاملي الخدمات:
- دليل التخزين المؤقت النهائي: دعوة عامل خدمات من الصفحة إلى تخزين الموارد في ذاكرة التخزين المؤقت مسبقًا (مثلاً في سيناريوهات الجلب المُسبَق).
- تحديثات البث: الاتصال بالصفحة من مشغّل الخدمات للإبلاغ عن تحديثات مهمة (على سبيل المثال، توفُّر إصدار جديد من الموقع الإلكتروني)
- التواصل المتبادل: تفويض مهمة لعامل الخدمات (على سبيل المثال، عملية تنزيل ثقيلة)، وإبقاء الصفحة على اطّلاع بمستوى التقدم.
للاطّلاع على أنماط التواصل بين النوافذ وموظفي الويب، اطّلِع على: استخدِم عمال الويب لتشغيل JavaScript خارج سلسلة التعليمات الرئيسية للمتصفّح.