اجباری مهلت زمانی شبکه، اجباری مهلت زمانی شبکه

مواقعی وجود دارد که اتصال شبکه دارید، اما این اتصال یا خیلی کند است، یا اتصال شما به شما دروغ می گوید که آنلاین هستید . در چنین شرایطی که یک سرویس‌دهنده در ترکیب است، استراتژی ذخیره‌سازی اول شبکه ممکن است برای دریافت پاسخ از شبکه خیلی طول بکشد، یا درخواست متوقف می‌شود - و بارگیری اسپینرها بی‌پایان می‌چرخند - تا زمانی که صفحه خطا دریافت کنید.

وضعیت هر چه که باشد، مواردی وجود دارد که در آن بازگشت به آخرین پاسخ ذخیره شده در حافظه پنهان برای یک دارایی یا صفحه پس از مدت زمان معین ترجیح داده می شود - مشکل دیگری که 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);

کد بالا به کارمند خدمات شما دستور می دهد تا درخواست ناوبری اولین شبکه را نجات دهد و پس از سه ثانیه از آخرین نسخه کش استفاده کند. هنگامی که با درخواست‌های ناوبری استفاده می‌شود، دسترسی به آخرین پاسخ ذخیره‌شده هر صفحه‌ای که قبلاً بازدید شده است را تضمین می‌کند.

با این حال، اگر صفحه ای که به آن دسترسی دارید پاسخ قدیمی تری در حافظه پنهان نداشته باشد، چه؟ در چنین مواردی، می‌توانید یک پاسخ بازگشتی به یک صفحه 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));

این کار به این دلیل کار می‌کند که وقتی networkTimeoutSeconds در استراتژی NetworkFirst استفاده می‌کنید، اگر مهلت زمانی رخ دهد و تطبیق حافظه پنهان برای URL وجود نداشته باشد، کنترل‌کننده شما یک پاسخ خطا را برمی‌گرداند. اگر این اتفاق بیفتد، افزونه handlerDidError Workbox می تواند یک پاسخ عمومی را به عنوان یک بازگشت ارائه دهد.

چه مدت برای انتظار طولانی است؟

هنگامی که برای درخواست‌ها - به ویژه درخواست‌های ناوبری - مهلت می‌گیرید، می‌خواهید تعادل درستی بین این‌که اجازه ندهید کاربر برای مدت طولانی منتظر بماند و زمان‌بندی خیلی سریع به پایان نرسد، ایجاد کنید. بیش از حد طولانی صبر کنید، و ممکن است پیش از اتمام مهلت زمانی، خطر بازگشت کاربرانی که در اتصالات آهسته هستند وجود داشته باشد. مهلت زمانی خیلی سریع به پایان می رسد، و ممکن است به طور غیر ضروری محتوای قدیمی را از حافظه پنهان ارائه دهید.

پاسخ درست «بستگی دارد» است. اگر سایتی مانند وبلاگ را راه‌اندازی می‌کنید و اغلب محتوا را به‌روزرسانی نمی‌کنید، احتمالاً پاسخ درست این است که زیاد منتظر نباشید، زیرا هر آنچه در حافظه پنهان است احتمالاً به اندازه کافی «تازه» است. با این حال، برای وب‌سایت‌ها و برنامه‌های وب تعاملی‌تر، ممکن است بهتر باشد کمی بیشتر صبر کنید و از ارائه بیش از حد مشتاقانه داده‌های قدیمی از کش سرویس‌کار اجتناب کنید.

اگر معیارهایی را در این زمینه ثبت می‌کنید، به صدک 75 ام امتیازات Time to First Byte (TTFB) و First Contentful Paint (FCP) نگاه کنید تا متوجه شوید که زمان انتظار طولانی‌تر برای درخواست‌های ناوبری ممکن است در بین پایگاه کاربران شما باشد. این ممکن است به شما بینشی در مورد اینکه کجا خط بکشید به شما بدهد.