नेविगेशन के अनुरोधों को मैनेज करना

सर्विस वर्कर का इस्तेमाल करके, नेटवर्क पर इंतज़ार किए बिना नेविगेशन के अनुरोधों का जवाब देना.

जेफ़ पॉस्निक

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

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

सर्विस वर्कर के fetch इवेंट हैंडलर के अंदर, FetchEvent पर request.mode प्रॉपर्टी की जांच करके यह तय किया जा सकता है कि कोई अनुरोध, नेविगेशन है या नहीं. अगर इसे 'navigate' पर सेट किया गया है, तो यह नेविगेशन अनुरोध है.

सामान्य नियम के तौर पर, किसी नेविगेशन अनुरोध के एचटीएमएल रिस्पॉन्स को कैश मेमोरी में सेव करने के लिए, लंबे समय तक मौजूद Cache-Control headers का इस्तेमाल न करें. आम तौर पर, उन्हें Cache-Control: no-cache के साथ नेटवर्क से पूरा किया जाना चाहिए, ताकि यह पक्का किया जा सके कि एचटीएमएल और बाद में मिलने वाले नेटवर्क अनुरोधों की चेन (काम के) नए हों. जब भी उपयोगकर्ता किसी नए पेज पर जाता है, तब नेटवर्क का इस्तेमाल न करने से, हर नेविगेशन की रफ़्तार धीमी हो सकती है. इसका मतलब यह है कि यह भरोसेमंद तरीके से तेज़ नहीं होगी.

आर्किटेक्चर के लिए अलग-अलग तरीके

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

हालांकि, सभी के लिए एक ही तरीका कारगर नहीं होता, लेकिन नीचे दिए गए सामान्य दिशा-निर्देशों से आपको यह तय करने में मदद मिलेगी कि कौनसा तरीका सबसे कारगर है.

छोटी स्टैटिक साइटें

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

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

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

एक पेज वाले ऐप्लिकेशन

मॉडर्न वेब ऐप्लिकेशन में, एक पेज के आर्किटेक्चर का अक्सर इस्तेमाल किया जाता है. इसमें, क्लाइंट-साइड JavaScript उपयोगकर्ता की कार्रवाइयों के हिसाब से, एचटीएमएल में बदलाव करता है. यह मॉडल, मौजूदा यूआरएल में बदलाव करने के लिए इतिहास एपीआई का इस्तेमाल करता है. ऐसा तब होता है, जब उपयोगकर्ता वेब ऐप्लिकेशन के साथ इंटरैक्ट करता है. इससे "सिम्युलेट किया गया" नेविगेशन असरदार तरीके से काम करता है. हालांकि, बाद के नेविगेशन "फ़ेक" हो सकते हैं, लेकिन शुरुआती नेविगेशन, असली होता है. इसके बावजूद, यह पक्का करना ज़रूरी है कि इसे नेटवर्क पर ब्लॉक न किया गया हो.

अच्छी बात यह है कि अगर एक पेज वाले आर्किटेक्चर का इस्तेमाल किया जा रहा है, तो कैश मेमोरी से शुरुआती नेविगेशन शुरू करने के लिए एक आसान पैटर्न है: ऐप्लिकेशन शेल. इस मॉडल में, आपका सर्विस वर्कर, पहले से कैश की गई एक ही एचटीएमएल फ़ाइल को लौटाकर, नेविगेशन अनुरोधों का जवाब देता है—चाहे किसी भी यूआरएल का अनुरोध किया गया हो. यह एचटीएमएल बहुत छोटा होना चाहिए. इसमें पेज लोड होने का सामान्य इंडिकेटर या कंकाल का कॉन्टेंट शामिल होना चाहिए. ब्राउज़र, कैश मेमोरी से इस एचटीएमएल को लोड कर लेने के बाद, आपका मौजूदा क्लाइंट-साइड JavaScript ले लेता है और ओरिजनल नेविगेशन अनुरोध से, यूआरएल के लिए सही एचटीएमएल कॉन्टेंट को रेंडर करता है.

इस तरीके को लागू करने के लिए, Workbox से आपको ज़रूरी टूल मिलते हैं. navigateFallback option से यह तय किया जा सकता है कि ऐप्लिकेशन शेल के तौर पर किस एचटीएमएल दस्तावेज़ का इस्तेमाल किया जाए. साथ ही, इसकी मदद से अपने यूआरएल के सबसेट के लिए, 'अनुमति दें' और 'अस्वीकार करें' सूची भी दी जा सकती है.

कई पेज वाले ऐप्लिकेशन

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

हालांकि, कई पेज वाले ऐप्लिकेशन के कुछ खास सबसेट के लिए, शायद आप ऐसे सर्विस वर्कर को लागू कर पाएं जो एचटीएमएल जनरेट करने के लिए, आपके वेब सर्वर में इस्तेमाल किए गए लॉजिक को पूरी तरह कॉपी करता हो. यह तरीका तब सबसे अच्छी तरह से काम करता है, जब आप सर्वर और सर्विस वर्कर एनवायरमेंट के बीच रूटिंग और टेंप्लेट की जानकारी शेयर कर सकते हों. अगर आपका वेब सर्वर JavaScript का इस्तेमाल करता है, तो यह सुविधा सबसे अच्छी तरह काम करेगी. इसके लिए, फ़ाइल सिस्टम ऐक्सेस जैसी Node.js की खास सुविधाओं पर निर्भर रहना ज़रूरी नहीं है.

अगर आपका वेब सर्वर उस कैटगरी में आता है और आपको एचटीएमएल जनरेशन को नेटवर्क से बाहर और अपने सर्विस वर्कर में ले जाने का कोई तरीका एक्सप्लोर करना है, तो एसपीए के अलावा: आपके PWA के लिए अन्य आर्किटेक्चर में दिए गए दिशा-निर्देशों से भी आपको मदद मिल सकती है.

शेष सब कुछ

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

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

Unsplash पर ऐरन बर्डेन की फ़ोटो