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

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

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

कैश मेमोरी में डेटा सेव करने की रणनीति को मैनेज करना

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

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

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

नतीजा

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

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