الإجراءات المسموح بها وغير المسموح بها للاستعداد المسبق

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

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

إجراء تخزين مؤقت للأصول الثابتة المهمة

أفضل العناصر المرشحة للتخزين المؤقت هي الأصول الثابتة المهمة، ولكن ما يُعتبَر "مهمًا" الأصل؟ من منظور المطور، قد يكون من المغري اعتبار تطبيق بأكمله "مهمًا" ولكن منظور المستخدم هو الأهم. يمكن اعتبار مواد العرض المهمة كما هي ضرورية للغاية لتوفير تجربة للمستخدم:

• أوراق الأنماط العامة.
• ملفات JavaScript التي توفّر وظائف عامة
• رمز HTML لهيكل التطبيق، إذا كان ذلك ينطبق على البنية

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

إجراء: تخزين مؤقت لعملية احتياطية بلا اتصال بالإنترنت للمواقع الإلكترونية المتعددة الصفحات

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

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

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

navigationPreload.enable();

// Ensure that /offline.html is part of your precache manifest!
precacheAndRoute(self.__WB_MANIFEST);

// The network-only callback should match navigation requests, and
// the handler for the route should use the network-only strategy, but
// fall back to a precached offline page in case the user is offline.
const networkOnlyNavigationRoute = new Route(({request}) => {
  return request.mode === 'navigate';
}, new NetworkOnly({
  plugins: [
    new PrecacheFallbackPlugin({
      fallbackURL: '/offline.html'
    })
  ]
}));

registerRoute(networkOnlyNavigationRoute);

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

ربما تفعل ذلك: فكّر في التوقُّع المسبق المبني على توقُّع

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

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

ربما لا تفعل: التخزين المؤقت لمكتبة HTML الثابتة

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

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

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

ما ننصحك بتجنّبه: تخزين الصور المتجاوبة أو الرموز المفضّلة مؤقتًا

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

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

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

ما ننصحك بتجنّبه: تخزين رموز polyfill مؤقتًا

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

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

لا تخزِّن رموز polyfill مؤقتًا. يمكنك الاعتماد على التخزين المؤقت في وقت التشغيل لضمان عدم تخزينها مؤقتًا إلا في المتصفّحات التي تتطلب عدم إهدار البيانات.

الخاتمة

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

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