प्रोग्रेसिव वेब ऐप्लिकेशन: सर्विस वर्कर शामिल है

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

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

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

  • किसी सर्विस वर्कर में स्ट्रीमिंग रिस्पॉन्स जोड़ना

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

  • JavaScript

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

2. सेट अप करना

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

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

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

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

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

  • js/preview.js - पेज की JavaScript फ़ाइल की झलक देखें
  • service-worker.js - PWA की सर्विस वर्कर फ़ाइल

3. स्ट्रीमिंग की झलक

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

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

इसके लिए, सबसे पहले js/preview.js में मौजूद कॉन्टेंट मिटाएं, ताकि यह पक्का किया जा सके कि अब कंपाइलिंग नहीं हो रही है. इसके बाद, service-worker.js में जाकर यह तरीका अपनाएं:

  • workbox-streams से strategy नाम का एक्सपोर्ट streamsStrategy के तौर पर इंपोर्ट करें
  • नाम वाले एक्सपोर्ट openDB को idb से इंपोर्ट करें और नाम वाले एक्सपोर्ट marked को marked से इंपोर्ट करें
  • नेविगेशन के लिए रूट रजिस्टर करने से पहले, नया रूट रजिस्ट्रेशन जोड़ें
    • यह जांच होनी चाहिए कि यूआरएल का pathname, /preview है या नहीं
    • इसमें ऐसी स्ट्रीमिंग रणनीति का इस्तेमाल किया जाना चाहिए जो
      1. main टैग के कॉन्टेंट एरिया में मौजूद preview/index.html के कॉन्टेंट के साथ जवाब देना
      2. ऐसा फ़ंक्शन इस्तेमाल करें जो settings-store IndexedDB खोलता हो, settings ऑब्जेक्ट स्टोर से कॉन्टेंट लेता हो, और उस कॉन्टेंट का मार्कडाउन रेंडर किया गया वर्शन दिखाता हो.
      3. जवाब में main, body, और html टैग का इस्तेमाल करें.

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

4. बधाई हो!

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

इस सीरीज़ का अगला कोडलब वर्कर के साथ काम करना है