تجارب التنقّل الفوري

استكمال أساليب الجلب المسبق التقليدية مع عاملي الخدمة.

Demián Renzulli

Gilberto Cocchi

Jeff Posnick

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

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

ولتسريع هذه الطلبات، إذا تمكنت من توقع الإجراء الذي يتخذه المستخدم، يمكنك طلب هذه الصفحات ومواد العرض مسبقًا والاحتفاظ بها في ذاكرة التخزين المؤقت لفترة زمنية قصيرة إلى أن ينقر المستخدم على هذه الروابط. تُسمّى هذه التقنية prefetching، ويتم تنفيذها عادةً من خلال إضافة علامات <link rel="prefetch"> إلى الصفحات، ما يشير إلى المورد الذي يجب جلبه مسبقًا.

سوف نستكشف في هذا الدليل الطرق المختلفة التي يمكن من خلالها استخدام عاملي الخدمات كمكملين للتقنيات التقليدية للجلب المسبق.

حالات الإنتاج

MercadoLibre هو أكبر موقع للتجارة الإلكترونية في أمريكا اللاتينية. لتسريع عمليات التنقّل، يتم إدخال علامات <link rel="prefetch"> ديناميكيًا في بعض أجزاء المسار. على سبيل المثال، في صفحات البيانات، تجلب هذه البيانات صفحة النتائج التالية عندما ينتقل المستخدم إلى أسفل القائمة:

يتم طلب الملفات التي تم جلبها مسبقًا على "الأدنى". يتم تخزينه في ذاكرة التخزين المؤقت لـ HTTP أو ذاكرة التخزين المؤقت للذاكرة (بناءً على ما إذا كان المورد قابلاً للتخزين المؤقت أم لا)، لمدة تختلف حسب المتصفحات. على سبيل المثال، اعتبارًا من الإصدار 85 من Chrome، تكون هذه القيمة 5 دقائق. يتم الاحتفاظ بالموارد لمدة خمس دقائق، وبعدها يتم تطبيق قواعد Cache-Control العادية الخاصة بالمورد.

ويمكن أن يساعدك استخدام التخزين المؤقت لمشغّل الخدمات في تمديد فترة موارد الجلب المُسبَق إلى ما بعد فترة الخمس دقائق.

على سبيل المثال، تستخدم البوابة الرياضية الإيطالية Virgilio Sport عاملي الخدمات لجلب المشاركات الأكثر رواجًا مسبقًا إلى صفحاتهم الرئيسية. ويستخدمون أيضًا Network Information API لتجنب الجلب المسبق للمستخدمين الذين يتصلون بشبكة الجيل الثاني.

ونتيجة لذلك، فإن أكثر من 3 أسابيع من الملاحظة لـ Virgilio Sport شهدت أوقات تحميل للتنقل إلى المقالات 78%، وزيادة عدد مرات ظهور المقالات 45%.

تنفيذ التخزين المؤقت باستخدام Workbox

في القسم التالي، سنستخدم Workbox لتوضيح كيفية تنفيذ تقنيات التخزين المؤقت المختلفة في مشغّل الخدمات والتي يمكن استخدامها كتكملة لتطبيق <link rel="prefetch"> أو حتى كبديل له، وذلك من خلال تفويض هذه المهمة بالكامل إلى مشغّل الخدمات.

1. التخزين المؤقت للصفحات الثابتة والموارد الفرعية للصفحات

التخزين المؤقت هي قدرة عامل الخدمة على حفظ الملفات في ذاكرة التخزين المؤقت أثناء تثبيتها.

في الحالات التالية، يتم استخدام التخزين المسبق لتحقيق هدف مشابه لهدف الجلب المسبق: وهو تسريع عمليات التنقل.

التحميل المسبق للصفحات الثابتة

بالنسبة إلى الصفحات التي يتم إنشاؤها في وقت الإصدار (مثل about.html أو contact.html) أو في مواقع إلكترونية ثابتة تمامًا، يمكن إضافة مستندات الموقع الإلكتروني إلى قائمة ذاكرة التخزين المؤقت، كي تصبح متاحة في ذاكرة التخزين المؤقت في كل مرة يصل فيها المستخدم إليها:

workbox.precaching.precacheAndRoute([
  {url: '/about.html', revision: 'abcd1234'},
  // ... other entries ...
]);

