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

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

Houssein Djirdeh

ध्यान दें: अगर अभी तक आपको सर्विस वर्कर और प्रीकैशिंग का बुनियादी आइडिया नहीं समझ आया है, तो पहले वर्कबॉक्स की मदद से प्रीकैशिंग गाइड पढ़ें.

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

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

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

CRA में वर्कबॉक्स

वर्कबॉक्स ऐसे टूल का कलेक्शन है जिनकी मदद से सेवा बनाई जा सकती है और उसे मैनेज किया जा सकता है कर्मचारी. 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 में, पहले से कैश मेमोरी को सेव करने की डिफ़ॉल्ट रणनीति का इस्तेमाल किया जाता है: कैश मेमोरी को प्राथमिकता देना. यहां सभी स्टैटिक ऐसेट को सर्विस वर्कर कैश मेमोरी से फ़ेच किया जाता है. अगर यह काम नहीं करता है, तो (उदाहरण के लिए, अगर संसाधन कैश मेमोरी में सेव नहीं किया गया है), तो नेटवर्क के लिए अनुरोध किया जाता है. यह वह तरीका है जिससे उपयोगकर्ताओं को तब भी कॉन्टेंट दिखाया जा सकता है, जब वे पूरी तरह से ऑफ़लाइन स्थिति.

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

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

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

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

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

सीआरए दस्तावेज़ और अन्य चीज़ों के बारे में विस्तार से बताएं.

नतीजा

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

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