জোর করে একটি নেটওয়ার্ক টাইমআউট, জোর করে একটি নেটওয়ার্ক টাইমআউট

এমন সময় আছে যখন আপনার একটি নেটওয়ার্ক সংযোগ থাকে, কিন্তু সেই সংযোগটি হয় খুব ধীর, অথবা আপনার সংযোগটি আপনাকে মিথ্যা বলছে যে আপনি অনলাইনে আছেন ৷ এমন পরিস্থিতিতে যেখানে একজন পরিষেবা কর্মী সংমিশ্রণে থাকে, একটি নেটওয়ার্ক-প্রথম ক্যাশিং কৌশলটি নেটওয়ার্ক থেকে প্রতিক্রিয়া পেতে খুব বেশি সময় নিতে পারে, অথবা অনুরোধটি হ্যাং হয়ে যাবে-এবং লোডিং স্পিনারগুলি অবিরামভাবে ঘুরবে-যতক্ষণ না আপনি একটি ত্রুটি পৃষ্ঠা না পান।

পরিস্থিতি যাই হোক না কেন, এমন কিছু উদাহরণ রয়েছে যেখানে একটি নির্দিষ্ট সময়ের পরে একটি সম্পত্তি বা পৃষ্ঠার জন্য শেষ ক্যাশড প্রতিক্রিয়াতে ফিরে যাওয়া বাঞ্ছনীয় হবে—এখনও আরেকটি সমস্যা যা ওয়ার্কবক্স সাহায্য করতে পারে।

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);

উপরের কোডটি আপনার পরিষেবা কর্মীকে যেকোন নেটওয়ার্ক-প্রথম নেভিগেশন অনুরোধে বেইল আউট করতে এবং তিন সেকেন্ড পরে শেষ ক্যাশে করা সংস্করণ ব্যবহার করার নির্দেশ দেয়। যখন নেভিগেশন অনুরোধের সাথে ব্যবহার করা হয়, এটি পূর্বে পরিদর্শন করা কোনো পৃষ্ঠার শেষ ক্যাশড প্রতিক্রিয়া অ্যাক্সেসের নিশ্চয়তা দেয়।

যাইহোক, আপনি যে পৃষ্ঠাটি অ্যাক্সেস করছেন তার ক্যাশে পুরানো প্রতিক্রিয়া না থাকলে কী হবে? এই ধরনের ক্ষেত্রে, আপনি একটি সাধারণ অফলাইন HTML পৃষ্ঠায় একটি ফলব্যাক প্রতিক্রিয়া স্থাপন করতে পারেন:

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 ওয়ার্কবক্স প্লাগইন ফলব্যাক হিসাবে একটি সাধারণ প্রতিক্রিয়া প্রদান করতে পারে।

আর কতক্ষণ অপেক্ষা করতে হবে?

অনুরোধের জন্য একটি টাইমআউট বাধ্য করার সময়—বিশেষ করে নেভিগেশন অনুরোধগুলি—আপনি ব্যবহারকারীকে খুব বেশিক্ষণ অপেক্ষা করতে না দেওয়া এবং খুব দ্রুত সময় শেষ না করার মধ্যে সঠিক ভারসাম্য বজায় রাখতে চান৷ খুব দীর্ঘ অপেক্ষা করুন, এবং আপনি সময় শেষ হওয়ার আগে ধীর সংযোগে ব্যবহারকারীদের বাউন্স হওয়ার ঝুঁকি নিতে পারেন। সময়সীমা খুব দ্রুত, এবং আপনি অপ্রয়োজনীয়ভাবে ক্যাশে থেকে পুরানো সামগ্রী পরিবেশন করতে পারেন।

সঠিক উত্তর হল "এটা নির্ভর করে"। আপনি যদি একটি ব্লগের মতো একটি সাইট চালান এবং খুব ঘন ঘন কন্টেন্ট আপডেট না করেন, তবে সঠিক উত্তরটি সম্ভবত খুব বেশি অপেক্ষা না করার পক্ষে ভুল করা, কারণ ক্যাশে যা আছে তা সম্ভবত যথেষ্ট "তাজা"। যাইহোক, আরও ইন্টারেক্টিভ ওয়েবসাইট এবং ওয়েব অ্যাপের জন্য, একটু বেশি সময় অপেক্ষা করা এবং পরিষেবা কর্মী ক্যাশে থেকে বাসি ডেটা খুব আগ্রহের সাথে পরিবেশন করা এড়াতে ভাল হতে পারে।

আপনি যদি ফিল্ডে মেট্রিক্স রেকর্ড করছেন, তাহলে টাইম টু ফার্স্ট বাইট (TTFB) এবং ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) স্কোরের 75 তম পার্সেন্টাইল দেখুন যেখানে আপনার ব্যবহারকারী বেসের মধ্যে নেভিগেশন অনুরোধের জন্য অপেক্ষা করার সময় বেশি হতে পারে। এটি আপনাকে লাইনটি কোথায় আঁকতে হবে সে সম্পর্কে অন্তর্দৃষ্টি দিতে পারে।