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

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

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

नेविगेशन प्रीलोड डालें

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

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

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

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

वर्कबॉक्स में नेविगेशन प्रीलोड का इस्तेमाल करना

ऐसे सर्विस वर्कर में सीधे तौर पर नेविगेशन पहले से लोड होने की सुविधा का इस्तेमाल करना मुश्किल होता है जो 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 इस बारे में बहुत ज़्यादा लॉग करता है कि यह क्या करता है. अगर आपको यह देखना है कि वर्कबॉक्स में, नेविगेशन को पहले से लोड करने की सुविधा काम कर रही है या नहीं, तो नेविगेशन के अनुरोध के दौरान, काम करने वाले ब्राउज़र में कंसोल खोलें. इससे आपको एक लॉग मैसेज दिखेगा. इसमें इसके बारे में ज़्यादा जानकारी दी जाएगी:

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

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

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

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

Service-Worker-Navigation-Preload: true

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

नतीजा

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