شرح Service Worker ؟ وما يمكن ان يضيفه من ميزات لموقعك

ما هو Service Worker ؟

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

ما الذي يمكننا فعله من خلال Service Worker ؟

1. السيطرة على مرور البيانات خلال الشبكة !
   يمكنك التحكم بجميع العناصر التي تمر على الشبكة (بين موقعك ومتصفح الزائر) وتنفيذ أي عملية تلاعب.
   هل يمكن تنفيذ تحكماً فعلياً بجميع العناصر التي تمر على الشبكة؟ نعم على سبيل المثال: عند طلب ملف CSS يمكنك تعديل رد السيرفر لتجعله يعرض نص معين بدل محتويات الملف الأصلي!
   وبالطبع يمكنك تنفيذ عمليات أخرى تمكنك من تحقيق أقصى استفادة من هذه الخاصية.
2. يمكنك أرشفة موقعك "Cache"
   يمكنك ارشفة اي ملف او طلب (Request) او رد (Response) ليتم استخدامها حتى في حال عدم وجود اتصال بالإنترنت.
3. يمكنك إرسال إشعارات
   يمكنك ادارة الإشعارات بين موقعك ومتصفح الزائر من خلال الـ Service Worker و إرسال اي رسالة الى متصفح الزائر.

ما الذي لا يمكننا فعله من خلال Service Worker ؟

1. لا يمكنك التعديل على واجهة المستخدم أو تحريك عناصر معينة منها أو إحداث أي تغيير فيها. بل يمكنك التخاطب مع الواجهة من خلال إرسال الرسائل واستقبالها.
2. لا يمكنك العمل من خلال المنفذ رقم 80
   بمعنى آخر، سوف لن يعمل لديك الـ Service Worker إذا لم يكن لديك شهادة توثيق SSL للموقع.

دورة حياة الـ Service Worker

يعتمد عمله على 3 خطوات أساسية:

1. التسجيل: هو عملية تجميع الملفات والتحقق من عملها.
2. التنصيب: هو عملية تثبيت الملفات والمهام المطلوبة في المتصفح.
3. التفعيل: هو عملية تمكين الخطوات السابقة من تنفيذ المهام المطلوبة.

كيفية تهيئة الـ Service Worker للعمل على موقعي ؟

كما عرفنا سابقاً (في مقدمة المقالة) إن هذه الميزة عبارة عن سكربت Script يعمل في خلفية الموقع من دون تدخل من الزائر لتنفيذ مهام معينة، دعنا ننشيء هذا السكربت من أجل التعامل معه.

نقوم بإنشاء ملف بإسم sw.js ونضعه في المجلد الرئيسي لموقعنا، ثم نقوم بفتح هذا الملف لكي نبدأ بكتابة بعض التعليمات التي تنفذ مهمة معينة.

في البداية سنقوم بتهيئة الملف  للعمل على تخزين جميع ملفات الموقع في متصفح الزائر لكي يسمح للموقع بالعمل حتى في حال عدم وجود اتصال بالإنترنت.

نقوم بكتابة السطر التالي:

const cacheName = 'v1'; 

وهو عبارة عن متغير في لغة الجافاسكربت من نوع const للتعريف بإصدار الأرشفة التي نريد عملها.

بعد ذلك نقوم بكتابة الكود التالي (مباشرة بعد السطر الذي كتبناه):

self.addEventListener('activate', function(e) {
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cache => {
                    if (cache != cacheName){
                        console.log('ServiceWorker: cleaning old caches...');
                        return caches.delete(cache);
                    }
                })
            )
        })
    )
});

والذي يمكننا من حذف أي عمليات ارشفة سابقة لا نحتاج اليها فور تسجيل وتنصيب وتفعيل الـ Service Worker الخاص بنا في متصفح الزائر.

بعد ذلك نقوم بكتابة الكود التالي بعد الأسطر التي كتبناها:

self.addEventListener('fetch', e => {
    if(!(e.request.url.indexOf('http') === 0)){
        return false;
     }
    e.respondWith(
        fetch(e.request).then(res => {
            const resClone = res.clone();
            caches
            .open(cacheName)
            .then(cache => {
                cache.put(e.request, resClone);
            });
            return res;
        }).catch(err => caches.match(e.request).then(res => res))
    )
})

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

الى هنا نكون قد اكملنا إعداد الملف، الان نقوم باستدعائه في جميع صفحات الموقع من أجل تنفيذه، من خلال وضع الكود التالي قبل إغلاق وسم الـ body الخاص بكل صفحة من صفحات موقعنا:

<script>
	if ('serviceWorker' in navigator) {
  		navigator.serviceWorker.register('/sw.js').then(function() {
    		console.log('Serviceworker: registration complete.');
  		}, function() {
    		console.log('Serviceworker registration failure.');
  		});
	} else {
  		console.log('Serviceworker is not supported.');
	}
</script>

حيث يقوم هذا الكود بالتحقق من توافق متصفح الزائر مع هذه الخاصية، وفي حال توافقه سيتم تشغيل الملف.

كيفية التحقق من وجود أخطاء في عمل خاصية الـ Service Worker ؟

من خلال متصفح Google Chrome نقوم بالدخول الى الصفحة التي قمنا بتنفيذ الميزة عليها ثم نقوم بالدخول الى أدوات المطورين من خلال الضغط على Ctrl+Shift+I ثم نقوم بالضغط على تبويب Application ثم نضغط على تبويب Service Worker من القائمة الجانبية كما هو موضح في الصورة أدناه ليتم عرض جميع التنبيهات والأخطاء في حال تواجدها، ويمكنك ايضاً إلغاء تسجيل أحد السكربتات او تحديثه في حال تغيير محتوياته.
 

الخلاصة

تمكنك تقنية الـ Service Worker من إدارة الإشعارات والأرشفة Caching والعديد من المهام المفيدة جداً لكل موقع الكتروني من خلال تطبيق بعض الخطوات البسيطة ولكنها تعود عليك بالفائدة القصوى التي لا يمكن الإستغناء عنها، وقد يساعد ايضاً إستخدام هذه التقنية من ارتفاع معدل السيو SEO الخاص بموقعك بالنسبة لمحركات البحث وتسريع موقعك ايضاً، لهذه الأسباب تعتبر هذه الميزة شيء لا يمكن الإستغناء عنه في كل موقع ويب موجود على الإنترنت بغض النظر على نوع الموقع.