नेटवर्क-फ़र्स्ट एचटीएमएल के लिए, नेविगेशन प्रीलोड

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

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

नेविगेशन पहले से लोड करने की सुविधा डालें

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

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

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

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

Workbox में पहले से लोड किए गए नेविगेशन का इस्तेमाल करना

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

वर्कबॉक्स, नेविगेशन प्रीलोड का इस्तेमाल करके आसान बनाता है, क्योंकि workbox-navigation-preload मॉड्यूल का enable तरीका ज़रूरी सुविधा की जांच करता है. साथ ही, activate इवेंट लिसनर बनाता है, ताकि उसे आपके लिए चालू किया जा सके.

यहां से, काम करने वाले ब्राउज़र में नेविगेशन प्रीलोड के फ़ायदे देखे जा सकते हैं. इसके लिए, किसी नेटवर्क-फ़र्स्ट स्ट्रेटजी हैंडलर की मदद से नेविगेशन अनुरोधों को मैनेज करने के लिए Workbox का इस्तेमाल किया जा सकता है:

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';

// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);

// Enable navigation preload
navigationPreload.enable();

// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  cacheName: 'navigations'
}));

// Register the navigation route
registerRoute(navigationRoute);

// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
  return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
  cacheName: 'static-assets'
}));

// Register the route handling static assets
registerRoute(staticAssetsRoute);

नेविगेशन पहले से लोड करने की सुविधा चालू होने पर, Workbox उन नेविगेशन अनुरोधों को जवाब देगा जो पहले से लोड किए गए रिस्पॉन्स के साथ NetworkFirst या NetworkOnly रणनीतियों का इस्तेमाल करते हैं.

मुझे कैसे पता चलेगा कि नेविगेशन पहले से लोड करने की सुविधा काम कर रही है या नहीं?

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

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

पहले से लोड किए गए जवाबों को पसंद के मुताबिक बनाना

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

इस तरह के मामलों में, यह जानना ज़रूरी है कि पेजों को पहले से लोड करने के अनुरोध, Service-Worker-Navigation-Preload हेडर सेट के साथ भेजे जाते हैं. इस हेडर की डिफ़ॉल्ट वैल्यू true होती है:

Service-Worker-Navigation-Preload: true

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

नतीजा

सीधे नेविगेशन का इस्तेमाल करने पर, नेविगेशन को पहले से लोड करने की प्रोसेस का सही तरीके से इस्तेमाल करना मुश्किल होता है. हालांकि, यह पक्का करना ज़रूरी है कि कोई सर्विस वर्कर, ब्राउज़र को नेविगेशन के अनुरोध करने से रोके. Workbox की मदद से, आपको बहुत कम काम करने के बाद भी नेविगेशन प्रीलोड का फ़ायदा मिल सकता है. workbox-navigation-preload मॉड्यूल के बारे में ज़्यादा जानकारी पाने के लिए, इसका रेफ़रंस दस्तावेज़ देखें.