عامل خدمة PWA للدمى

حقيقة الأمر هي أن عامل الخدمة لديه دور مهم يلعبه في السنوات القادمة ، وكلما أسرع في التعرف على هذه التكنولوجيا الجديدة ، كان من الأفضل أن تتكيف مع هذا المستقبل الجديد للويب.

لهذا السبب ، من أجل مساعدتك على التعرف على هذه التكنولوجيا الجديدة بشكل أفضل ، سنجري معًا مناقشة حول العاملين في الخدمة - ما هي ، وما الذي تجلبه إلى الويب ، وكيف يمكننا إعداد أنفسنا بشكل أفضل لهذه التكنولوجيا الجديدة الويب.

ما هو عامل الخدمة؟

تعريفات

يعتبر عامل الخدمة ، الذي يُنظر إليه عالميًا على أنه التقنية التي تصنع أو تكسر PWAs ، واجهة برمجة تطبيقات تعمل بشكل مستقل عن المتصفح ومسؤولة عن اعتراض الشبكة - ولهذا السبب ، يمكنه القيام بالعديد من الأشياء التي كانت مستحيلة في السابق على الويب. يمكن لمواقع الويب (عادةً PWAs) التي يتحكم بها عمال الخدمة أن يكون لها تكامل أعمق مع الجهاز المستخدم ، وبالتالي ، توفير المزيد من إمكانيات الأجهزة والميزات الشبيهة بالتطبيقات على الويب (على سبيل المثال ، دفع الإخطارات ، ومزامنة الخلفية ، والمزيد).

كيف تعمل

شيء صغير. عامل الخدمة هو أساسًا طبقة قائمة على الحدث بين المتصفح والخادم الذي يعترض طلبات الشبكة الصادرة ويعدلها ويعالجها:

وبما أن عامل الخدمة هو العامل القائم على الحدث ، فإنه لا يستجيب ويتواصل إلا من خلال الأحداث ، ويستخدم الوعود لمعرفة متى تكتمل العملية. ومع ذلك ، فإن جميع عمليات استلام الأحداث (مثل fetch push ) ممكنة فقط عندما يكون عامل الخدمة نشطًا ، مما يشير إلى متى يتعرف المتصفح على عامل الخدمة ويسجله (وأيضًا عندما ينتهي عامل الخدمة نفسه من التثبيت بنجاح) . بطريقة مبسطة ، هذه هي دورة الحياة النموذجية لعامل الخدمة:

لاحظ أيضًا كل هذه الأحداث المتاحة في عامل الخدمة:

يجب أن تكون جميع الأحداث الوظيفية ( fetch sync push ) تشرح نفسها بنفسها ، حيث إنها الأحداث التي تشكل تقريبًا جميع خصائص الميزات التقدمية لـ PWA (أي القدرات غير المتصلة بالإنترنت ، ومزامنة الخلفية ، وإشعارات الدفع).

 يوصى بقراءة: ما هي PWA؟ كل ما تحتاج لمعرفته حول تطبيقات الويب التقدمية

قيود على عمال الخدمة

نظرًا لأن هذا البرنامج النصي يعمل بشكل مستقل عن المتصفح ، فهناك بعض القيود عليه:

• بروتوكول HTTPS : يجب تشغيل عمال الخدمة على مواقع الويب القائمة على HTTPS

• لا يمكن الوصول إلى localStorage و DOM والنافذة.
• scope محدود : يمكن للعاملين في الخدمة العمل فقط في scope الدليل الحالي (والأدلة الفرعية) التي يقع فيها service-worker.js .
• غير متزامن : عمال الخدمة غير متزامنين بطبيعتهم ، وبالتالي يعتمدون على واجهات برمجة التطبيقات المستندة إلى الوعد.

ماذا يعني عمال الخدمة لـ PWA

