प्रोग्रेसिव वेब ऐप्लिकेशन: Workbox का इस्तेमाल करना

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

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

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

• किसी मौजूदा सर्विस वर्कर को Workbox का इस्तेमाल करने के लिए बदलना
• किसी PWA में ऑफ़लाइन फ़ॉलबैक जोड़ना

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

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

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

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

2. सेट अप करना

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

Repo को क्लोन करना

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

अगर आपको रेपो को क्लोन करना है, तो पक्का करें कि आप pwa03--workbox ब्रांच पर हों. ZIP फ़ाइल में उस ब्रांच का कोड भी होता है.

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

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

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

• service-worker.js - ऐप्लिकेशन की सर्विस वर्कर फ़ाइल
• offline.html - ऑफ़लाइन एचटीएमएल, जिसका इस्तेमाल तब किया जाता है, जब कोई पेज उपलब्ध न हो

3. Workbox पर माइग्रेट करना

मौजूदा सर्विस वर्कर को देखने से पता चलता है कि प्रीकैशिंग को दो चरणों में बांटा जा सकता है:

• सर्विस वर्कर इंस्टॉल करने के दौरान, काम की फ़ाइलों को कैश मेमोरी में सेव करना
• सिर्फ़ कैश मेमोरी की रणनीति का इस्तेमाल करके, उन फ़ाइलों को फिर से दिखाएं

index.html फ़ाइल और / रूट, दोनों को अब भी प्रीकैश किया जा सकता है. ऐसा इसलिए, क्योंकि इस वेब ऐप्लिकेशन का एचटीएमएल ज़्यादा नहीं बदलेगा. हालांकि, सीएसएस और JavaScript जैसी अन्य फ़ाइलों में बदलाव हो सकता है. हम नहीं चाहते कि हर बार बदलाव होने पर, हमें पूरे सर्विस वर्कर लाइफ़साइकल से गुज़रना पड़े. इसके अलावा, मौजूदा सर्विस वर्कर सिर्फ़ हमारी सीएसएस और JavaScript के सबसेट को ध्यान में रखता है. हम चाहते हैं कि यह सभी को कवर करे. इन आइटम को Stale While Revalidate रणनीति के साथ कैश करना ज़्यादा सही है. इससे तुरंत जवाब मिलता है और ज़रूरत पड़ने पर बैकग्राउंड में अपडेट किया जा सकता है.

प्रीकैशिंग की सुविधा फिर से उपलब्ध कराई गई

Workbox पर माइग्रेट करने के लिए, हमें मौजूदा कोड में से किसी को भी नहीं रखना है. इसलिए, service-worker.js में मौजूद हर चीज़ को मिटा दें. पिछले लैब में, हमने इस सर्विस वर्कर को कंपाइल करने के लिए सेट अप किया था, ताकि हम यहां ESModule Imports का इस्तेमाल करके, Workbox को उसके NPM मॉड्यूल से ला सकें. आइए, प्रीकैशिंग के बारे में फिर से जानते हैं. service-worker.js में, यह कोड जोड़ें:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

import सिंटैक्स, सर्विस वर्कर में काम नहीं करता. इसलिए, अगर WMR का इस्तेमाल नहीं किया जा रहा है, तो आपको इस फ़ाइल को किसी और तरीके से कंपाइल करना होगा. इसके अलावा, WMR इन डिपेंडेंसी को अपने-आप डाउनलोड और इंस्टॉल कर लेता है. इसलिए, आपको इन्हें खुद इंस्टॉल करने की ज़रूरत नहीं होती. अगर WMR का इस्तेमाल नहीं किया जा रहा है, तो NPM से इन डिपेंडेंसी को इंस्टॉल करना न भूलें.

जानकारी

/index.html और / के लिए प्रीकैशिंग सेट अप करने के लिए, पांच मॉड्यूल से डेटा लिया जा सकता है. यह कोड, पहले लिखे गए कोड से ज़्यादा बेहतर है.

