नेटवर्क के इंतज़ार किए बिना, नेविगेशन के अनुरोधों का जवाब देने के लिए, सेवा वर्कर का इस्तेमाल करें.
नेविगेशन अनुरोध, एचटीएमएल दस्तावेज़ों के लिए अनुरोध होते हैं. ये अनुरोध तब किए जाते हैं, जब नेविगेशन बार में कोई नया यूआरएल डाला जाता है या किसी पेज पर मौजूद लिंक पर क्लिक करके किसी नए यूआरएल पर पहुंचा जाता है. नेटवर्क के उपलब्ध न होने पर भी, नेविगेशन के काम करने की सुविधा को बेहतर बनाने के लिए, सर्विस वर्कर का इस्तेमाल किया जा सकता है. इससे, नेविगेशन के काम करने की सुविधा को भरोसेमंद और तेज़ बनाया जा सकता है. सर्विस वर्कर की मदद से, परफ़ॉर्मेंस में सबसे ज़्यादा सुधार होता है. यह एचटीटीपी कैश मेमोरी की तुलना में बेहतर होता है.
नेटवर्क से लोड किए गए संसाधनों की पहचान करना गाइड में बताया गया है कि नेविगेशन अनुरोध, नेटवर्क ट्रैफ़िक के "वॉटरफ़ॉल" में किए गए कई अनुरोधों में से पहला अनुरोध होता है. नेविगेशन अनुरोध के ज़रिए लोड किया गया एचटीएमएल, इमेज, स्क्रिप्ट, और स्टाइल जैसे सब-रिसॉर्स के लिए सभी अन्य अनुरोधों को शुरू करता है.
सेवा वर्कर के fetch इवेंट हैंडलर में, FetchEvent पर request.mode प्रॉपर्टी की जांच करके यह पता लगाया जा सकता है कि कोई अनुरोध नेविगेशन है या नहीं. अगर यह 'navigate' पर सेट है, तो इसका मतलब है कि यह नेविगेशन अनुरोध है.
आम तौर पर, नेविगेशन अनुरोध के लिए एचटीएमएल रिस्पॉन्स को कैश मेमोरी में सेव करने के लिए, लंबे समय तक काम करने वाले Cache-Control headers का इस्तेमाल न करें. आम तौर पर, इन्हें नेटवर्क के ज़रिए Cache-Control: no-cache के साथ पूरा किया जाना चाहिए. इससे यह पक्का किया जा सकता है कि एचटीएमएल और नेटवर्क के बाद के अनुरोधों की चेन, (काफ़ी हद तक) अप-टू-डेट है. जब भी उपयोगकर्ता किसी नए पेज पर जाता है, तो इंटरनेट की स्पीड कम हो जाती है. इसका मतलब है कि हर नेविगेशन धीमा हो सकता है. कम से कम, इसका मतलब है कि यह भरोसेमंद तरीके से तेज़ नहीं होगा.
आर्किटेक्चर के लिए अलग-अलग तरीके
नेटवर्क का इस्तेमाल किए बिना, नेविगेशन अनुरोधों का जवाब देने का तरीका पता लगाना मुश्किल हो सकता है. सही तरीका, आपकी वेबसाइट के आर्किटेक्चर और उन यूनीक यूआरएल की संख्या पर बहुत ज़्यादा निर्भर करता है जिन पर उपयोगकर्ता नेविगेट कर सकते हैं.
हर समस्या का एक ही समाधान नहीं होता. हालांकि, यहां दिए गए सामान्य दिशा-निर्देशों से आपको यह तय करने में मदद मिलेगी कि कौनसा तरीका सबसे सही है.
छोटी स्टैटिक साइटें
अगर आपके वेब ऐप्लिकेशन में कुछ ही यूनीक यूआरएल (जैसे: कुछ दर्जन) हैं और उनमें से हर यूआरएल, किसी अलग स्टैटिक एचटीएमएल फ़ाइल से जुड़ा है, तो एक अच्छा तरीका यह है कि उन सभी एचटीएमएल फ़ाइलों को कैश मेमोरी में सेव कर लें. इसके बाद, कैश मेमोरी में सेव किए गए एचटीएमएल का इस्तेमाल करके, नेविगेशन के अनुरोधों का जवाब दें.
पहले से कैश मेमोरी में सेव करना सुविधा का इस्तेमाल करके, सेवा वर्कर के इंस्टॉल होने के तुरंत बाद, एचटीएमएल को पहले से कैश मेमोरी में सेव किया जा सकता है. साथ ही, अपनी साइट को फिर से बनाने और सेवा वर्कर को फिर से डिप्लॉय करने पर, कैश मेमोरी में सेव किए गए एचटीएमएल को अपडेट किया जा सकता है.
इसके अलावा, अगर आपको अपने सभी एचटीएमएल को पहले से कैश मेमोरी में सेव करने से बचना है, तो कैश मेमोरी में सेव किए गए डेटा की पुष्टि करते समय, उसे अपडेट किया जा रहा है रनटाइम कैश मेमोरी सेव करने की रणनीति का इस्तेमाल किया जा सकता है. ऐसा इसलिए, क्योंकि हो सकता है कि उपयोगकर्ता आपकी साइट पर सिर्फ़ कुछ यूआरएल पर जाएं. हालांकि, इस तरीके का इस्तेमाल करते समय सावधानी बरतें, क्योंकि हर एचटीएमएल दस्तावेज़ को अलग से कैश मेमोरी में सेव किया जाता है और अपडेट किया जाता है. एचटीएमएल के लिए रनटाइम कैश मेमोरी का इस्तेमाल तब करना सबसे सही होता है, जब आपके पास ऐसे यूआरएल की संख्या कम हो जिन्हें उपयोगकर्ताओं के एक ही ग्रुप ने बार-बार ऐक्सेस किया हो. साथ ही, आपको यह भी पता हो कि उन यूआरएल की पुष्टि अलग-अलग की जा सकती है.
एक पेज वाले ऐप्लिकेशन
मॉडर्न वेब ऐप्लिकेशन में, एक पेज वाले आर्किटेक्चर का अक्सर इस्तेमाल किया जाता है. इसमें, क्लाइंट-साइड JavaScript, उपयोगकर्ता की कार्रवाइयों के जवाब में एचटीएमएल में बदलाव करता है. यह मॉडल, इतिहास एपीआई का इस्तेमाल करके, मौजूदा यूआरएल में बदलाव करता है. ऐसा तब होता है, जब उपयोगकर्ता वेब ऐप्लिकेशन के साथ इंटरैक्ट करता है. इससे, "सिमुलेटेड" नेविगेशन का असर होता है. हालांकि, इसके बाद के नेविगेशन "नकली" हो सकते हैं, लेकिन शुरुआती नेविगेशन असली होता है. इसलिए, यह पक्का करना ज़रूरी है कि नेटवर्क पर इसे ब्लॉक न किया गया हो.
अगर सिंगल-पेज आर्किटेक्चर का इस्तेमाल किया जा रहा है, तो कैश मेमोरी से शुरुआती नेविगेशन दिखाने के लिए, एक आसान पैटर्न का पालन किया जा सकता है: ऐप्लिकेशन शेल. इस मॉडल में, आपका सेवा वर्कर नेविगेशन के अनुरोधों का जवाब, पहले से कैश मेमोरी में सेव की गई एक ही एचटीएमएल फ़ाइल दिखाकर देता है. भले ही, अनुरोध किसी भी यूआरएल के लिए किया गया हो. यह एचटीएमएल बहुत ही कम जानकारी वाला होना चाहिए. इसमें, शायद लोडिंग का सामान्य इंडिकेटर या स्केलेटन कॉन्टेंट शामिल हो. जब ब्राउज़र, कैश मेमोरी से यह एचटीएमएल लोड कर लेता है, तो आपका मौजूदा क्लाइंट-साइड JavaScript काम करना शुरू कर देता है. साथ ही, मूल नेविगेशन अनुरोध से यूआरएल के लिए सही एचटीएमएल कॉन्टेंट को रेंडर करता है.
Workbox, इस तरीके को लागू करने के लिए ज़रूरी टूल उपलब्ध कराता है. navigateFallback
option के ज़रिए, यह तय किया जा सकता है कि ऐप्लिकेशन के शेल के तौर पर किस एचटीएमएल दस्तावेज़ का इस्तेमाल करना है. साथ ही, इस व्यवहार को अपने यूआरएल के सबसेट तक सीमित करने के लिए, अनुमति और पाबंदी वाली सूची भी बनाई जा सकती है.
एक से ज़्यादा पेजों वाले ऐप्लिकेशन
अगर आपका वेब सर्वर आपकी साइट का एचटीएमएल डाइनैमिक तौर पर जनरेट करता है या आपके पास कुछ दर्जन से ज़्यादा यूनीक पेज हैं, तो नेविगेशन अनुरोधों को मैनेज करते समय नेटवर्क का इस्तेमाल न करना बहुत मुश्किल होता है. अन्य सभी सेक्शन में दी गई सलाह आपके लिए काम की हो सकती है.
हालांकि, कई पेजों वाले ऐप्लिकेशन के किसी खास सबसेट के लिए, ऐसा सर्विस वर्कर लागू किया जा सकता है जो एचटीएमएल जनरेट करने के लिए, आपके वेब सर्वर में इस्तेमाल किए गए लॉजिक को पूरी तरह से दोहराता हो. यह सबसे बेहतर तरीके से तब काम करता है, जब आपके पास सर्वर और सेवा वर्कर के एनवायरमेंट के बीच, रूटिंग और टेंप्लेट बनाने से जुड़ी जानकारी शेयर करने का विकल्प हो. खास तौर पर, अगर आपका वेब सर्वर, फ़ाइल सिस्टम ऐक्सेस जैसी Node.js की खास सुविधाओं के बजाय, JavaScript का इस्तेमाल करता है.
अगर आपका वेब सर्वर इस कैटगरी में आता है और आपको एचटीएमएल जनरेशन को नेटवर्क से हटाकर, अपने सेवा वर्कर में ले जाने का कोई तरीका आज़माना है, तो एसपीए के अलावा: आपके पीडब्ल्यूए के लिए अन्य आर्किटेक्चर में दिए गए दिशा-निर्देशों की मदद से शुरुआत की जा सकती है.
शेष सब कुछ
अगर कैश मेमोरी में सेव किए गए एचटीएमएल की मदद से, नेविगेशन के अनुरोधों का जवाब नहीं दिया जा सकता, तो आपको यह पक्का करना होगा कि आपकी साइट पर सेवा वर्कर जोड़ने (अन्य, एचटीएमएल के अलावा के अनुरोधों को मैनेज करने के लिए) से, नेविगेशन की प्रोसेस धीमी न हो जाए. नेविगेशन अनुरोध का जवाब देने के लिए, सर्विस वर्कर का इस्तेमाल किए बिना उसे शुरू करने पर, थोड़ी देरी होगी. इस बारे में सर्विस वर्कर की मदद से तेज़ और ज़्यादा मज़बूत ऐप्लिकेशन बनाना लेख में बताया गया है. नेविगेशन पेज को पहले से लोड करने की सुविधा चालू करके, इस ओवरहेड को कम किया जा सकता है. इसके बाद, fetch इवेंट हैंडलर में पहले से लोड किए गए नेटवर्क रिस्पॉन्स का इस्तेमाल किया जा सकता है.
Workbox, एक हेल्पर लाइब्रेरी उपलब्ध कराता है. इसकी मदद से, यह पता लगाया जा सकता है कि नेविगेशन प्रीलोड की सुविधा काम करती है या नहीं. अगर यह सुविधा काम करती है, तो अपने सर्विस वर्कर को नेटवर्क रिस्पॉन्स का इस्तेमाल करने के लिए कहने की प्रोसेस को आसान बनाता है.
Unsplash पर आरोन बर्डन की फ़ोटो