1. आपका स्वागत है
इस लैब में, आप किसी मौजूदा वेब ऐप्लिकेशन का इस्तेमाल करके उसे ऑफ़लाइन काम कर सकते हैं. यह प्रोग्रेसिव वेब ऐप्लिकेशन वर्कशॉप के लिए, कंपैनियन कोडलैब (कोड बनाना सीखना) की सीरीज़ का पहला हिस्सा है. इस सीरीज़ में सात और कोडलैब (कोड बनाना सीखना) हैं.
आप इन चीज़ों के बारे में जानेंगे
- सर्विस वर्कर को हाथ से लिखें
- किसी मौजूदा वेब ऐप्लिकेशन में सर्विस वर्कर जोड़ना
- संसाधनों को ऑफ़लाइन उपलब्ध कराने के लिए सर्विस वर्कर और कैश मेमोरी एपीआई का इस्तेमाल करें
आपको क्या पता होना चाहिए
- बेसिक एचटीएमएल और JavaScript
आपको यह चाहिए हाेगा
- ऐसा ब्राउज़र जो सर्विस वर्कर के साथ काम करता है
2. सेट अप करें
इस कोडलैब को पूरा करने के लिए ज़रूरी क्लोनर या डाउनलोड करने वाला स्टार्टर कोड डाउनलोड करके शुरू करें:
अगर आप रेपो से क्लोन लेना चाहते हैं, तो पक्का करें कि आप #starter शाखा पर हैं. ज़िप फ़ाइल में उस शाखा का कोड भी होता है.
इस कोडबेस के लिए Node.js 14 या इसके बाद का वर्शन ज़रूरी है. कोड उपलब्ध होने के बाद, कोड's फ़ोल्डर में कमांड लाइन से npm ci चलाएं, ताकि आपको सभी डिपेंडेंसी इंस्टॉल करने पड़ें. फिर, कोडलैब के लिए डेवलपमेंट सर्वर शुरू करने के लिए npm start चलाएं.
सोर्स कोड ##39 की README.md फ़ाइल, डिस्ट्रिब्यूट की गई सभी फ़ाइलों के बारे में जानकारी देती है. इसके अलावा, इस कोडलैब के दौरान, आप नीचे दी गई मुख्य फ़ाइलों पर भी काम कर सकते हैं:
मुख्य फ़ाइलें
js/main.js- मुख्य ऐप्लिकेशन JavaScript फ़ाइलservice-worker.js- ऐप्लिकेशन और #39; सर्विस वर्कर फ़ाइल
3. ऑफ़लाइन टेस्ट करें
कोई भी बदलाव करने से पहले, यह दिखाने के लिए टेस्ट करें कि वेब ऐप्लिकेशन ऑफ़लाइन काम नहीं करता है. ऐसा करने के लिए, हमारे कंप्यूटर को ऑफ़लाइन इस्तेमाल करके वेब ऐप्लिकेशन को फिर से लोड करें या अगर आप Chrome का इस्तेमाल कर रहे हैं, तो:
- Chrome Dev टूल खोलें
- ऐप्लिकेशन टैब पर स्विच करें
- सर्विस वर्कर सेक्शन पर जाएं
- ऑफ़लाइन चेकबॉक्स पर सही का निशान लगाएं
- Chrome Dev टूल बंद किए बिना पेज को रीफ़्रेश करें
साइट की जांच पूरी हुई और ऑफ़लाइन लोड नहीं हो सका, इसलिए अब कुछ ऑनलाइन फ़ंक्शन जोड़ने का समय आ गया है! ऑफ़लाइन चेकबॉक्स से सही का निशान हटाएं और अगले चरण पर जाएं.
4. ऑफ़लाइन देखें
बेसिक सर्विस वर्कर जोड़ने का समय आ गया है! ऐसा दो चरणों में होगा: सर्विस वर्कर रजिस्टर करना और रिसॉर्स कैश करना.
सर्विस वर्कर रजिस्टर करें
यह पहले से ही एक खाली वर्कर वर्कर फ़ाइल है, इसलिए बदलावों को देखने के लिए, इसे हमारे ऐप्लिकेशन में रजिस्टर कर लें. ऐसा करने के लिए, नीचे दिए गए कोड को js/main.js में सबसे ऊपर जोड़ें:
import swURL from 'sw:../service-worker.js';
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
const reg = await navigator.serviceWorker.register(swURL);
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
इसका मतलब है
यह कोड, पेज लोड होने के बाद, service-worker.js वर्कर वर्कर की फ़ाइल रजिस्टर करता है और सिर्फ़ साइट पर ही सर्विस वर्कर के साथ काम करता है.
पहले से कैश किए गए रिसॉर्स
वेब ऐप्लिकेशन के ऑफ़लाइन काम करने के लिए, ब्राउज़र को नेटवर्क अनुरोधों का जवाब देना होगा और उन्हें चुनना होगा. ऐसा करने के लिए, service-worker.js में ये चीज़ें जोड़ें
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
अब ब्राउज़र पर वापस आएं और झलक टैब को बंद करके, उसे फिर से खोलें. आपको सर्विस वर्कर में अलग-अलग इवेंट से संबंधित console.log दिखाई देंगे!
इसके बाद, फिर से ऑफ़लाइन होकर साइट रीफ़्रेश करें. ऑफ़लाइन होने पर भी आपको यह लोड हो जाता है!
इसका मतलब है
सर्विस वर्कर ##39 के इंस्टॉल इवेंट के दौरान, कैश मेमोरी API का इस्तेमाल करके नाम वाला कैश खोला जाता है. इसके बाद, precacheResources में बताए गए फ़ाइलें और रास्ते, cache.addAll तरीके का इस्तेमाल करके कैश मेमोरी में लोड किए जाते हैं. इसे प्रीकैचिंग कहा जाता है, क्योंकि ये ज़रूरत के हिसाब से या अनुरोध किए जाने पर, पहले से इंस्टॉल किए जाने के दौरान फ़ाइलों के सेट को कैश मेमोरी में सेव कर देते हैं. यह कैश मेमोरी को पहले से कैश मेमोरी में सेव नहीं कर देता.
सर्विस वर्कर के साइट को कंट्रोल करने के बाद, अनुरोध किए गए संसाधन प्रॉक्सी जैसे सर्विस वर्कर के ज़रिए पास करें. हर अनुरोध एक फ़ेच इवेंट को ट्रिगर करता है, जो इस सर्विस वर्कर में किसी मिलते-जुलते के लिए कैश मेमोरी में खोजता है. अगर यह मैच होता है, तो कैश मेमोरी में सेव किए गए संसाधन के साथ जवाब देता है. अगर कोई मैच नहीं होता तो #, संसाधन का अनुरोध किया जाता है.
कैश मेमोरी में सेव किए गए संसाधन, नेटवर्क अनुरोधों से बचकर, ऐप्लिकेशन को ऑफ़लाइन काम करने की अनुमति देते हैं. अब ऐप्लिकेशन ऑफ़लाइन होने पर, 200 स्टेटस कोड दिखा सकता है!
5. बधाई हो!
आपने सर्विस वर्कर और कैश मेमोरी एपीआई का इस्तेमाल करके, वेब ऐप्लिकेशन को ऑफ़लाइन इस्तेमाल करने का तरीका सीख लिया है.
सीरीज़ का अगला कोडलैब वर्कबॉक्स के साथ काम करना है