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

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

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

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

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

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

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

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

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

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

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

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

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 الكثير حول وظائفها. إذا كنت تريد التحقق مما إذا كان التحميل المسبق للتنقل يعمل في Workbox، فافتح وحدة التحكم في متصفح متوافق أثناء طلب التنقل، وسترى رسالة سجلّ مفادها:

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

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

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

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

Service-Worker-Navigation-Preload: true

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

الخلاصة

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