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