Workbox की मदद से खोज के बेहतर अनुभव देना

Demián Renzulli

Jeff Posnick

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में यह Glitch खोलें.

इस कोडलैब में, Workbox की मदद से, खोज के बेहतर अनुभव को लागू करने का तरीका बताया गया है. इसकी मदद से काम करने वाले डेमो ऐप्लिकेशन में एक खोज बॉक्स होता है, जो सर्वर एंडपॉइंट को कॉल करता है और उपयोगकर्ता को एक बुनियादी एचटीएमएल पेज पर रीडायरेक्ट करता है.

ध्यान दें: यह कोडलैब, Chrome DevTools का इस्तेमाल करता है. अगर आपके सिस्टम में Chrome मौजूद नहीं है, तो उसे डाउनलोड कर लें.

मापें

ऑप्टिमाइज़ेशन जोड़ने से पहले, ऐप्लिकेशन की मौजूदा स्थिति का विश्लेषण करना हमेशा अच्छा होता है.

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

अभी-अभी खुले नए टैब में, देखें कि ऑफ़लाइन होने पर वेबसाइट कैसा व्यवहार करती है:

1. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. Chrome DevTools खोलें और नेटवर्क पैनल चुनें.
4. ट्रैफ़िक को कम करने की ड्रॉप-डाउन सूची में, ऑफ़लाइन चुनें.
5. डेमो ऐप्लिकेशन में, खोज क्वेरी डालें. इसके बाद, खोजें बटन पर क्लिक करें.

ब्राउज़र की गड़बड़ी का स्टैंडर्ड पेज दिखता है:

फ़ॉलबैक रिस्पॉन्स देना

सर्विस वर्कर में, पहले से कैश मेमोरी में सेव करने की सूची में ऑफ़लाइन पेज जोड़ने का कोड होता है. इसलिए, इसे सर्विस वर्कर install इवेंट में हमेशा कैश मेमोरी में सेव किया जा सकता है.

आम तौर पर, आपको बिल्ड के समय इस फ़ाइल को प्रीकैश सूची में जोड़ने के लिए, Workbox को निर्देश देना होगा. इसके लिए, लाइब्रेरी को अपने पसंदीदा बिल्ड टूल (जैसे, webpack या gulp) के साथ इंटिग्रेट करें.

हमने आपके लिए यह काम पहले ही कर दिया है, ताकि आपको परेशानी न हो. public/sw.js में यह कोड ऐसा करता है:

const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);

ध्यान दें: बिल्ड टूल के साथ Workbox को इंटिग्रेट करने के तरीके के बारे में ज़्यादा जानने के लिए, webpack Workbox प्लग इन और Gulp Workbox प्लग इन देखें.

इसके बाद, ऑफ़लाइन पेज को फ़ॉलबैक रिस्पॉन्स के तौर पर इस्तेमाल करने के लिए कोड जोड़ें:

1. सोर्स देखने के लिए, सोर्स देखें दबाएं.
2. public/sw.js के नीचे यह कोड जोड़ें:

workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());

workbox.routing.setCatchHandler(({event}) => {
  switch (event.request.destination) {
    case 'document':
      return caches.match(FALLBACK_HTML_URL);
      break;
    default:
      return Response.error();
  }
});

ध्यान दें: Glitch के यूज़र इंटरफ़ेस (यूआई) में workbox is not defined दिखता है, क्योंकि उसे पता नहीं चलता कि लाइन 1 पर मौजूद importScripts() कॉल, लाइब्रेरी इंपोर्ट कर रहा है.

यह कोड ये काम करता है:

• डिफ़ॉल्ट सिर्फ़ नेटवर्क की रणनीति तय करता है, जो सभी अनुरोधों पर लागू होगी.
• पूरे नहीं हो पाए अनुरोधों को मैनेज करने के लिए, workbox.routing.setCatchHandler() को कॉल करके ग्लोबल गड़बड़ी हैंडलर का एलान करता है. दस्तावेज़ों के लिए अनुरोध किए जाने पर, फ़ॉलबैक ऑफ़लाइन एचटीएमएल पेज दिखाया जाएगा.

इस सुविधा को टेस्ट करने के लिए:

