M
MLOG
प्रोग्रेसिव वेब ऐप आर्किटेक्चर: जावास्क्रिप्ट सर्विस वर्कर पैटर्न | MLOG | MLOG

4. नेटवर्क-ओनली

नेटवर्क-ओनली रणनीति हमेशा नेटवर्क से संपत्तियां प्राप्त करती है, कैश को पूरी तरह से दरकिनार कर देती है। इस रणनीति का उपयोग तब किया जाता है जब आपको किसी संसाधन के नवीनतम संस्करण की बिल्कुल आवश्यकता होती है और कैशिंग वांछित नहीं है।

उदाहरण: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
  );
});

5. स्टेल-व्हाइल-रिवैलिडेट

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

उदाहरण: 

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

6. कैश, फिर नेटवर्क

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

सही कैशिंग रणनीति चुनना

इष्टतम कैशिंग रणनीति आपके एप्लिकेशन की विशिष्ट आवश्यकताओं पर निर्भर करती है। इन कारकों पर विचार करें:

उपयुक्त कैशिंग रणनीतियों का सावधानीपूर्वक चयन करके, आप अपने PWA के प्रदर्शन और उपयोगकर्ता अनुभव में काफी सुधार कर सकते हैं, यहां तक कि ऑफ़लाइन वातावरण में भी। वर्कबॉक्स ([https://developers.google.com/web/tools/workbox](https://developers.google.com/web/tools/workbox)) जैसे उपकरण इन रणनीतियों के कार्यान्वयन को सरल बना सकते हैं।

बैकग्राउंड सिंक्रोनाइज़ेशन: ऑफलाइन म्यूटेशन को संभालना

बैकग्राउंड सिंक्रोनाइज़ेशन आपके PWA को पृष्ठभूमि में कार्य करने की अनुमति देता है, भले ही उपयोगकर्ता ऑफ़लाइन हो। यह फ़ॉर्म सबमिशन, डेटा अपडेट और अन्य कार्यों को संभालने के लिए विशेष रूप से उपयोगी है जिनके लिए नेटवर्क कनेक्टिविटी की आवश्यकता होती है। `BackgroundSyncManager` API आपको उन कार्यों को पंजीकृत करने में सक्षम बनाता है जो नेटवर्क उपलब्ध होने पर निष्पादित होंगे।

बैकग्राउंड सिंक टास्क को पंजीकृत करना

बैकग्राउंड सिंक टास्क को पंजीकृत करने के लिए, आपको `BackgroundSyncManager` की `register` विधि का उपयोग करने की आवश्यकता है। यह विधि एक अद्वितीय टैग नाम को तर्क के रूप में लेती है। टैग नाम किए जाने वाले विशिष्ट कार्य की पहचान करता है।

उदाहरण:

            
self.addEventListener('sync', event => {
  if (event.tag === 'my-sync-task') {
    event.waitUntil(doSomeWork());
  }
});

सिंक इवेंट को संभालना

जब ब्राउज़र नेटवर्क कनेक्टिविटी का पता लगाता है, तो यह सर्विस वर्कर को एक `sync` इवेंट भेजता है। आप इस इवेंट को सुन सकते हैं और आवश्यक कार्य कर सकते हैं, जैसे सर्वर पर डेटा भेजना।

उदाहरण:

            
async function doSomeWork() {
  // Retrieve data from IndexedDB
  const data = await getDataFromIndexedDB();

  // Send data to the server
  try {
    const response = await fetch('/api/sync', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (response.ok) {
      // Clear the data from IndexedDB
      await clearDataFromIndexedDB();
    } else {
      // Handle errors
      console.error('Sync failed:', response.status);
      throw new Error('Sync failed');
    }
  } catch (error) {
    // Handle network errors
    console.error('Network error:', error);
    throw error;
  }
}

उदाहरण: ऑफलाइन फॉर्म सबमिशन

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

  1. उपयोगकर्ता ऑफ़लाइन रहते हुए फ़ॉर्म भरता है और सबमिट पर क्लिक करता है।
  2. फ़ॉर्म डेटा IndexedDB में संग्रहीत होता है।
  3. एक बैकग्राउंड सिंक टास्क एक अद्वितीय टैग (जैसे, `form-submission`) के साथ पंजीकृत किया जाता है।
  4. जब नेटवर्क उपलब्ध होता है, तो `sync` इवेंट ट्रिगर होता है।
  5. सर्विस वर्कर IndexedDB से फ़ॉर्म डेटा प्राप्त करता है और इसे सर्वर पर सबमिट करता है।
  6. यदि सबमिशन सफल होता है, तो फ़ॉर्म डेटा IndexedDB से हटा दिया जाता है।

पुश नोटिफिकेशन: समय पर अपडेट के साथ उपयोगकर्ताओं को जोड़ना

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

पुश नोटिफिकेशन के लिए सब्सक्राइब करना

पुश नोटिफिकेशन प्राप्त करने के लिए, उपयोगकर्ताओं को पहले आपके PWA को अनुमति देनी होगी। आप उपयोगकर्ताओं को पुश नोटिफिकेशन के लिए सब्सक्राइब करने के लिए `PushManager` API का उपयोग कर सकते हैं।

उदाहरण:

            
navigator.serviceWorker.ready.then(registration => {
  registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'YOUR_PUBLIC_VAPID_KEY'
  })
  .then(subscription => {
    // Send subscription details to your server
    sendSubscriptionToServer(subscription);
  })
  .catch(error => {
    console.error('Failed to subscribe:', error);
  });
});

महत्वपूर्ण: `YOUR_PUBLIC_VAPID_KEY` को अपनी वास्तविक VAPID (स्वैच्छिक एप्लिकेशन सर्वर पहचान) कुंजी से बदलें। VAPID कुंजियों का उपयोग आपके एप्लिकेशन सर्वर की पहचान करने और यह सुनिश्चित करने के लिए किया जाता है कि पुश नोटिफिकेशन सुरक्षित रूप से भेजे जाएं।

पुश नोटिफिकेशन को संभालना

जब एक पुश नोटिफिकेशन प्राप्त होता है, तो सर्विस वर्कर एक `push` इवेंट भेजता है। आप इस इवेंट को सुन सकते हैं और उपयोगकर्ता को नोटिफिकेशन दिखा सकते हैं।

उदाहरण:

            
self.addEventListener('push', event => {
  const payload = event.data ? event.data.text() : 'No payload';

  event.waitUntil(
    self.registration.showNotification('My PWA', {
      body: payload,
      icon: 'icon.png'
    })
  );
});

पुश नोटिफिकेशन को कस्टमाइज़ करना

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

उदाहरण:

            
self.addEventListener('push', event => {
  const data = event.data.json();
  const title = data.title || 'My PWA';
  const options = {
    body: data.body || 'No message',
    icon: data.icon || 'icon.png',
    badge: data.badge || 'badge.png',
    vibrate: [200, 100, 200],
    data: { // Custom data that you can access when the user clicks the notification
      url: data.url || '/'
    },
    actions: [
      {action: 'explore', title: 'Explore this new world',
        icon: 'images/checkmark.png'},
      {action: 'close', title: 'Close',
        icon: 'images/xmark.png'},
    ]
  };

  event.waitUntil(self.registration.showNotification(title, options));
});


self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Check if the user clicked on an action.
  if (event.action === 'explore') {
    clients.openWindow(event.notification.data.url);
  } else {
    // Default action: open the app.
    clients.openWindow('/');
  }
});

