Workbox

अपने सर्विस वर्कर और कैश स्टोरेज लॉजिक को बनाए रखना, आपके PWA के बढ़ने के दौरान मुश्किल हो सकता है. Workbox, ओपन सोर्स लाइब्रेरी का एक सेट है जो इसमें आपकी मदद करता है. Workbox में, Service Worker API और कैश Storage API जैसे लो-लेवल के एपीआई शामिल किए जाते हैं. साथ ही, ज़्यादा डेवलपर-फ़्रेंडली इंटरफ़ेस दिखाए जाते हैं.

पाथ (या रूटिंग पैटर्न) से कैश मेमोरी में सेव करने की रणनीतियों को मैच करने, स्ट्रीम के साथ काम करने, और सही फ़ॉलबैक के साथ बैकग्राउंड सिंक जैसी सुविधाओं का इस्तेमाल करने में, इससे मदद मिल सकती है.

वर्कबॉक्स की मदद से, ऐसेट को कैश मेमोरी में सेव करने और विज्ञापन दिखाने से जुड़ी ज़रूरतों को मैनेज किया जा सकता है. यह लाइब्रेरी कर्मचारियों के लिए सबसे ज़्यादा इस्तेमाल की जाती है. 54% मोबाइल साइट इसका इस्तेमाल करती हैं. इसका इस्तेमाल कई बिल्ड टूल और सीएलआई में किया जाता है. इनमें Angular CLI, Create-React-App, और Vue CLI शामिल हैं. ज़्यादातर दूसरी लाइब्रेरी और फ़्रेमवर्क के लिए भी प्लगिन मौजूद हैं, जैसे कि Next.js.

54%

सर्विस वर्कर वाली मोबाइल साइटें, Workbox लाइब्रेरी का इस्तेमाल करती हैं

वर्कबॉक्स मॉड्यूल

वर्कबॉक्स में कई लाइब्रेरी शामिल होती हैं, जिन्हें अंदरूनी तौर पर मॉड्यूल कहा जाता है. ये सभी लाइब्रेरी आपकी एसेट और सर्विस वर्कर के व्यवहार को मैनेज करने के अलग-अलग पहलू पर फ़ोकस करती हैं.

वर्कबॉक्स मॉड्यूल अलग-अलग कॉन्टेक्स्ट में काम करते हैं, जैसे:

  • सर्विस वर्कर के हिसाब से: आपको अपनी सर्विस वर्कर फ़ाइल से ज़रूरी मॉड्यूल इंपोर्ट करने और उनका इस्तेमाल करने का विकल्प मिलता है. उदाहरण के लिए, कैश मेमोरी में डेटा सेव करने और अलग-अलग रणनीतियों के साथ फ़ाइलें सर्व करने में मदद करने के लिए.
  • window के मुख्य संदर्भ में: सर्विस वर्कर को रजिस्टर करने और उससे बातचीत करने में मदद करना
  • बिल्ड सिस्टम के हिस्से के रूप में: उदाहरण के लिए, वेबपैक, एसेट का मेनिफ़ेस्ट बनाने या पूरे सर्विस वर्कर को जनरेट करने के लिए.

