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

Demián Renzulli
Jeff Posnick

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

मापें

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

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

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

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

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

ब्राउज़र में डिफ़ॉल्ट ऑफ़लाइन UX का स्क्रीनशॉट.

फ़ॉलबैक जवाब देना

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

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

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

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

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

  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();
  }
});

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

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

इस सुविधा की जांच करने के लिए:

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

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

ब्राउज़र में पसंद के मुताबिक बनाए गए ऑफ़लाइन UX का स्क्रीनशॉट.

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

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