التحميل المسبق للتنقل في محتوى HTML للشبكة أولاً

عندما يتعامل عامل الخدمة مع أحداث fetch، ينتظر المتصفّح رد عامل الخدمة. وعلى الرغم من أنّ وقت استجابة طلب الشبكة يشكِّل جزءًا كبيرًا من الانتظار، قد يحتاج المتصفّح أيضًا إلى انتظار تشغيل عامل الخدمة وتنشيط عمليات استدعاء أحداث fetch.

يختلف وقت تشغيل الجهاز حسب الجهاز وإمكانياته، إلا أنّ الوقت المستغرق يمكن أن يكون كبيرًا، وقد يصل أحيانًا إلى نصف ثانية عندما تكون وحدة المعالجة المركزية بطيئة أو تعمل في حالة تقييد بسبب الظروف المحيطة. ومن المرجح أن يكون تحسين الأداء الناتج عن تجنُّب الشبكة أكثر من وقت بدء التشغيل هذا عند عرض استجابات التنقّل من مثيل Cache. بالنسبة إلى طلبات التنقل التي تصل إلى الشبكة، يمكن أن يؤدي تقديم عامل خدمة إلى حدوث تأخير ملحوظ.

الدخول إلى التحميل المُسبق للتنقّل

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

وهذا ليس مثاليًا، ولكن يمكنك إصلاحه من خلال تفعيل التحميل المسبق للتنقل، والذي يضمن تشغيل مشغّل الخدمة وحدوث طلب التنقّل بالتزامن:

على الرغم من أن التحميل المسبق للتنقل يُعد تحسينًا رائعًا لأداء المواقع الإلكترونية التي تستخدم عاملي الخدمة، إلا أنه ليس ميزة يجب تفعيلها في جميع الحالات. وعلى وجه الخصوص، لا تحتاج المواقع الإلكترونية التي تستخدم هيكل تطبيق مخزَّن مؤقتًا إلى إجراء تحميل مسبق للتنقّل، لأنّ ذاكرة التخزين المؤقت تعرض طلب التنقّل لترميز هيكل التطبيق بدون أي وقت استجابة للتنقّل. في هذه الحالات، ستُهدر الاستجابة المحمَّلة مسبقًا، وهذا ليس إجراءً جيدًا.

أفضل وقت لاستخدام التحميل المُسبق للتنقّل هو عندما يتعذّر على الموقع الإلكتروني تخزين محتوى HTML مؤقتًا. فكِّر في المواقع الإلكترونية التي تكون فيها الردود الترميزية ديناميكية وتختلف حسب عناصر مثل حالة المصادقة. وقد تستخدم طلبات التنقل لهذه العناصر استراتيجية على الشبكة أولاً (أو حتى على الشبكة فقط)، وهنا يمكن أن يُحدث التحميل المسبق للتنقل فارقًا كبيرًا.

استخدام التحميل المسبق للتنقل في Workbox

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

يبسّط تطبيق Workbox استخدام التحميل المسبق للتنقّل، لأنّ طريقة enable في وحدة workbox-navigation-preload تُجري عمليات التحقّق اللازمة لدعم الميزات، بالإضافة إلى إنشاء أداة معالجة الأحداث activate لتفعيلها لك.

ومن هنا، تظهر فوائد التحميل المسبق للتنقل في المتصفحات المتوافقة من خلال استخدام "مربع العمل" لمعالجة طلبات التنقل باستخدام معالج استراتيجية الشبكة أولاً:

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';

// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);

// Enable navigation preload
navigationPreload.enable();

// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  cacheName: 'navigations'
}));

// Register the navigation route
registerRoute(navigationRoute);

// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
  return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
  cacheName: 'static-assets'
}));

// Register the route handling static assets
registerRoute(staticAssetsRoute);

عند تفعيل التحميل المُسبق للتنقّل، سيستجيب تطبيق Workbox لطلبات التنقّل التي تستخدِم الاستراتيجيتَين NetworkFirst أو NetworkOnly مع الاستجابة المحمَّلة مسبقًا.

تحذير: في حال عدم تسجيل مسار للتعامل مع الاستجابة المُحمَّلة مسبقًا باستخدام استراتيجية تركّز على الشبكة أولاً (أو حتى شبكة فقط)، لن يتم استخدام الاستجابة المُحمَّلة مسبقًا.

كيف يمكنني معرفة ما إذا كان التحميل المسبق للتنقل يعمل؟

في بُنى التطوير، يسجّل Workbox الكثير من المعلومات حول عمله. إذا كنت تريد التحقّق ممّا إذا كان التحميل المُسبق للتنقّل يعمل في "مربّع العمل"، افتح وحدة التحكّم في متصفّح داعم أثناء طلب التنقّل وستظهر لك رسالة سجلّ تتضمن ما يلي:

لن يكون هذا التسجيل مرئيًا في إصدارات الإنتاج بشكل تلقائي، لذا لن يظهر لك عند نشر مشغّل الخدمات في قناة الإصدار العلني، ولكنها طريقة رائعة للتأكّد من عمل التحميل المسبق للتنقّل (من بين أمور أخرى).

تخصيص الردود المُحمَّلة مسبقًا

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

وفي مثل هذه الحالات، من المفيد معرفة أنّ طلبات التحميل المُسبق يتم إرسالها باستخدام عنوان Service-Worker-Navigation-Preload مع قيمة تلقائية true:

Service-Worker-Navigation-Preload: true

بعد ذلك، في الخلفية التي تختارها للتطبيق، يمكنك التحقق من هذا العنوان وتعديل الرد لتناسب احتياجاتك. إذا كانت القيمة التلقائية للعنوان تمثل مشكلة لأي سبب من الأسباب، يمكنك تغييرها في سياق النافذة. فقط اعلم أن أي عمل تقوم به على الخادم لقراءة هذا العنوان متروك لك، وخارج نطاق Workbox.

الخاتمة

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