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]);

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

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

1. सोर्स देखने के लिए, View Source दबाएं.
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() को पास करता है.

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

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

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 में पहले से कई सुविधाएं मौजूद हैं, ताकि आपके पीडब्ल्यूए को आसान और दिलचस्प बनाया जा सके. इस कोडलैब में आपने Workbox ऐब्स्ट्रैक्टेशन की मदद से, बैकग्राउंड सिंक एपीआई को लागू करने का तरीका जाना है. इससे यह पक्का किया जा सकेगा कि ऑफ़लाइन उपयोगकर्ता क्वेरी खो न जाएं और कनेक्शन वापस आने पर फिर से कोशिश की जा सके. डेमो का इस्तेमाल, सर्च ऐप्लिकेशन में आसानी से किया जा सकता है. हालांकि, इसे अन्य मुश्किल स्थितियों और इस्तेमाल के उदाहरणों के लिए भी इसी तरीके से इस्तेमाल किया जा सकता है. इनमें चैट ऐप्लिकेशन, सोशल नेटवर्क पर मैसेज पोस्ट करना वगैरह शामिल हैं.