التحضير المسبق للمراجع الفرعية في الصفحة

إنّ التحميل المسبق لمواد العرض الثابتة التي قد تستخدمها الأقسام المختلفة من الموقع الإلكتروني (مثل JavaScript وCSS وما إلى ذلك) هو من أفضل الممارسات العامة ويمكن أن يساعد في تعزيز سيناريوهات الجلب المُسبَق.

لتسريع عمليات التنقّل في موقع للتجارة الإلكترونية، يمكنك استخدام علامات <link rel="prefetch"> في صفحات البيانات لجلب صفحات تفاصيل المنتجات مسبقًا للمنتجات القليلة الأولى من صفحة البيانات. إذا سبق لك تخزين الموارد الفرعية الخاصة بصفحة المنتج مؤقتًا، قد يزيد ذلك من سرعة التنقّل.

لتنفيذ هذا الإجراء:

• إضافة علامة <link rel="prefetch"> إلى الصفحة:

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• أضِف الموارد الفرعية للصفحة إلى قائمة التخزين المؤقت في مشغّل الخدمات:

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  // ... other entries ...
]);

2. إطالة عمر موارد الجلب المسبق

كما ذكرنا سابقًا، يجلب <link rel="prefetch"> الموارد ويحتفظ بها في ذاكرة التخزين المؤقت HTTP لفترة زمنية محدودة، وبعد ذلك تسري قواعد Cache-Control الخاصة بأي مورد. اعتبارًا من الإصدار 85 من Chrome، ستكون هذه القيمة 5 دقائق.

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

في المثال السابق، يمكن إكمال <link rel="prefetch"> المستخدَم للجلب المُسبَق لصفحة منتج باستخدام استراتيجية التخزين المؤقت لوقت تشغيل Workspace.

ولتنفيذ ذلك:

• إضافة علامة <link rel="prefetch"> إلى الصفحة:

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• تنفيذ استراتيجية التخزين المؤقت لبيئة التشغيل في مشغّل الخدمات لأنواع الطلبات التالية:

new workbox.strategies.StaleWhileRevalidate({
  cacheName: 'document-cache',
  plugins: [
    new workbox.expiration.Plugin({
      maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
    }),
  ],
});

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

3- تفويض الجلب المُسبَق إلى مشغّل الخدمة

وفي معظم الحالات، يكون استخدام <link rel="prefetch"> هو الطريقة الأفضل. إنّ العلامة عبارة عن تلميح خاص بالمورد تم تصميمه لتسهيل عملية الجلب المسبق قدر الإمكان.

في بعض الحالات، قد يكون من الأفضل تفويض هذه المهمة بالكامل إلى عامل الخدمة. على سبيل المثال، لجلب المنتجات القليلة الأولى مسبقًا في صفحة بيانات المنتج المعروضة من جهة العميل، قد يحتاج المستخدم إلى إدخال عدة علامات <link rel="prefetch"> بشكل ديناميكي في الصفحة، استنادًا إلى استجابة واجهة برمجة التطبيقات. وقد يؤدي ذلك إلى استهلاك بعض الوقت في سلسلة التعليمات الرئيسية للصفحة وزيادة صعوبة التنفيذ.

وفي مثل هذه الحالات، استخدِم "صفحة لاستراتيجية التواصل مع مشغّل الخدمات" لتفويض مهمة الجلب المُسبَق بالكامل إلى مشغّل الخدمات. ويمكن تحقيق هذا النوع من التواصل باستخدام worker.postMessage():

تعمل حزمة نافذة مربع العمل على تبسيط هذا النوع من الاتصالات، بحيث يتم استخلاص العديد من تفاصيل المكالمة الأساسية التي يتم إجراؤها.

يمكن تنفيذ الجلب المُسبَق باستخدام نافذة Workbox على النحو التالي:

• في الصفحة: طلب عامل الخدمة من خلال إرسال نوع الرسالة إليه وقائمة عناوين URL المطلوب استرجاعها مسبقًا:

const wb = new Workbox('/sw.js');
wb.register();

const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});

• في مشغّل الخدمات: تنفيذ معالِج الرسائل لإصدار طلب fetch() لكل عنوان URL من أجل جلبه مسبقًا:

addEventListener('message', (event) => {
  if (event.data.type === 'PREFETCH_URLS') {
    // Fetch URLs and store them in the cache
  }
});