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

सर्विस वर्कर के साथ ऐसेट को कैश मेमोरी में सेव करने से, बार-बार होने वाली विज़िट की स्पीड बढ़ सकती है और ऑफ़लाइन सहायता मिल सकती है. वर्कबॉक्स की मदद से, यह काम आसान हो जाता है. इसे डिफ़ॉल्ट रूप से Create React ऐप्लिकेशन में शामिल किया जाता है.

Houssein Djirdeh

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

सर्विस वर्कर से मिले अनुरोध/रिस्पॉन्स

यह जानकारी काम की क्यों है?

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

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. ऐप्लिकेशन को फिर से लोड करें.

यह ऐप्लिकेशन ठीक वैसे ही काम करता है जैसे किसी नेटवर्क कनेक्शन के बिना भी किया जाता है!

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

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

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

कैश-फ़र्स्ट रणनीति को मैनेज करना

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

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

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

नतीजा

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

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