Next.js अनुप्रयोगों में सेवा कर्मियों को कैसे एकीकृत करें

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

ये सुविधाएँ वेब ब्राउज़र पर देशी ऐप्स का सहज और उपयोगकर्ता-अनुकूल अनुभव लाती हैं।

प्रोग्रेसिव वेब ऐप्स (पीडब्ल्यूए) के निर्माण में सेवा कर्मी एक मूलभूत घटक हैं।

सेवा कर्मियों को समझना

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

सेवा कर्मी प्रॉक्सी सर्वर के रूप में कार्य करते हैं - वेब अनुप्रयोगों और नेटवर्क के बीच बैठे। वे अनुरोधों और प्रतिक्रियाओं को रोक सकते हैं, संसाधनों को कैश कर सकते हैं और ऑफ़लाइन सहायता प्रदान कर सकते हैं। इससे यह सुनिश्चित करने में मदद मिलती है कि वेब ऐप्स अधिक सहज और उपयोगकर्ता-अनुकूल महसूस करते हैं, भले ही उपयोगकर्ता ऑनलाइन न हो।

सेवा कर्मियों के लिए मुख्य अनुप्रयोग

सेवा कर्मियों के लिए कई आवेदन हैं। वे सम्मिलित करते हैं:

• पीडब्ल्यूए: सेवा कर्मी प्रगतिशील वेब ऐप्स को महान शक्ति प्रदान करते हैं। वे कस्टम नेटवर्क अनुरोध, पुश नोटिफिकेशन, ऑफ़लाइन समर्थन और तेज़ लोडिंग करते हैं।
• कैशिंग: सेवा कर्मी एप्लिकेशन की संपत्तियों-छवियों, जावास्क्रिप्ट कोड और सीएसएस फ़ाइलों को ब्राउज़र के कैश स्टोरेज में संग्रहीत कर सकते हैं। यह ब्राउज़र को उन्हें नेटवर्क पर दूरस्थ सर्वर से लाने के बजाय अपने कैश से पुनर्प्राप्त करने देता है। परिणामस्वरूप, सामग्री तेजी से लोड होती है, जो धीमे या अविश्वसनीय इंटरनेट कनेक्शन वाले उपयोगकर्ताओं के लिए विशेष रूप से उपयोगी है।
• पृष्ठभूमि समन्वयन: सेवा कर्मी डेटा को सिंक्रनाइज़ कर सकते हैं और अन्य पृष्ठभूमि कार्य चला सकते हैं, तब भी जब उपयोगकर्ता एप्लिकेशन के साथ सक्रिय रूप से इंटरैक्ट नहीं कर रहा हो या जब एप्लिकेशन ब्राउज़र में खुला न हो।

Next.js अनुप्रयोगों में सेवा कर्मियों को एकीकृत करना

कोड में गोता लगाने से पहले, यह समझने में मदद मिलती है कि सेवा कर्मचारी कैसे काम करते हैं। सेवा कर्मियों के उपयोग के दो प्रमुख चरण हैं: पंजीकरण और सक्रियण.

पहले चरण के दौरान, ब्राउज़र सेवा कर्मी को पंजीकृत करता है। यहाँ एक सरल उदाहरण है:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

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

सक्रियण चरण में, आपको सुनकर एक सेवा कर्मी को स्थापित और सक्रिय करना होगा स्थापित करना और सक्रिय घटनाओं का उपयोग करना जावास्क्रिप्ट इवेंट श्रोता. यहां बताया गया है कि आप इसे कैसे हासिल कर सकते हैं:

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

आप पंजीकरण प्रक्रिया के ठीक बाद इस कोड को शामिल कर सकते हैं। सेवा कर्मी पंजीकरण प्रक्रिया सफल होने के ठीक बाद इसे चलना चाहिए।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub भण्डार.

एक Next.js प्रोजेक्ट बनाएं

आरंभ करने के लिए, नेक्स्ट.जेएस प्रोजेक्ट को स्थानीय स्तर पर तैयार करने के लिए इस कमांड को चलाएँ:

npx create-next-app next-project

Next.js एप्लिकेशन में एक सेवा कर्मी को जोड़ने में निम्नलिखित चरण शामिल होते हैं:

1. वैश्विक दायरे के वातावरण में एक सेवा कर्मी को पंजीकृत करें।
2. सार्वजनिक निर्देशिका में एक सेवा कर्मी जावास्क्रिप्ट फ़ाइल बनाएँ।

एक सेवा कर्मी जोड़ना

