Workbox-navigation-preload

يؤدي الخيار "تسريع عامل الخدمة باستخدام التحميلات المسبقة للتنقل" عملاً رائعًا في توضيح ماهية التحميل المسبق للتنقل، والمزايا التي يقدّمها لتطبيقات الويب التي لا يتعامل عامل الخدمة فيها بشكل صريح مع طلبات التنقّل.

ما وظيفة هذه الوحدة؟

سيعالج workbox-navigation-preload عملية الفحص في وقت التشغيل لمعرفة ما إذا كان المتصفّح الحالي يتيح التحميل المُسبق للتنقّل، وفي حال توافقه، سينشئ تلقائيًا معالج أحداث activate لتفعيله.

تم أيضًا تعديل الرمز المشترك داخل workbox-core والذي يعالج إجراء طلبات الشبكة في جميع ميزات Workbox، وذلك للاستفادة تلقائيًا من استجابة التحميل المُسبق في حال توفّرها. وهذا يعني أنّ أيًا من الاستراتيجيات المضمَّنة يمكن أن يستفيد تلقائيًا من ميزة التحميل المُسبق للتنقّل بعد تفعيلها.

مَن الذي عليه تفعيل عمليات التحميل المُسبق للتنقّل؟

إنّ المطوّرين الذين يتعاملون من قبل مع عمليات الانتقال من خلال الاستجابة باستخدام رمز HTML مخزَّن مؤقتًا مسبقًا (يمكن ضبطها باستخدام عنصر احتياطي لتطبيق App Shell) لا يحتاجون إلى تفعيل التحميل المُسبق للتنقّل. تم تصميم هذه الميزة لتقليل وقت استجابة التنقل للمطورين الذين لا يستطيعون التخزين المؤقت لمحتوى 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);

ما هي قصة دعم المتصفح؟

في الوقت الحالي، إنّ Google Chrome هو المتصفّح الوحيد الذي يدعم التحميل المُسبق للتنقّل. سيتحقق enable() من التوافق مع المتصفّح في وقت التشغيل، ولن يحاول تفعيل التحميل المُسبق للتنقّل إلا إذا كان المتصفّح الحالي يتيح ذلك. وبالتالي، من الآمن الاتصال بخدمة enable() بدون أي شروط في مشغّل الخدمات.

عليك أن تدرك أنّ هذه المتصفّحات لن تستفيد من تقليل وقت استجابة التنقّل، وننصحك بقياس الآثار المترتبة على شحن رسوم مشغّل خدمات لا يعالج طلبات التنقّل ولا يستخدم التحميل المُسبق للتنقل.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()