सेवा श्रमिकों के काम का दृश्य

सेवा कार्यकर्ता क्या है?

सेवाकर्मियों के बारे में कुछ तथ्य

• सेवा कार्यकर्ताओं की DOM तक सीधी पहुँच नहीं है। ऐसा करने के लिए, वे पोस्टमैसेज इंटरफ़ेस के माध्यम से अनुरोधों का जवाब देने के लिए तंत्र का उपयोग करते हैं।
• उपयोग में न होने पर सेवाकर्मियों को जबरन रद्द (रोक) दिया जाता है। इसका मतलब है कि वे इवेंट संचालित हैं।
• सेवा कार्यकर्ता वादों (वादों) के उपयोग को मानते हैं।
• महान क्षमताओं के कारण, सेवा श्रमिकों का उपयोग केवल HTTPS के माध्यम से किया जा सकता है। एक स्थानीय सर्वर पर, आप HTTPS के बिना कर सकते हैं।

सेवा कर्मचारी कैसे काम करते हैं? त्वरित देखो

सेवा कार्यकर्ता जीवन चक्र

सामान्य उपयोग के मामले

कैशिंग

• केवल कैशिंग - आपके पास स्थिर सामग्री है जो कभी नहीं बदलती है।
• नेटवर्क या कैश - आप उपयोगकर्ताओं को त्वरित डाउनलोड स्थिति के साथ प्रासंगिक सामग्री दिखाना चाहते हैं।
• कैश और अपडेट - आप सामग्री को तुरंत प्रदर्शित करना चाहते हैं और सर्वर के साथ आवधिक सिंक्रनाइज़ेशन का बुरा नहीं मानते हैं।
• कैश, अपडेट और पुनः लोड करें - आप सामग्री को जितनी जल्दी हो सके दिखाना चाहते हैं, इसके व्यक्तिगत भागों को अपडेट कर रहे हैं और उन्हें कुछ "सहज" तरीके से प्रदर्शित कर रहे हैं।

वेब पुश

• सामग्री को पुश और अपडेट करें - आप उपलब्ध सामग्री को साझा करना (वितरित करना और प्राप्त करना) चाहते हैं।
• पुश और सामग्री - आप न केवल पाठ के साथ काम करना चाहते हैं, बल्कि अन्य प्रकार की जानकारी के साथ भी जो आपके संदेशों को समृद्ध करते हैं।
• संतृप्त धक्का - आप छवियों, बूट प्रक्रिया और अन्य चीजों को प्रदर्शित करना चाहते हैं जो उस संदेश को बेहतर बनाते हैं जिसे आप वितरित करना चाहते हैं।
• पुश और क्लाइंट - आप एप्लिकेशन की स्थिति के आधार पर सूचनाएं दिखाना चाहते हैं।

अधिक जटिल उपयोग के मामले

एनालिटिक्स एपीआई

भार संतुलन

हम कौशल का अभ्यास करते हैं

सेवा कार्यकर्ता पंजीकरण

//   
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))
    )
})