यहां कुछ लोकप्रिय मॉड्यूल हैं:

  • वर्कबॉक्स-रूटिंग: जब सर्विस वर्कर इंटरसेप्ट करता है, तब यह मॉड्यूल उन अनुरोधों को जवाब देने वाले अलग-अलग फ़ंक्शन पर ले जाता है. यह fetch इवेंट हैंडलर को लागू करता है, जैसा कि सेवा चैप्टर में बताया गया है.
  • वर्कबॉक्स-रणनीतियां: यह रनटाइम को कैश मेमोरी में सेव करने की रणनीतियों का एक सेट है, जो किसी अनुरोध को पूरा करने के तरीके को हैंडल करती है. जैसे, पहले कैश मेमोरी और दोबारा पुष्टि करने के दौरान पुरानी जानकारी. इसमें विज्ञापन दिखाने के चैप्टर में बताई गई अलग-अलग रणनीतियों को लागू करना होता है.
  • वर्कबॉक्स-प्रीकैशिंग: यह सर्विस वर्कर के install इवेंट हैंडलर (जिसे प्रीकैशिंग भी कहा जाता है) में फ़ाइलों को कैश मेमोरी में सेव करने की प्रोसेस है. इसके बारे में कैशिंग चैप्टर में बताया गया है. इस मॉड्यूल की मदद से, फ़ाइलों के सेट को आसानी से प्री-कैश किया जा सकता है और उन ऐसेट के अपडेट को बेहतर तरीके से मैनेज किया जा सकता है. अपडेट चैप्टर में, हम ऐसेट अपडेट करने के बारे में जानकारी देंगे.
  • workbox-expiration: यह एक ऐसा प्लगिन है जिसका इस्तेमाल कैश मेमोरी में सेव किए गए अनुरोधों को हटाने के लिए किया जाता है. इनकी मदद से कैश मेमोरी में सेव किए गए अनुरोधों को हटाया जाता है. ये अनुरोध कैश मेमोरी में मौजूद आइटम की संख्या या कैश में सेव किए गए अनुरोध की उम्र के आधार पर हटाए जाते हैं. इससे कैश मेमोरी को मैनेज करने में मदद मिलती है. साथ ही, हर कैश मेमोरी में मौजूद आइटम की संख्या और समय की सीमा भी तय की जा सकती है.
  • workbox-window: एक तरह का मॉड्यूल, जिसे विंडो कॉन्टेक्स्ट में चलाना है. यह आपके PWA वेब पेजों के अंदर होता है. आप सर्विस वर्कर के रजिस्ट्रेशन और अपडेट की प्रक्रिया को आसान बना सकते हैं. साथ ही, सर्विस वर्कर कॉन्टेक्स्ट में चल रहे कोड और विंडो कॉन्टेक्स्ट के बीच आसान कम्यूनिकेशन कर सकते हैं.

Workbox का इस्तेमाल करना

वर्कबॉक्स, आपके PWA को कई तरीकों से इंटिग्रेट करता है. आपके पास यह चुनने का विकल्प होता है कि आपके ऐप्लिकेशन के आर्किटेक्चर के हिसाब से, कौनसा विकल्प सबसे सही है:

  • Workbox CLI: यह एक कमांड-लाइन सुविधा है, जो एक पूरा सर्विस वर्कर जनरेट करती है, प्री-कैश मेनिफ़ेस्ट को इंजेक्ट करती है या ज़रूरी Workbox फ़ाइलों को कॉपी करती है.
  • वर्कबॉक्स बिल्ड: एक ऐसा npm मॉड्यूल जो एक पूरा सर्विस वर्कर जनरेट करता है, प्रीकैश मेनिफ़ेस्ट इंजेक्ट करता है, और Workbox फ़ाइलों को कॉपी करता है. इसे आपकी अपनी बिल्ड प्रोसेस के साथ इंटिग्रेट करने के लिए बनाया गया है.
  • workbox-sw: किसी सीडीएन से Workbox सर्विस वर्कर पैकेज, लोड करने का तरीका जो बिल्ड प्रोसेस का इस्तेमाल नहीं करता है.

Workbox CLI एक विज़ार्ड देता है, जो आपको सर्विस वर्कर बनाने की प्रोसेस बताता है. विज़र्ड चलाने के लिए, कमांड लाइन में यह लिखें:

npx workbox-cli wizard

टर्मिनल में वर्कबॉक्स सीएलआई काम करता है

वर्कबॉक्स की मदद से कैश मेमोरी में सेव करना और उसे पेश करना

आम तौर पर, Workbox का इस्तेमाल, फ़ाइलों को कैश मेमोरी में सेव करने और उन्हें दिखाने के लिए, रूटिंग और रणनीतियों के मॉड्यूल को एक साथ इस्तेमाल करने के लिए किया जाता है.

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

