क्या आपके साथ ऐसी स्थिति आई है जब वेबसाइट लोड होने में नीचे दिए गए GIF की तरह बहुत अधिक समय लगता है?

? क्या आपने सेवा कर्मियों के बारे में सुना है?

इस पोस्ट में, हम जानेंगे कि सेवा कर्मचारी क्या हैं?, वे कैसे काम करते हैं ⚙️, और मैंने अपने वेब एप्लिकेशन के प्रदर्शन को बेहतर बनाने के लिए उनका उपयोग कैसे किया।

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

एक सेवा कार्यकर्ता एक पृष्ठभूमि स्क्रिप्ट है जो वेब पेज से अलग से चलती है, और यह कर सकती है:

• कैश संपत्ति ?️
• इंटरसेप्ट नेटवर्क अनुरोध?
• ऑफ़लाइन कार्यक्षमता प्रदान करें?

सेवा कर्मियों की मुख्य विशेषताएं:

1. पृष्ठभूमि में चलता है: सेवा कर्मचारी पृष्ठ के जीवनचक्र से बंधे नहीं हैं, जिसका अर्थ है कि पृष्ठ बंद होने पर भी वे चलना जारी रख सकते हैं
2. ईवेंट-संचालित: सेवा कर्मचारी विशिष्ट घटनाओं को सुनते हैं, जैसे नेटवर्क अनुरोध (फ़ेच इवेंट)
3. कोई DOM पहुंच नहीं: अन्य वेब कर्मियों के विपरीत, सेवा कर्मियों के पास सीधे DOM तक पहुंच नहीं होती है। वे पृष्ठभूमि में काम करते हैं, संसाधनों और नेटवर्क ट्रैफ़िक का प्रबंधन करते हैं

यहां सर्विस वर्कर स्क्रिप्ट का एक सरल उदाहरण दिया गया है:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
  });
}

? इस स्निपेट में, पेज लोड होने पर सर्विस वर्कर (service-worker.js) पंजीकृत होता है। यदि पंजीकरण सफल होता है, तो यह सेवा कर्मी के दायरे को लॉग करता है; अन्यथा, यह एक त्रुटि लॉग करता है।

मेरी चुनौती: एक यूनिटी वेबजीएल गेम को एक वेब पेज में एकीकृत करना

मैं एक यूनिटी वेबजीएल गेम को एक .NET रेजर वेबसाइट में एकीकृत कर रहा था। गेम में जावास्क्रिप्ट फ़ाइलों के साथ बड़ी ".wasm" और ".data" फ़ाइलें शामिल थीं जो गेम को लोड करने के लिए महत्वपूर्ण थीं। हालाँकि, पहली बार पेज लोड होने में 20 सेकंड से अधिक का समय लगा! ? यह मुख्यतः ".wasm" और ".data" फ़ाइलों के आकार के कारण था।

समाधान: सेवा कर्मियों के साथ कैशिंग

मैंने एक "ServiceWorker.js" फ़ाइल बनाई, जो लोडिंग समय को कम करने के लिए सभी आवश्यक गेम संपत्तियों को कैश करती है। यहां बताया गया है कि फ़ाइल में क्या है:

const cacheName = "$Project_name";
const contentToCache = [
    "Build/Game.loader.js",
    "Build/Game.framework.js",
    "Build/Game.data",
    "Build/Game.wasm",
    "TemplateData/game_style.css"
];

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');

    e.waitUntil((async function () {
        try {
            const cache = await caches.open(cacheName);
            console.log('[Service Worker] Caching all: app shell and content');
            for (const resource of contentToCache) {
                try {
                    await cache.add(resource);
                } catch (error) {
                    console.error(`[Service Worker] Failed to cache: ${resource}`, error);
                }
            }
        } catch (error) {
            console.error('[Service Worker] Failed to open cache', error);
        }
    })());
});

self.addEventListener('fetch', function (e) {
     e.respondWith((async function () {
        try {
            const response = await caches.match(e.request);
            console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
            if (response) return response;

            const fetchResponse = await fetch(e.request);
            const cache = await caches.open(cacheName);
            console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
            await cache.put(e.request, fetchResponse.clone());
            return fetchResponse;
        } catch (error) {
            console.error(`[Service Worker] Error fetching resource: ${e.request.url}`, error);
            throw error;
        }
    })());
});

यह कोड क्या करता है?

यह सेवा कार्यकर्ता स्क्रिप्ट निम्नलिखित क्रियाएं करती है:

• इंस्टॉल चरण के दौरान ".wasm", ".data", और JS फ़ाइलों सहित गेम को चलाने के लिए आवश्यक आवश्यक फ़ाइलों को कैश करता है।
• यदि उपलब्ध हो तो कैश्ड संसाधनों की सेवा के लिए फ़ेच अनुरोधों को रोकता है। यदि संसाधन कैश में नहीं है, तो यह इसे नेटवर्क से प्राप्त करता है, इसे कैश करता है, और प्रतिक्रिया देता है।

परिणाम: महत्वपूर्ण प्रदर्शन में वृद्धि

इन संपत्तियों को कैशिंग करके, लोडिंग समय को 20 सेकंड से घटाकर 3 सेकंड से कम कर दिया गया। अगली बार जब उपयोगकर्ता पृष्ठ पर जाते हैं, तो संपत्तियां पहले से ही स्थानीय रूप से संग्रहीत होती हैं, जिससे अनुभव काफी तेज हो जाता है।

⚠️ सावधान रहें! कैशिंग समस्या

हालांकि यह दृष्टिकोण प्रदर्शन में सुधार के लिए अद्भुत काम करता है, इसने एक और समस्या पेश की: पुरानी कैश्ड फ़ाइलें। चूंकि हम सक्रिय रूप से यूनिटी गेम विकसित कर रहे हैं और नए संस्करण जारी कर रहे हैं, इसलिए हर बार नया संस्करण तैनात होने पर कैश्ड फ़ाइलों को साफ़ करने की आवश्यकता होती है।

इसे हल करने के लिए, मैंने एक पाइपलाइन स्क्रिप्ट बनाई जो स्वचालित रूप से पुराने सेवा कार्यकर्ता को अपंजीकृत कर देती है और जब भी हम कोई नया गेम बिल्ड प्रकाशित करते हैं तो कैश साफ़ कर देता है। यह सुनिश्चित करता है कि उपयोगकर्ता पुराने, कैश्ड संस्करणों में फंसे बिना हमेशा नवीनतम संपत्ति लोड करें।

निष्कर्ष

आपके वेब एप्लिकेशन में सेवा कर्मियों को लागू करने से प्रदर्शन में नाटकीय रूप से सुधार हो सकता है, खासकर जब मेरे यूनिटी वेबजीएल गेम जैसी बड़ी संपत्तियों से निपटना हो। हालाँकि, पुरानी फ़ाइलों को प्रस्तुत करने से बचने के लिए कैशिंग को सावधानीपूर्वक संभालना महत्वपूर्ण है।