workbox-navigation-preload

" Speed ​​Up Service Worker with Navigation Preloads " به خوبی توضیح می دهد که پیش بارگذاری ناوبری چیست، و مزایایی را که برای برنامه های وب ارائه می دهد که کارگر سرویس به طور واضح درخواست های ناوبری را رسیدگی نمی کند.

این ماژول چه کاری انجام می دهد؟

workbox-navigation-preload در زمان اجرا بررسی می‌کند تا ببیند آیا مرورگر فعلی از پیش‌بارگذاری ناوبری پشتیبانی می‌کند یا خیر، و اگر پشتیبانی می‌کند، به‌طور خودکار یک کنترل‌کننده رویداد activate می‌کند تا آن را فعال کند.

کد اشتراک‌گذاری شده درون workbox-core که درخواست‌های شبکه را در تمام Workbox انجام می‌دهد نیز به‌روزرسانی شده است تا در صورت موجود بودن، از پاسخ پیش‌بارگذاری به‌طور خودکار استفاده کند. این بدان معناست که هر یک از استراتژی‌های داخلی می‌تواند به‌طور خودکار از پیش‌بارگذاری ناوبری، پس از فعال شدن، استفاده کند.

چه کسی باید پیش بارگیری ناوبری را فعال کند؟

توسعه دهندگانی که در حال حاضر با پاسخ دادن به HTML پیش کش (که به طور بالقوه با نسخه بازگشتی پوسته برنامه پیکربندی شده است) پیمایش ها را مدیریت می کنند، نیازی به فعال کردن پیش بارگذاری ناوبری ندارند! این ویژگی برای کاهش تأخیر ناوبری برای توسعه‌دهندگانی است که نمی‌توانند HTML خود را از پیش ذخیره کنند، اما همچنان می‌خواهند از Workbox برای مدیریت ذخیره‌سازی سایر دارایی‌ها در سایت‌های خود استفاده کنند.

به عنوان مثال، اگر از الگوی App Shell پیروی می کنید و یک مسیر پیمایش را از قبل برای استفاده از HTML پیش کش تنظیم کرده اید، فعال کردن پیش بارگذاری ناوبری بیهوده خواهد بود. پاسخ شبکه ای که با درخواست پیش بارگذاری مرتبط است هرگز استفاده نمی شود، زیرا HTML پیش کش بدون قید و شرط استفاده خواهد شد.

استفاده پایه

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

داستان پشتیبانی مرورگر چیست؟

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

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

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()