كما ذكرنا سابقًا ، فإن عامل الخدمة هو العمود الفقري لـ PWA ، والتي بدونها لا يمكن تحقيق العديد من الميزات الثورية لـ PWA. بشكل أساسي ، ما يفعله عامل الخدمة هو أنه يوفر الوسائل لـ:

أداء أفضل

يعد الأداء في الزيارات المتكررة أفضل بشكل ملحوظ في PWA ، حيث يقوم عمال الخدمة بعمل هائل للمساعدة في عملية التخزين المؤقت. مقارنةً بذاكرة التخزين المؤقت للويب النموذجية (ذاكرة التخزين المؤقت HTTP) المستخدمة في غالبية مواقع الويب ، تتفوق PWA في تقديم المحتوى حتى في ظروف الشبكة غير المواتية:

كل هذا بفضل حقيقة أن العاملين في الخدمة يمنحون المطورين الحرية الكاملة في تحديد كيفية عمل التخزين المؤقت بالضبط. لمعرفة مدى تحسن أداء التخزين المؤقت للعاملين في الخدمة ، نوصي بدراسة Google الأخيرة: قياس تأثير الأداء في العالم الحقيقي لعمال الخدمة. الدراسة لديها منهجية واضحة ، تتمحور حول الوقت للرسم أولاً كمقياس لتحديد أداء عامل الخدمة.

في المتوسط ​​، يتم تحميل الصفحات بشكل أسرع قليلاً عندما كان عامل الخدمة يتحكم في الصفحة أكثر مما كان يتم تحميله بدون عامل خدمة ، للزوار الجدد والعائدين.

فيليب والتون ، قياس تأثير الأداء في العالم الحقيقي لعمال الخدمة

الوصول دون اتصال

عند التسجيل ، يقوم عمال الخدمة بتخزين المحتوى الضروري لموقع PWA الخاص بك مؤقتًا وخدمته بعد ذلك. هذا يجعل مواقع الويب التي تعمل بنظام PWA بشكل فعال غير قادرة على الاتصال بالإنترنت ، حيث لا يزال بإمكان المستخدمين التفاعل مع الموقع ومشاهدة كل المحتوى المخزن مؤقتًا.

هذا لا يعني أن الوصول في وضع عدم الاتصال هو ميزة لم تتم رؤيتها من قبل على الويب - فقد كان من الممكن منح المستخدمين تجربة غير متصلة بالإنترنت على الويب ، ولكن الأمر لم يكن مثالياً (انظر ذاكرة التخزين المؤقت للتطبيق هي Douchebag) والخدمة تم اختراع العمال لمعالجة (أو أكثر من ذلك ، تجنب) عيوب AppCache.

 يوصى بالقراءة: كيفية جعل PWA الخاص بك يعمل دون اتصال

ميزات التطبيق الأصلي

إلى جانب توفير الوصول في وضع عدم الاتصال والأداء المحسن ، يعمل عمال الخدمة أيضًا كقاعدة لمزيد من الميزات الشبيهة بالتطبيقات مثل إشعارات الدفع ومزامنة الخلفية (وفي المستقبل القريب ، تحديد الموقع الجغرافي والمزامنة الدورية). يتم تجميع ميزة إشعارات الدفع في PWA ، على سبيل المثال ، باستخدام اثنين من واجهات برمجة التطبيقات: واجهة برمجة تطبيقات الإشعارات وواجهة برمجة تطبيقات الدفع ، وكلاهما مبني على واجهة API الخاصة بعامل الخدمة.

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

يتكون عمر الخدمة من ثلاثة أجزاء: التسجيل والتثبيت والتفعيل ، وكلها سنتطرق إلى التفاصيل أدناه:

تسجيل