वर्कबॉक्स-रूटिंग मॉड्यूल आपके सर्विस वर्कर से आने वाले अनुरोधों को क्रम से लगाने में मदद करता है. साथ ही, उनका मिलान कैश मेमोरी की रणनीतियों या फ़ंक्शन से करता है, ताकि उन अनुरोधों के जवाब मिल सकें.

रणनीतियों के रूट मैच करने के बाद, Workbox में workbox-cacheable-response प्लगिन की मदद से यह फ़िल्टर करने की सुविधा मिलती है कि कैश मेमोरी में कौनसे जवाब जोड़े जाएंगे. उदाहरण के लिए, इस प्लग इन की मदद से, सिर्फ़ उन जवाबों को कैश मेमोरी में सेव किया जा सकता है जो बिना किसी गड़बड़ी के दिखती हैं.

नीचे दिया गया कोड सैंपल, CacheFirst मॉड्यूल के ज़रिए कैश मेमोरी में सेव करने की पहली रणनीति का इस्तेमाल करता है, ताकि पेज नेविगेशन को कैश मेमोरी में सेव किया जा सके और दिखाया जा सके.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

प्लगिन आपको Workbox की कैश मेमोरी में टैप करने और रिज़ॉल्यूशन की लाइफ़साइकल का अनुरोध करने की सुविधा देता है. यहां CacheableResponsePlugin का इस्तेमाल सिर्फ़ उन अनुरोधों को कैश मेमोरी में सेव करने के लिए किया जाता है जो 200 स्टेटस वाले होते हैं. इस तरह, गलत अनुरोधों को कैश मेमोरी में सेव होने से रोका जाता है.

रणनीति बनाने के बाद, किसी रूट को इस्तेमाल करने के लिए अब उसे रजिस्टर किया जा सकता है. नीचे दिया गया उदाहरण, registerRoute() को कॉल करता है और अपने कॉलबैक में अनुरोध ऑब्जेक्ट पास करता है. अगर request.mode, "navigate" है, तो यह पिछले कोड के उदाहरण में बताई गई CacheFirst रणनीति (यहां pageStrategy कहा जाता है) का इस्तेमाल करता है.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

ज़्यादा उदाहरणों और सबसे सही तरीकों के लिए, Workbox का दस्तावेज़ पढ़ें.

ऑफ़लाइन फ़ॉलबैक

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

यहां, Workbox और cache Storage API का कॉम्बिनेशन, सिर्फ़ कैश मेमोरी की रणनीति का इस्तेमाल करके ऑफ़लाइन फ़ॉलबैक उपलब्ध कराता है. सबसे पहले, सर्विस वर्कर के इंस्टॉल लाइफ़साइकल के दौरान, offline-fallbacks कैश खोला जाता है और ऑफ़लाइन फ़ॉलबैक का कलेक्शन कैश में जोड़ दिया जाता है.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

इसके बाद, setCatchHandler() में, गड़बड़ी वाले अनुरोध के डेस्टिनेशन का पता चलता है और offline-fallbacks की कैश मेमोरी खुल जाती है. अगर डेस्टिनेशन कोई दस्तावेज़ है, तो ऑफ़लाइन फ़ॉलबैक का कॉन्टेंट उपयोगकर्ता को वापस कर दिया जाता है. अगर यह मौजूद नहीं है या डेस्टिनेशन कोई दस्तावेज़ (जैसे कि इमेज या स्टाइलशीट) नहीं है, तो गड़बड़ी का जवाब मिलता है. इस पैटर्न को सिर्फ़ दस्तावेज़ों के लिए ही नहीं, बल्कि इमेज, वीडियो, फ़ॉन्ट, ऐसी किसी भी चीज़ के लिए बढ़ाया जा सकता है जिसे आपको ऑफ़लाइन फ़ॉलबैक के तौर पर उपलब्ध कराना है.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

रेसिपी

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

ऐसेट को कैश मेमोरी में सेव करना और अपडेट करना

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

Workbox के साथ खेलें

इस कोड लैब का इस्तेमाल करके, Workbox को तुरंत इस्तेमाल किया जा सकता है:

रिसॉर्स