تصور عمل عمال الخدمة

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

بعض الحقائق عن عمال الخدمة

• عمال الخدمة ليس لديهم وصول مباشر إلى DOM. للقيام بذلك ، يستخدمون آلية الاستجابة للطلبات من خلال واجهة postMessages.
• يتم إلغاء عمال الخدمة (بالقوة) بالقوة عندما لا يكون قيد الاستخدام. هذا يعني أنها مدفوعة بالحدث.
• يفترض عمال الخدمة استخدام الوعود (الوعود).
• نظرًا للإمكانيات الرائعة ، لا يمكن استخدام عمال الخدمة إلا عبر HTTPS. على خادم محلي ، يمكنك الاستغناء عن HTTPS.

كيف يعمل عمال الخدمة؟ نظرة سريعة

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

حالات الاستخدام الشائعة

التخزين المؤقت

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

دفع الويب

• دفع وتحديث المحتوى - تريد مشاركة (تسليم واستلام) المحتوى المتاح.
• الدفع والمحتوى - لا تريد العمل فقط مع النص ، ولكن أيضًا مع أنواع أخرى من المعلومات التي تثري رسائلك.
• دفع مشبع - تريد عرض الصور وعملية التمهيد وأشياء أخرى تحسن الرسالة التي تريد توصيلها.
• Push and client - تريد إظهار الإخطارات حسب حالة التطبيق.

حالات استخدام أكثر تعقيدًا

تحليلات API

موازن التحميل

نمارس المهارات

تسجيل عامل الخدمة

//   
if('serviceWorker' in navigator){
    console.log('- ')
    //     
    //      "load"
    window.addEventListener('load', () => {
        //  -
        navigator.serviceWorker
        .register('/service-worker.js')
        .then(registration => {
            //   
            console.log(`-  , scope: ${registration.scope}`) // scope -  ,     -
        })
    })
    .catch(error => {
        //  
        console.log(`    : ${error}`)
    })
}

ماذا بعد؟

//  
const CACHE_NAME = 'example.com-v1'
//    
const cacheAssets = ['index.html', 'about.html', 'js/main.js']
//    "install"
self.addEventListener('install', e => {
    console.log('- ')
    e.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(cache => {
                console.log('  -:  ')
                cache.addAll(cacheAssets)
            })
            .then(() => {
                self.skipWaiting()
            })
    )
})

1. نحدد اسم ذاكرة التخزين المؤقت (example.com-v1).
2. نختار الملفات للتخزين المؤقت. للقيام بذلك ، قم بإنشاء صفيف.
3. داخل معالج أحداث "التثبيت" ، نطلب من المتصفح الانتظار حتى اكتمال الوعد ، ثم فتح ذاكرة التخزين المؤقت ، والتي سيتم حفظها تحت اسم "example.com-v1".
4. أخيرًا ، أضف الملفات المحددة إلى ذاكرة التخزين المؤقت.

حذف ذاكرة التخزين المؤقت غير المستخدمة

//    "activate"
self.addEventListener('activate', e => {
    console.log('- ')
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cache => {
                    if(cache !== CACHE_NAME){
                        console.log('   ')
                        return caches.delete(cache)
                    }
                })
            )
        })
    )
})

تلقي الرد

//    "fetch"
self.addEventListener('fetch', e => {
    e.respondWith(
        fetch(e.request)
            .then(res => {
                const copyCache = res.clone()
                caches.open(CACHE_NAME).then(cache => {
                    cache.put(e.request, copyCache)
                })
                return res
            })
            .catch(error => caches.match(e.request).then(res => res))
    )
})