सबसे पहले, एक सेवा कर्मी को पंजीकृत करें। अद्यतन करें src/pages/_app.js फ़ाइल इस प्रकार है. इस फ़ाइल में कोड शामिल करने से यह सुनिश्चित होता है कि एप्लिकेशन लोड होने पर सेवा कार्यकर्ता पंजीकृत हो जाता है और उसके पास एप्लिकेशन की सभी संपत्तियों तक पहुंच होती है।

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

उपयोगप्रभाव जब घटक माउंट होता है तो हुक ट्रिगर हो जाता है। पिछले उदाहरण की तरह, कोड पहले जाँचता है कि उपयोगकर्ता का ब्राउज़र सेवा कर्मियों का समर्थन करता है या नहीं।

यदि समर्थन मौजूद है, तो यह निर्दिष्ट फ़ाइल पथ पर स्थित सेवा कार्यकर्ता स्क्रिप्ट को पंजीकृत करता है, और इसके दायरे को "के रूप में निर्दिष्ट करता है"/”. इसका मतलब है कि सेवा कर्मी के पास एप्लिकेशन के सभी संसाधनों का नियंत्रण है। यदि आप चाहें तो आप अधिक विस्तृत दायरा प्रदान कर सकते हैं, उदाहरण के लिए, "/products”.

यदि पंजीकरण सफल होता है, तो यह अपने दायरे के साथ एक सफलता संदेश लॉग करता है। यदि पंजीकरण प्रक्रिया के दौरान कोई त्रुटि होती है, तो कोड उसे पकड़ लेगा और एक त्रुटि संदेश लॉग करेगा।

सर्विस वर्कर को स्थापित और सक्रिय करें

निम्नलिखित कोड को एक नई फ़ाइल में जोड़ें, public/service-worker.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

यह जांचने के लिए कि क्या सेवा कर्मी सफलतापूर्वक पंजीकृत, स्थापित और सक्रिय हो गया है, विकास सर्वर शुरू करें और ब्राउज़र में अपना एप्लिकेशन खोलें।

npm run dev

खुला Chrome के डेवलपर उपकरण विंडो (या आपके ब्राउज़र के समतुल्य), और नेविगेट करें आवेदन टैब. नीचे सेवा कर्मी अनुभाग में, आपको वह सेवा कर्मी देखना चाहिए जिसे आपने पंजीकृत किया है।

सेवा कर्मी के सफलतापूर्वक पंजीकृत, स्थापित और सक्रिय होने के साथ, आप कैशिंग, बैकग्राउंड सिंक, या जैसे कई कार्यों को कार्यान्वित कर सकते हैं पुश सूचनाएँ भेजना.

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

उपयोगकर्ता के डिवाइस पर एप्लिकेशन संपत्तियों को कैशिंग करने से त्वरित पहुंच की अनुमति देकर प्रदर्शन में सुधार हो सकता है, खासकर अविश्वसनीय इंटरनेट कनेक्शन वाली स्थितियों में।

ऐप की संपत्तियों को कैश करने के लिए, निम्नलिखित कोड शामिल करें service-worker.js फ़ाइल।

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

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

यदि कोई कैश्ड प्रतिक्रिया मौजूद नहीं है, तो सेवा कार्यकर्ता नेटवर्क पर सर्वर से संसाधन प्राप्त करता है। यह क्लाइंट को प्रतिक्रिया प्रदान करता है और भविष्य के अनुरोधों के लिए इसे कैश करता है।

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

अब, एक बार जब आप होमपेज पर जाते हैं, तो ब्राउज़र डेटा लाने के लिए नेटवर्क अनुरोध करने का प्रयास करने के बजाय कैश स्टोरेज में संग्रहीत संसाधनों की सेवा करेगा।

प्रदर्शन को बढ़ाने के लिए सेवा कर्मियों का उपयोग करना

नेक्स्ट.जेएस ऐप्स के प्रदर्शन को बढ़ाने के लिए सेवा कर्मी एक शक्तिशाली उपकरण हैं। वे संसाधनों को कैश कर सकते हैं, अनुरोधों को रोक सकते हैं और ऑफ़लाइन समर्थन प्रदान कर सकते हैं, ये सभी उपयोगकर्ता अनुभव को बेहतर बना सकते हैं।

हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि सेवा कर्मियों को लागू करना और प्रबंधित करना भी जटिल हो सकता है। सेवा कर्मियों का उपयोग करने से पहले उनके संभावित लाभों और कमियों पर सावधानीपूर्वक विचार करना महत्वपूर्ण है।