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

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




شرح Service Worker ؟ وما يمكن ان يضيفه من ميزات لموقعك
شرح-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


كيفية تهيئة الـ 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 ؟


الخلاصة

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


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

هل كانت هذه المقالة مفيدة ؟
نعم
كلا

التعليقات

يرجى مليء الحقول التالية بالبيانات الصحيحة من اجل إضافة تعليق الى الصفحة.

Q
Qutaba Ali
شكراً على مجهودكم ♥️
3
0
0

يرجى مليء الحقول التالية بالبيانات الصحيحة من اجل إضافة رد الى هذا التعليق.