تسجيل مشغّلي الخدمات

أفضل الممارسات لتحديد وقت تسجيل مشغّل الخدمات

Jeff Posnick

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

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

نموذج التسجيل الشائع

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

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

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

إذًا، هل هناك أي فروق طفيفة في navigator.serviceWorker.register؟ هل هناك أي وأفضل الممارسات التي يجب اتباعها؟ ليس بمستغرب (نظرا لأن هذه المقالة لا تنتهي هنا)، الإجابة على كليهما هي "نعم!"

الزيارة الأولى للمستخدم

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

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

تخيل الآن أنه خلال عملية تنزيل ملفات JavaScript أو الصور الصفحة تحتاج إلى عرض، يقرر المتصفح بدء سلسلة محادثات في الخلفية أو عملية (للإيجاز، سنفترض أنها سلسلة محادثات). لنفترض أن فأنت لست على جهاز سطح مكتب قوي، بل من نوع جهاز للهاتف المحمول والذي يعتبره الكثير من الأشخاص حول العالم جهازه الأساسي. دوران للأعلى تضيف هذه السلسلة الإضافية التعارض بشأن وقت وحدة المعالجة المركزية (CPU) والذاكرة التي يستخدمها متصفّحك قد يقضيه في عرض صفحة ويب تفاعلية.

من غير المرجّح أن تُحدث سلسلة المحادثات في الخلفية غير النشطة اختلافًا كبيرًا. ولكن ماذا: فإذا لم تكن سلسلة المحادثات هذه خاملة، لكنها قرر أنها ستبدأ أيضًا تنزيل الموارد من الشبكة؟ أي استفسار بشأن وحدة المعالجة المركزية (CPU) أو الذاكرة يجب أن يتراجع التنافس نتيجة لشعوره بالانزعاج بشأن النطاق الترددي المحدود. متاحة للعديد من الأجهزة المحمولة. النطاق الترددي له قيمة، لذلك لا تقلل من الموارد المهمة عن طريق تنزيل موارد ثانوية في نفس الوقت.

يعني ذلك أنّ تشغيل مؤشر ترابط مشغّل الخدمات الجديد لتنزيل وذاكرة التخزين المؤقت في الخلفية لتحقيق هدفك في توفير أقصر فترة زمنية لتجربة تفاعلية في المرة الأولى التي يزور فيها أحد المستخدمين موقعك.

تحسين النص النموذجي

الحل هو التحكم في بدء عامل الخدمة عن طريق اختيار وقت الاتصال navigator.serviceWorker.register() قاعدة أساسية بسيطة هي تأخير التسجيل حتى ما بعد load event يتم إطلاقها في window، كما يلي:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}

ولكن الوقت المناسب لبدء تسجيل مشغّل الخدمات قد يعتمد أيضًا على ما يفعله تطبيق الويب بعد تحميله مباشرةً. على سبيل المثال، يستضيف مؤتمر Google I/O تطبيق الويب 2016 يعرض صورة متحركة قصيرة قبل الانتقال إلى الشاشة الرئيسية. فريقنا وجدوا أن الركل إيقاف تسجيل مشغّل الخدمة أثناء الرسوم المتحركة إلى البيانات غير المحتملة على أجهزة الجوّال منخفضة المواصفات. وبدلاً من تقديم تجربة سيئة للمستخدمين، متأخر تسجيل مشغّل الخدمات إلى ما بعد عرض الرسوم المتحركة، عندما كان المتصفح من المحتمل أن يستغرق الأمر بضع ثوانٍ في وضع الخمول.

وبالمثل، إذا كان تطبيق الويب يستخدم إطار عمل يُجري إعدادًا إضافيًا بعد الذي حمَّلته الصفحة، فابحث عن حدث خاص بإطار العمل يُظهر لك إنجاز العمل.

الزيارات اللاحقة

لقد ركزنا على تجربة الزيارة الأولى حتى الآن، ولكن ما هو التأثير الذي هل تأخُّر تسجيل عمال الخدمة عند تكرار الزيارات إلى موقعك الإلكتروني؟ قد يفاجئ بعض الناس، ولكن لا يُفترض أن يكون هناك أي تأثير على الإطلاق.

