नेटवर्क से टाइम आउट लेना

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

स्थिति चाहे जो भी हो, कभी-कभी कुछ मामलों में, किसी एसेट या पेज के लिए, कैश मेमोरी में सेव किए गए पिछले रिस्पॉन्स को एक तय समय के बाद बेहतर माना जाता है. हालांकि, यह एक और समस्या है, जिसमें Workbox मदद कर सकता है.

networkTimeoutSeconds का इस्तेमाल करना

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

// sw.js
import { NetworkFirst } from 'workbox-strategies';
import { registerRoute, NavigationRoute } from 'workbox-routing';

// Only wait for three seconds before returning the last
// cached version of the requested page.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  networkTimeoutSeconds: 3,
  cacheName: 'navigations'
}));

registerRoute(navigationRoute);

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

हालांकि, अगर ऐक्सेस किए जा रहे पेज की कैश मेमोरी में कोई पुराना जवाब नहीं मिलता है, तो क्या होगा? इस तरह के मामलों में, आप किसी सामान्य ऑफ़लाइन एचटीएमएल पेज के लिए फ़ॉलबैक रिस्पॉन्स बना सकते हैं:

import {registerRoute, NavigationRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

// Hardcode the fallback cache name and the offline
// HTML fallback's URL for failed responses
const FALLBACK_CACHE_NAME = 'offline-fallback';
const FALLBACK_HTML = '/offline.html';

// Cache the fallback HTML during installation.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(FALLBACK_CACHE_NAME).then((cache) => cache.add(FALLBACK_HTML)),
  );
});

// Apply a network-only strategy to navigation requests.
// If offline, or if more than five seconds pass before there's a
// network response, fall back to the cached offline HTML.
const networkWithFallbackStrategy = new NetworkOnly({
  networkTimeoutSeconds: 5,
  plugins: [
    {
      handlerDidError: async () => {
        return await caches.match(FALLBACK_HTML, {
          cacheName: FALLBACK_CACHE_NAME,
        });
      },
    },
  ],
});

// Register the route to handle all navigations.
registerRoute(new NavigationRoute(networkWithFallbackStrategy));

यह इसलिए काम करता है क्योंकि जब आप NetworkFirst कार्यनीति में networkTimeoutSeconds का उपयोग करते हैं, तो अगर टाइम आउट होता है और URL के लिए कोई कैश मिलान नहीं होता है, तो आपका हैंडलर गड़बड़ी प्रतिक्रिया देगा. अगर ऐसा होता है, तो handlerDidError Workbox प्लगिन से फ़ॉलबैक के तौर पर सामान्य रिस्पॉन्स मिल सकता है.

इंतज़ार करने में कितना समय लगता है?

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

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

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