उदाहरण: न्यूज़ अलर्ट

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

उन्नत सर्विस वर्कर पैटर्न

1. ऑफलाइन एनालिटिक्स

उपयोगकर्ता के व्यवहार को तब भी ट्रैक करें जब वे ऑफ़लाइन हों, एनालिटिक्स डेटा को स्थानीय रूप से संग्रहीत करके और नेटवर्क उपलब्ध होने पर इसे सर्वर पर भेजकर। इसे IndexedDB और बैकग्राउंड सिंक का उपयोग करके प्राप्त किया जा सकता है।

2. वर्जनिंग और अपडेटिंग

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

3. मॉड्यूलर सर्विस वर्कर्स

रखरखाव और पठनीयता में सुधार के लिए अपने सर्विस वर्कर कोड को मॉड्यूल में व्यवस्थित करें। जावास्क्रिप्ट मॉड्यूल (ESM) या वेबपैक या रोलअप जैसे मॉड्यूल बंडलर का उपयोग करें।

4. डायनामिक कैशिंग

उपयोगकर्ता की बातचीत और उपयोग पैटर्न के आधार पर संपत्तियों को गतिशील रूप से कैश करें। यह कैश आकार को अनुकूलित करने और प्रदर्शन में सुधार करने में मदद कर सकता है।

सर्विस वर्कर डेवलपमेंट के लिए सर्वोत्तम प्रथाएँ

निष्कर्ष

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

इन पैटर्न को अपनी विशिष्ट एप्लिकेशन आवश्यकताओं के अनुकूल बनाना याद रखें और हमेशा उपयोगकर्ता अनुभव को प्राथमिकता दें। सर्विस वर्कर्स की शक्ति को अपनाकर, आप ऐसे PWA बना सकते हैं जो न केवल कार्यात्मक हैं, बल्कि उपयोगकर्ता के स्थान या नेटवर्क कनेक्शन की परवाह किए बिना उपयोग करने में भी आनंददायक हैं।

अतिरिक्त संसाधन: