مدیریت پاسخ های بازگشتی، مدیریت پاسخ های بازگشتی

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

بازگشتی یک پاسخ عمومی و یکسان است که مکان‌دار بهتری نسبت به آنچه مرورگر به‌طور پیش‌فرض در صورت شکست درخواست ارائه می‌دهد، است. چند نمونه عبارتند از:

• جایگزینی برای مکان‌دار «تصویر گمشده».
• یک جایگزین HTML برای صفحه استاندارد «بدون اتصال شبکه در دسترس است».

فقط صفحه آفلاین

اگر تنها کاری که باید انجام دهید این است که یک صفحه HTML آفلاین سفارشی ارائه دهید، اما هیچ چیز دیگری، در اینجا یک دستور اولیه وجود دارد که می توانید دنبال کنید:

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

کد بالا از setDefaultHandler برای استفاده از یک استراتژی فقط شبکه به عنوان پیش فرض برای همه مسیرها استفاده می کند. سپس دستور offlineFallback را اجرا می کند تا در صورت بروز خطا، نسخه بازگشتی آفلاین را ارائه کند. دستور غذا فرض می کند که فایل HTML آفلاین شما به نام offline.html خواهد بود و از ریشه وب سرور شما ارائه می شود.

بازگشت های جامع

هر زمان که خرابی شبکه یا از دست رفتن حافظه پنهان رخ دهد، استراتژی‌های ذخیره‌سازی ارائه شده توسط workbox-strategies به طور مداوم رد می‌شوند. این الگوی تنظیم یک کنترل کننده جهانی "گیر" را برای مقابله با هر گونه خرابی در یک تابع کنترل کننده ارتقا می دهد و به شما این امکان را می دهد که برای مقادیر request.destination . مقصد مختلف، بک گراندهای مختلف ارائه دهید.

مثال زیر از دستور warmStrategyCache از workbox-recipes استفاده می‌کند و یک کنترلر catch را تنظیم می‌کند تا آیتم‌های ذخیره‌شده قبل از زمان را در کش زمان اجرا ارائه دهد. با این حال، پیش‌کش‌های بازگشتی ممکن است برای برنامه شما مناسب‌تر باشد:

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

در این مرحله، پاسخ‌های بازگشتی با استفاده از injectManifest با ابزارهای ساخت Workbox از پیش ذخیره می‌شوند و در صورت بروز خطا در متد matchPrecache ، به عنوان بازگشتی استفاده می‌شوند.

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

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

گرم کردن کش زمان اجرا

Workbox حافظه های پنهان جداگانه ای را برای کش های پیش کش و زمان اجرا نگهداری می کند، و ممکن است شرایطی وجود داشته باشد که بخواهید چیزی را قبل از موعد بدون اتکا به پیش کش ذخیره کنید، زیرا به روز رسانی مانیفست پیش کش نیازمند استقرار یک سرویس کار به روز شده است.

برای پرایم کش زمان اجرا قبل از زمان با دارایی ها، می توانید با استفاده از دستور warmStrategyCache از workbox-recipes این کار را انجام دهید. در زیر سرپوش، این استراتژی Cache.addAll در رویداد install یک سرویسکار فراخوانی می کند.

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = [
  '/offline.html',
];

warmStrategyCache({urls, strategy});

نتیجه گیری

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