वर्कबॉक्स-नेविगेशन-प्रीलोड

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

यह मॉड्यूल क्या करता है?

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

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

नेविगेशन को पहले से लोड करने की सुविधा किसे चालू करनी चाहिए?

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

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

बुनियादी इस्तेमाल

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

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

ब्राउज़र से जुड़ी सहायता की कहानी क्या है?

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

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

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()