प्रोग्रेसिव वेब ऐप्लिकेशन: ऑफ़लाइन मोड में काम करना

1. आपका स्वागत है

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

आपको क्या सीखने को मिलेगा

• सर्विस वर्कर को मैन्युअल तरीके से लिखना
• किसी मौजूदा वेब ऐप्लिकेशन में सर्विस वर्कर जोड़ना
• संसाधनों को ऑफ़लाइन उपलब्ध कराने के लिए, सर्विस वर्कर और Cache Storage API का इस्तेमाल करना

आपको क्या पता होना चाहिए

• बेसिक एचटीएमएल और JavaScript

आपको किन चीज़ों की ज़रूरत होगी

• ऐसा ब्राउज़र जो सर्विस वर्कर के साथ काम करता हो

2. सेटअप करना

इस कोडलैब को पूरा करने के लिए, स्टार्टर कोड को क्लोन करें या डाउनलोड करें:

रेपो को क्लोन करें

ज़िप फ़ाइल डाउनलोड करें

अगर आपने रेपो को क्लोन किया है, तो पक्का करें कि आप starter ब्रांच पर हों. ज़िप फ़ाइल में, उस ब्रांच का कोड भी शामिल होता है.

इस कोडबेस के लिए, Node.js 14 या इसके बाद का वर्शन ज़रूरी है. कोड उपलब्ध होने के बाद, सभी ज़रूरी डिपेंडेंसी इंस्टॉल करने के लिए, कोड के फ़ोल्डर में जाकर, कमांड लाइन से npm ci चलाएं. इसके बाद, कोडलैब के लिए डेवलपमेंट सर्वर शुरू करने के लिए, npm start चलाएं.

सोर्स कोड की README.md फ़ाइल में, डिस्ट्रिब्यूट की गई सभी फ़ाइलों के बारे में बताया गया है. इसके अलावा, यहां उन मुख्य फ़ाइलों के बारे में बताया गया है जिनका इस्तेमाल, इस कोडलैब में किया जाएगा:

मुख्य फ़ाइलें

• js/main.js - मुख्य ऐप्लिकेशन की JavaScript फ़ाइल
• service-worker.js - ऐप्लिकेशन की सर्विस वर्कर फ़ाइल

3. ऑफ़लाइन मोड में टेस्ट करना

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

1. Chrome DevTools खोलें
2. ऐप्लिकेशन टैब पर स्विच करें
3. सर्विस वर्कर सेक्शन पर स्विच करें
4. ऑफ़लाइन चेकबॉक्स को चुनें
5. Chrome DevTools को बंद किए बिना, पेज को रीफ़्रेश करें

साइट को टेस्ट कर लिया गया है और यह ऑफ़लाइन मोड में लोड नहीं हो रही है. अब इसमें ऑनलाइन मोड में काम करने की सुविधा जोड़ते हैं! ऑफ़लाइन चेकबॉक्स से सही का निशान हटाएं और अगले चरण पर जाएं.

4. ऑफ़लाइन मोड में काम करने की सुविधा जोड़ना

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

सर्विस वर्कर रजिस्टर करना

सर्विस वर्कर की एक खाली फ़ाइल पहले से मौजूद है. इसलिए, यह पक्का करने के लिए कि बदलाव दिखें, इसे अपने ऐप्लिकेशन में रजिस्टर करें. इसके लिए, js/main.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 {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

import.meta JavaScript मॉड्यूल के बारे में, कॉन्टेक्स्ट के हिसाब से मेटाडेटा पाने का स्टैंडर्ड तरीका है. env को हमारे बिल्ड टूल से इंजेक्ट किया जाता है, ताकि हमें मौजूदा एनवायरमेंट के बारे में जानकारी मिल सके. साथ ही, DEV एक बूलियन है, जो यह दिखाता है कि हम डेवलपमेंट मोड में हैं या नहीं.

स्पष्टीकरण

यह कोड, खाली 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 दिखेंगे!

अगर आपको console.log इवेंट नहीं दिख रहे हैं, तो ऐप्लिकेशन टैब में जाकर, सर्विस वर्कर सेक्शन देखें. इससे यह पक्का करें कि आपके सर्विस वर्कर में कोई गड़बड़ी न हो और वह इंतज़ार की स्थिति में न हो.

इसके बाद, फिर से ऑफ़लाइन मोड में जाएं और साइट को रीफ़्रेश करें. आपको दिखेगा कि ऑफ़लाइन होने पर भी साइट लोड हो रही है!

स्पष्टीकरण

सर्विस वर्कर के इंस्टॉल इवेंट के दौरान, Cache Storage API का इस्तेमाल करके, नाम वाली कैश मेमोरी खोली जाती है. इसके बाद, precacheResources में बताई गई फ़ाइलों और रास्तों को cache.addAll तरीके का इस्तेमाल करके, कैश मेमोरी में लोड किया जाता है. इसे पहले से कैश मेमोरी में सेव करना कहा जाता है, क्योंकि यह इंस्टॉल के दौरान, फ़ाइलों के सेट को पहले से कैश मेमोरी में सेव करता है. इसके बजाय, उन्हें तब कैश मेमोरी में सेव किया जाता है, जब उनकी ज़रूरत होती है या अनुरोध किया जाता है.

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

संसाधनों को कैश मेमोरी में सेव करने से, ऐप्लिकेशन ऑफ़लाइन मोड में काम कर सकता है. ऐसा इसलिए, क्योंकि इससे नेटवर्क के अनुरोधों से बचा जा सकता है. अब ऐप्लिकेशन, ऑफ़लाइन होने पर 200 स्टेटस कोड के साथ जवाब दे सकता है!

5. बधाई हो!

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

सीरीज़ का अगला कोडलैब, Workbox के साथ काम करना है