عندما يتم تسجيل مشغّل الخدمات، فهو يمرّ على install دورة حياة activate . بعد تفعيل مشغّل الخدمات، يمكنه التعامل مع أحداث fetch لأي من الزيارات اللاحقة إلى تطبيق الويب. يبدأ تشغيل مشغّل الخدمة قبل يطلب أي صفحات ضمن نطاقها، وهو أمر منطقي عندما تعتقد عنها. إذا لم يكن عامل الخدمة الحالي قيد التشغيل قبل عند زيارة صفحة، لن تتمكن من تنفيذ أحداث fetch طلبات التنقل.

لذا فبمجرد أن يكون هناك عامل خدمة نشط، فلا يهم عندما تتصل navigator.serviceWorker.register()، أو في الواقع، ما إذا كنت تسميه على الإطلاق. ما لم يتم تغيير عنوان URL للنص البرمجي لمشغِّل الخدمة، تُعد navigator.serviceWorker.register() فعليًا no-op خلال الزيارات اللاحقة. عندما يكون يسمى غير ذي صلة.

أسباب التسجيل المبكر

هل هناك أي سيناريوهات يتم فيها تسجيل مشغّل الخدمات في أقرب وقت؟ ممكن المنطقي؟ وأهم ما يتبادر إلى الذهن هو عندما يستخدم عامل الخدمة clients.claim() للتحكم في الصفحة أثناء الزيارة الأولى، وفي عامل الخدمة ينفذ وقت التشغيل بسرعة كبيرة التخزين المؤقت داخل معالج fetch. في هذه الحالة، هناك الاستفادة من تنشيط عامل الخدمة بأسرع وقت ممكن، في محاولة تعبئة ذاكرات التخزين المؤقت لبيئة التشغيل بموارد قد تكون مفيدة لاحقًا. في حال حذف يندرج تطبيق الويب الخاص بك ضمن هذه الفئة، فإن الرجوع خطوة إلى الوراء تأكَّد من أنّ معالج install عامل الخدمة لا يطلب إجراء الموارد التي تواجه مشكلة في معدل نقل البيانات مع طلبات الصفحة الرئيسية.

اختبار الأشياء

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

فيما يلي مثال يوضح الفرق أن توقيت التسجيل يمكن التصنيع. يتم أخذ كلتا لقطتي الشاشة أثناء زيارة نموذج في وضع التصفّح المتخفي الذي يستخدم تقييد الشبكة لمحاكاة اتصال بطيء

تُظهر لقطة الشاشة أعلاه حركة بيانات الشبكة وقت تعديل العيّنة. لتسجيل عاملي الخدمات في أسرع وقت ممكن. يمكنك الاطّلاع على الطلبات المسبقة (الإدخالات التي تحتوي على الترس وبجانبها، ينشأ من معالِج install الخاص بعامل الخدمة). إلى طلبات الموارد الأخرى اللازمة لعرض الصفحة

في لقطة الشاشة أعلاه، تم تأخير تسجيل مشغّل الخدمات إلى ما بعد تحميل صفحة. يمكنك أن تلاحظ أن طلبات التخزين المؤقت لا تبدأ حتى تم جلب الموارد من الشبكة، مما يؤدي إلى إزالة أي نزاع حول النطاق الترددي. علاوة على ذلك، نظرًا لأن بعض العناصر التي نتناولها مسبقًا موجودة بالفعل ذاكرة التخزين المؤقت HTTP في المتصفّح: العناصر التي تتضمّن (from disk cache) في الحجم — يمكننا تعبئة ذاكرة التخزين المؤقت لعامل الخدمة بدون الحاجة إلى الانتقال إلى الشبكة مرة أخرى.

سيزداد تقديري لك إذا أجريت هذا النوع من الاختبارات من جهاز فعلي منخفض التقنية على شبكة جوّال حقيقية. يمكنك الاستفادة من تصحيح الأخطاء عن بُعد في Chrome الإمكانات بتوصيل هاتف Android بجهاز سطح المكتب عبر USB، والتأكد من الاختبارات التي تجريها تعكس في الواقع التجربة الواقعية للعديد من المستخدمين.

الخاتمة

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

طريقة مباشرة لضمان تأخير عامل الخدمة الأولية التسجيل إلى أن يتم تحميل الصفحة الأولى، وهو استخدام ما يلي:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}