1. उस टैब पर वापस जाएं जिस पर आपका ऐप्लिकेशन चल रहा है.
2. थ्रॉटलिंग ड्रॉप-डाउन सूची को फिर से ऑनलाइन पर सेट करें.
3. खोज पेज पर वापस जाने के लिए, Chrome के वापस जाएं बटन को दबाएं.
4. पक्का करें कि DevTools में कैश मेमोरी में सेव करने की सुविधा बंद करें चेकबॉक्स बंद हो.
5. Chrome के फिर से लोड करें बटन को दबाकर रखें और कैश मेमोरी खाली करें और फिर से लोड करें को चुनें. इससे यह पक्का किया जा सकता है कि आपका सेवा वर्कर अपडेट हो गया है.
6. ट्रैफ़िक कम करना ड्रॉप-डाउन सूची को फिर से ऑफ़लाइन पर सेट करें.
7. खोज क्वेरी डालें और खोजें बटन पर फिर से क्लिक करें.

फ़ॉलबैक एचटीएमएल पेज तब दिखता है, जब:

सूचना पाने की अनुमति का अनुरोध करना

आसानी के लिए, views/index_offline.html पर मौजूद ऑफ़लाइन पेज में, सबसे नीचे स्क्रिप्ट ब्लॉक में सूचनाएं भेजने की अनुमतियों का अनुरोध करने वाला कोड पहले से मौजूद है:

function requestNotificationPermission(event) {
  event.preventDefault();

  Notification.requestPermission().then(function (result) {
    showOfflineText(result);
  });
}

यह कोड ये काम करता है:

• जब उपयोगकर्ता सूचनाओं की सदस्यता लें पर क्लिक करता है, तो requestNotificationPermission() फ़ंक्शन को कॉल किया जाता है. यह फ़ंक्शन, ब्राउज़र की अनुमति का डिफ़ॉल्ट प्रॉम्प्ट दिखाने के लिए Notification.requestPermission() को कॉल करता है. प्रॉमिस, उपयोगकर्ता की चुनी गई अनुमति के साथ रिज़ॉल्व होता है. यह granted, denied या default हो सकती है.
• उपयोगकर्ता को सही टेक्स्ट दिखाने के लिए, हल की गई अनुमति को showOfflineText() को पास करता है.

ऑफ़लाइन क्वेरी सेव करना और ऑनलाइन होने पर फिर से कोशिश करना

इसके बाद, ऑफ़लाइन क्वेरी को सेव करने के लिए, Workbox बैकग्राउंड सिंक लागू करें, ताकि ब्राउज़र को कनेक्शन वापस आने का पता चलने पर, उन क्वेरी को फिर से चलाया जा सके.

1. बदलाव करने के लिए, public/sw.js खोलें.
2. फ़ाइल के आखिर में यह कोड जोड़ें:

const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
  maxRetentionTime: 60,
  onSync: async ({queue}) => {
    let entry;
    while ((entry = await queue.shiftRequest())) {
      try {
        const response = await fetch(entry.request);
        const cache = await caches.open('offline-search-responses');
        const offlineUrl = `${entry.request.url}&notification=true`;
        cache.put(offlineUrl, response);
        showNotification(offlineUrl);
      } catch (error) {
        await this.unshiftRequest(entry);
        throw error;
      }
    }
  },
});

यह कोड ये काम करता है:

• workbox.backgroundSync.Plugin में, पूरे न हो पाने वाले अनुरोधों को सूची में जोड़ने का लॉजिक होता है, ताकि बाद में उन्हें फिर से आज़माया जा सके. ये अनुरोध IndexedDB में सेव रहेंगे.
• maxRetentionTime से पता चलता है कि अनुरोध को कितनी बार दोहराया जा सकता है. इस मामले में, हमने 60 मिनट का विकल्प चुना है. इसके बाद, यह डेटा मिटा दिया जाएगा.
• onSync इस कोड का सबसे अहम हिस्सा है. कनेक्शन वापस आने पर, इस कॉलबैक को कॉल किया जाएगा, ताकि सूची में मौजूद अनुरोधों को वापस पाया जा सके और फिर नेटवर्क से फ़ेच किया जा सके.
• नेटवर्क रिस्पॉन्स को offline-search-responses कैश मेमोरी में जोड़ा जाता है. साथ ही, &notification=true क्वेरी पैरामीटर को जोड़ा जाता है, ताकि उपयोगकर्ता सूचना पर क्लिक करने पर, इस कैश मेमोरी एंट्री को पिक अप किया जा सके.