यह Cache First कैश मेमोरी में सेव करने की नई रणनीति सेट अप करके शुरू होती है. इसे Cache Only रणनीति के बजाय चुना जाता है, ताकि ज़रूरत के मुताबिक अन्य पेजों को कैश मेमोरी में जोड़ा जा सके. इसे page-cache नाम दिया गया है. Workbox की रणनीतियों में कई प्लगिन इस्तेमाल किए जा सकते हैं. इनसे, कैश मेमोरी से कॉन्टेंट सेव करने और वापस पाने की प्रोसेस पर असर पड़ सकता है. यहां दो प्लगइन, Cacheable Response प्लगइन और Expiration प्लगइन का इस्तेमाल किया गया है. इससे यह पक्का किया जाता है कि सिर्फ़ अच्छे सर्वर रिस्पॉन्स को कैश मेमोरी में सेव किया जाए. साथ ही, कैश मेमोरी में मौजूद हर आइटम को 30 दिनों के बाद हटा दिया जाएगा.

इसके बाद, रणनीति की कैश मेमोरी को /index.html और / के साथ वार्म किया जाता है. इसके लिए, वार्म रणनीति की कैश मेमोरी के Workbox रेसिपी का इस्तेमाल किया जाता है. इससे, सेवा देने वाले वर्कर के इंस्टॉल इवेंट के दौरान, उन आइटम को इस कैश मेमोरी में जोड़ दिया जाएगा.

आखिर में, एक नया रूट रजिस्टर किया जाता है. पेज नेविगेशन के लिए किए गए किसी भी अनुरोध को, इस Cache First रणनीति के तहत मैनेज किया जाएगा. इसके लिए, कैश मेमोरी या नेटवर्क से डेटा पुल किया जाएगा. इसके बाद, जवाब को कैश मेमोरी में सेव किया जाएगा.

ऐसेट को कैश मेमोरी में सेव करना

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

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

जानकारी

यह रूट, यह तय करके शुरू होता है कि अनुरोध का टाइप स्टाइल, स्क्रिप्ट या वर्कर है. यह सीएसएस, JavaScript या वेब वर्कर के हिसाब से होता है. अगर ऐसा है, तो यह Stale While Revalidate रणनीति का इस्तेमाल करता है. इसमें सबसे पहले कैश मेमोरी से डेटा दिखाने की कोशिश की जाती है. अगर कैश मेमोरी में डेटा उपलब्ध नहीं होता है, तो नेटवर्क से डेटा दिखाया जाता है. साथ ही, अगर संभव हो, तो नेटवर्क से कैश मेमोरी में मौजूद वर्शन को अपडेट करने की कोशिश की जाती है. पेज की रणनीति की तरह, यह रणनीति सिर्फ़ अच्छे जवाबों को कैश मेमोरी में सेव करेगी.

4. ऑफ़लाइन फ़ॉलबैक जोड़ना

ओरिजनल सर्विस वर्कर को Workbox पर माइग्रेट करने के बाद, एक और काम करना ज़रूरी है. इससे ऑफ़लाइन होने पर PWA क्रैश नहीं होगा. इसके लिए, ऑफ़लाइन फ़ॉलबैक जोड़ना होगा.

ऑफ़लाइन फ़ॉलबैक को उन सभी चीज़ों के लिए सेट किया जा सकता है जो ऑफ़लाइन होने पर उपलब्ध नहीं हो सकती हैं. जैसे, पेज, फ़ॉन्ट, सीएसएस, JavaScript, इमेज वगैरह.... सभी PWA के लिए, कम से कम एक पेज फ़ॉलबैक सेट किया जाना चाहिए. इससे अगर कोई उपयोगकर्ता ऐसे पेज पर जाता है जो कैश मेमोरी में नहीं है, तो वह आपके ऐप्लिकेशन के कॉन्टेक्स्ट में ही रहेगा.

Workbox की रेसिपी में, ऑफ़लाइन फ़ॉलबैक रेसिपी उपलब्ध होती है. इसका इस्तेमाल सिर्फ़ इसी काम के लिए किया जा सकता है! इसका इस्तेमाल करने के लिए, सबसे पहले offlineFallback को अपने workbox-recipes इंपोर्ट में जोड़ें. इसके बाद, इस कोड को अपने सर्विस वर्कर के सबसे नीचे जोड़ें:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

जानकारी

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

5. बधाई हो!

आपने Workbox का इस्तेमाल करके, रास्तों के लिए कैश मेमोरी में सेव करने की रणनीतियां सेट अप करने और अपने PWA के लिए ऑफ़लाइन फ़ॉलबैक उपलब्ध कराने का तरीका जान लिया है.

इस सीरीज़ का अगला कोडलैब IndexedDB है