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

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

ديميان رينزولي

جيلبرتو كوتشي

جيف بوسنيك

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

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

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

سنستكشف في هذا الدليل الطرق المختلفة التي يمكن من خلالها استخدام عاملي الخدمة كعناصر مكمّلة لأساليب الجلب المُسبَق التقليدية.

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

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

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

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

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

ونتيجة لذلك، تحسنت 78% من مرات الملاحظة لشركة Virgilio Sport في فترات التحميل للانتقال إلى المقالات على مدار 3 أسابيع، وزادت مرات ظهور المقالات بنسبة 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():

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

يمكن تنفيذ الجلب المُسبَق باستخدام "نافذة ضمن مجموعة العمل" بالطريقة التالية:

• في الصفحة: يمكنك الاتصال بمشغِّل الخدمات لتمرير نوع الرسالة وقائمة عناوين 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
  }
});