الخطوة الأولى التي يتعين علينا القيام بها هي تسجيل عامل الخدمة. بدون هذه الخطوة ، لن يعرف المتصفح مكان وجود عامل الخدمة الخاص بك ، وبالتالي ، مما يجعل من المستحيل تثبيت عامل الخدمة في الخلفية.
يمكننا تسجيل عامل الخدمة باستخدام الكود التالي:

 إذا ('serviceWorker' في الملاح) {
    navigator.serviceWorker.register ('./ pwa -amples / simicart / sw.js'، {النطاق: './sw-scope/'})
ثم ((reg) => {
   // عمل التسجيل
       console.log ('نجح التسجيل. النطاق هو' + reg.scope) ؛
} ؛

سيبدأ الكود أعلاه أولاً في البحث عن Service Worker API في المتصفح ، وإذا كان المتصفح يدعم واجهة برمجة التطبيقات المذكورة ، فإنه يسجل عامل خدمة جديدًا باستخدام طريقة serviceworkerContainer.register () ، ويعطي scope لعامل الخدمة. على سبيل المثال ، في الكود أعلاه ، scope هو /pwa-examples/simicart/ مما يعني أن عامل الخدمة لدينا سيعمل فقط للصفحات التي تبدأ بـ /pwa-examples/simicart/ . نحن نطلق على هذه الصفحات اسم " الصفحات الخاضعة للرقابة ".

تثبيت

الآن بعد أن عرف المتصفح مكان وجود عامل الخدمة لدينا - وما هو نطاقه - سيحاول تثبيت عامل الخدمة. يمكنك اختيار عدم القيام بأي شيء خلال هذه المرحلة ولكننا ما زلنا نرغب في ملاحظة أن هذه هي المرحلة التي تحدث فيها معظم عملية التخزين المؤقت. على سبيل المثال ، هذه هي الطريقة التي تتم بها عملية التخزين المؤقت للأصل:

 const cacheName = 'site-cache-v1'
أصول constToCache = [
    "/ pwa -amples /" ،
    "/pwa-examples/index.html" ،
    "/pwa-examples/css/styles.css" ،
    "/pwa-examples/js/app.js" ،
]

self.addEventListener ('install'، (event) => {
    event.waitUntil (  
        caches.open (cacheName). ثم ((cache) => {
              إرجاع cache.addAll (AssetsToCache) ؛
        })
      ) ؛
}) ؛

كما ترى في المثال أعلاه ، نستخدم واجهة برمجة تطبيقات ذاكرة التخزين المؤقت للتخزين المؤقت لأصولنا التي سنستخدمها لاحقًا لجعل PWA الخاص بنا غير قادر على الاتصال بالإنترنت. تحدث عملية التخزين المؤقت هذه أثناء حدث التثبيت.

التنشيط

بعد مرحلة التثبيت ، يمكننا الآن تفعيل عامل الخدمة. ومع ذلك ، لا تحدث مرحلة التنشيط هذه تلقائيًا بشكل طبيعي ، ولكي يتم تنشيط عامل الخدمة ، يجب التأكد من عدم وجود عامل خدمة يتحكم حاليًا في الصفحات.

بدلاً من ذلك ، يمكنك أيضًا أتمتة عملية التنشيط لعامل الخدمة لديك باستخدام طريقة skipWaiting() .

 const cacheName = 'site-cache-v1'
أصول constToCache = [
    "/ pwa -amples /" ،
    "/pwa-examples/index.html" ،
    "/pwa-examples/css/styles.css" ،
    "//pwa-examples/js/app.js" ،
]
self.addEventListener ('install'، (event) => {
    self.skipWaiting () ، // تخطي الانتظار
    event.waitUntil (  
        caches.open (cacheName). ثم ((cache) => {
              إرجاع cache.addAll (AssetsToCache) ؛
        })
      ) ؛
}) ؛

يحتاج الويب إلى عامل خدمة

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

بالنسبة لتجار Magento الذين يتطلعون إلى تغيير واجهة المتجر ، فإننا نقدم حل PWA كامل التكلفة وفعال من حيث التكلفة لأعمالك.