Workbox की मदद से, React ऐप्लिकेशन बनाएं में प्रीकैशिंग

सर्विस वर्कर की मदद से एसेट को कैश मेमोरी में सेव करने से, उपयोगकर्ताओं के आपके पेज पर बार-बार लौटकर आने की प्रोसेस में तेज़ी आती है. साथ ही, इससे ऑफ़लाइन सहायता भी मिलती है. Workbox इस काम को आसान बनाता है. यह Create React App में डिफ़ॉल्ट रूप से शामिल होता है.

Houssein Djirdeh

Workbox, Create React App (CRA) में पहले से मौजूद होता है. इसमें एक डिफ़ॉल्ट कॉन्फ़िगरेशन होता है, जो हर बिल्ड के साथ आपके ऐप्लिकेशन में मौजूद सभी स्टैटिक ऐसेट को पहले से कैश मेमोरी में सेव कर लेता है.

सर्विस वर्कर के साथ अनुरोध/जवाब

यह सुविधा क्यों काम की है?

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

CRA में Workbox

Workbox, टूल का एक कलेक्शन है. इसकी मदद से, सर्विस वर्कर बनाए और मैनेज किए जा सकते हैं. CRA में, workbox-webpack-plugin पहले से ही प्रोडक्शन बिल्ड में शामिल होता है. हर बिल्ड के साथ एक नए सर्विस वर्कर को रजिस्टर करने के लिए, इसे सिर्फ़ src/index.js फ़ाइल में चालू करना होता है:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

यहां CRA की मदद से बनाए गए React ऐप्लिकेशन का एक उदाहरण दिया गया है. इसमें इस फ़ाइल के ज़रिए सर्विस वर्कर को चालू किया गया है:

यह देखने के लिए कि कौनसी ऐसेट कैश मेमोरी में सेव की जा रही हैं:

  • साइट की झलक देखने के लिए, ऐप्लिकेशन देखें को दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन को दबाएं.
  • DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
  • नेटवर्क टैब पर क्लिक करें.
  • ऐप्लिकेशन को फिर से लोड करें.

आपको दिखेगा कि पेलोड का साइज़ दिखाने के बजाय, Size कॉलम में (from ServiceWorker) मैसेज दिखता है. इससे पता चलता है कि ये संसाधन, सर्विस वर्कर से वापस पाए गए थे.

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

सर्विस वर्कर सभी स्टैटिक ऐसेट को कैश मेमोरी में सेव करता है. इसलिए, ऑफ़लाइन रहते हुए ऐप्लिकेशन का इस्तेमाल करने की कोशिश करें:

  1. DevTools में नेटवर्क टैब पर जाकर, ऑफ़लाइन चेकबॉक्स को चालू करें. इससे आपको ऑफ़लाइन अनुभव मिलेगा.
  2. ऐप्लिकेशन को फिर से लोड करें.

यह ऐप्लिकेशन, इंटरनेट कनेक्शन के बिना भी ठीक उसी तरह काम करता है!

कैश मेमोरी में सेव करने की रणनीतियों में बदलाव करना

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

Workbox, स्टैटिक और डाइनैमिक रिसॉर्स को कैश मेमोरी में सेव करने के लिए, अलग-अलग रणनीतियों और तरीकों को तय करने की सुविधा देता है. हालांकि, CRA में डिफ़ॉल्ट कॉन्फ़िगरेशन में तब तक बदलाव नहीं किया जा सकता या उसे बदला नहीं जा सकता, जब तक कि उसे पूरी तरह से बाहर न निकाल दिया जाए. हालांकि, बाहरी workbox.config.js फ़ाइल के लिए सहायता जोड़ने की सुविधा को एक्सप्लोर करने के लिए, एक ओपन प्रपोज़ल है. इससे डेवलपर, सिर्फ़ एक workbox.config.js फ़ाइल बनाकर डिफ़ॉल्ट सेटिंग को बदल सकते हैं.

कैश मेमोरी को प्राथमिकता देने वाली रणनीति को मैनेज करना

पहले सर्विस वर्कर कैश मेमोरी पर भरोसा करना और फिर नेटवर्क पर वापस जाना, ऐसी साइटें बनाने का एक बेहतरीन तरीका है जो बाद में विज़िट करने पर तेज़ी से लोड होती हैं और कुछ हद तक ऑफ़लाइन काम करती हैं. हालांकि, कुछ बातों का ध्यान रखना ज़रूरी है:

  • सर्विस वर्कर की कैश मेमोरी में डेटा सेव करने की प्रोसेस को कैसे टेस्ट किया जा सकता है?
  • क्या उपयोगकर्ताओं को यह बताने के लिए कोई मैसेज होना चाहिए कि वे कैश मेमोरी में सेव किया गया कॉन्टेंट देख रहे हैं?

सीआरए के दस्तावेज़ में इन बातों के बारे में ज़्यादा जानकारी दी गई है.

नतीजा

अपने ऐप्लिकेशन में ज़रूरी संसाधनों को पहले से कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर का इस्तेमाल करें. इससे उपयोगकर्ताओं को तेज़ अनुभव के साथ-साथ ऑफ़लाइन सहायता भी मिलेगी.

  1. अगर CRA का इस्तेमाल किया जा रहा है, तो src/index.js में पहले से कॉन्फ़िगर किए गए सर्विस वर्कर को चालू करें.
  2. अगर React ऐप्लिकेशन बनाने के लिए CRA का इस्तेमाल नहीं किया जा रहा है, तो Workbox की उपलब्ध कराई गई कई लाइब्रेरी में से किसी एक को अपने बिल्ड प्रोसेस में शामिल करें. जैसे, workbox-webpack-plugin.
  3. इस GitHub समस्या में, इस बात पर नज़र रखें कि CRA, workbox.config.js की ओवरराइड फ़ाइल के साथ कब काम करेगा.