अपनी सेवा के साथ बैकग्राउंड सिंक को इंटिग्रेट करने के लिए, खोज यूआरएल (/search_action) के अनुरोधों के लिए NetworkOnly की रणनीति तय करें और पहले से तय की गई bgSyncPlugin को पास करें. public/sw.js के नीचे यह कोड जोड़ें:

const matchSearchUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return url.pathname === '/search_action' && !(notificationParam === 'true');
};

workbox.routing.registerRoute(
  matchSearchUrl,
  new workbox.strategies.NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
);

इससे Workbox को हमेशा नेटवर्क से कनेक्ट रहने के लिए कहा जाता है. साथ ही, अनुरोध पूरा न होने पर, बैकग्राउंड में सिंक करने के लॉजिक का इस्तेमाल करने के लिए कहा जाता है.

इसके बाद, सूचनाओं से आने वाले अनुरोधों के लिए कैश मेमोरी सेव करने की रणनीति तय करने के लिए, public/sw.js के नीचे यह कोड जोड़ें. CacheFirst रणनीति का इस्तेमाल करें, ताकि उन्हें कैश मेमोरी से दिखाया जा सके.

const matchNotificationUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return (url.pathname === '/search_action' && (notificationParam === 'true'));
};

workbox.routing.registerRoute(matchNotificationUrl,
  new workbox.strategies.CacheFirst({
     cacheName: 'offline-search-responses',
  })
);

आखिर में, सूचनाएं दिखाने के लिए कोड जोड़ें:

function showNotification(notificationUrl) {
  if (Notification.permission) {
     self.registration.showNotification('Your search is ready!', {
        body: 'Click to see you search result',
        icon: '/img/workbox.jpg',
        data: {
           url: notificationUrl
        }
     });
  }
}

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
     clients.openWindow(event.notification.data.url)
  );
});

सुविधा को टेस्ट करना

1. उस टैब पर वापस जाएं जिस पर आपका ऐप्लिकेशन चल रहा है.
2. थ्रॉटलिंग ड्रॉप-डाउन सूची को फिर से ऑनलाइन पर सेट करें.
3. खोज पेज पर वापस जाने के लिए, Chrome के वापस जाएं बटन को दबाएं.
4. Chrome के फिर से लोड करें बटन को दबाकर रखें और कैश मेमोरी खाली करें और फिर से लोड करें को चुनें. इससे यह पक्का किया जा सकता है कि आपका सेवा वर्कर अपडेट हो गया है.
5. ट्रैफ़िक कम करना ड्रॉप-डाउन सूची को फिर से ऑफ़लाइन पर सेट करें.
6. खोज क्वेरी डालें और खोजें बटन पर फिर से क्लिक करें.
7. सूचनाएं पाने की सुविधा चालू करें पर क्लिक करें.
8. जब Chrome आपसे पूछे कि क्या आपको ऐप्लिकेशन को सूचनाएं भेजने की अनुमति देनी है, तो अनुमति दें पर क्लिक करें.
9. कोई दूसरी खोज क्वेरी डालें और खोजें बटन पर फिर से क्लिक करें.
10. थ्रॉटलिंग ड्रॉप-डाउन सूची को फिर से ऑनलाइन पर सेट करें.

कनेक्शन वापस आने पर, आपको एक सूचना दिखेगी:

नतीजा

Workbox में पहले से कई सुविधाएं मौजूद होती हैं. इनकी मदद से, आपके PWA को ज़्यादा बेहतर और दिलचस्प बनाया जा सकता है. इस कोडलैब में, आपने Workbox एब्स्ट्रैक्शन की मदद से Background Sync API को लागू करने का तरीका जाना है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ता की ऑफ़लाइन क्वेरी नष्ट न हों और कनेक्शन वापस आने पर उन्हें फिर से आज़माया जा सके. यह एक आसान खोज ऐप्लिकेशन है. हालांकि, ज़्यादा मुश्किल स्थितियों और इस्तेमाल के उदाहरणों के लिए, इस तरह के लागू करने का इस्तेमाल किया जा सकता है. जैसे, चैट ऐप्लिकेशन, सोशल नेटवर्क पर मैसेज पोस्ट करना वगैरह.