تخزين مؤقت

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

تتوفّر واجهة برمجة التطبيقات Cache Storage API من سياقات مختلفة:

• سياق النافذة (سلسلة المحادثات الرئيسية لتطبيق الويب التقدّمي)
• مشغّل الخدمة
• أي عمال آخرين تستخدمهم

من مزايا إدارة ذاكرة التخزين المؤقت باستخدام مهام الخدمة أنّ دورة حياتها لا تكون مرتبطة بالنافذة، ما يعني أنّك لا تحظر سلسلة التعليمات الرئيسية. يُرجى العِلم أنّ استخدام واجهة برمجة التطبيقات Cache Storage API يتطلّب أن تكون معظم هذه السياقات ضمن اتصال عبر بروتوكول أمان طبقة النقل (TLS).

المحتوى الذي يتم تخزينه مؤقتًا

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

ويجب أن تتضمّن هذه المراجع ما يلي:

• ملف HTML للصفحة الرئيسية (start_url لتطبيقك)
• ملفات CSS المطلوبة لتنسيق واجهة المستخدم الرئيسية
• الصور المستخدَمة في واجهة المستخدم
• ملفات JavaScript المطلوبة لعرض واجهة المستخدم
• البيانات، مثل ملف JSON، المطلوبة لعرض تجربة أساسية
• خطوط الويب
• في تطبيق مكوّن من عدّة صفحات، يمكنك استخدام مستندات HTML أخرى تريد عرضها بسرعة أو بلا اتصال بالإنترنت.

جاهز للاستخدام بلا إنترنت

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

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

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

استخدام واجهة برمجة التطبيقات

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

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

تنزيل مواد العرض وتخزينها

لطلب تنزيل مواد العرض وتخزينها من المتصفّح، استخدِم الطريقتَين add أو addAll. تُجري طريقة add طلبًا وتخزّن استجابة HTTP واحدة، وaddAll مجموعة من استجابات HTTP كعملية استنادًا إلى صفيف من الطلبات أو عناوين URL.

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

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

حالات استخدام ذاكرة التخزين المؤقت

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

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

• عند تثبيت الخدمة العاملة
• بعد تحميل الصفحة الأولى
• عندما ينتقل المستخدم إلى قسم أو مسار
• عندما تكون الشبكة غير مشغولة

يمكنك طلب تخزين الملفات الجديدة مؤقتًا في سلسلة المحادثات الرئيسية أو ضمن سياق الخدمة العاملة.

تخزين مواد العرض في عامل خدمة

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

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

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

تتلقّى طريقة waitUntil() وعدًا وتطلب من المتصفّح الانتظار إلى أن يتم حلّ المهمة في الوعد (إكمالها أو تعذّرها) قبل إنهاء عملية عامل الخدمة. قد تحتاج إلى ربط الوعود وعرض استدعاءات add() أو addAll() حتى تصل نتيجة واحدة إلى الطريقة waitUntil().

يمكنك أيضًا معالجة الوعود باستخدام بنية async/await. في هذه الحالة، عليك إنشاء دالة غير متزامنة يمكنها استدعاء await وتُعرِض وعدًا لـ waitUntil() بعد استدعائها، كما هو موضّح في المثال التالي:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

الطلبات والردود غير الشفافة على مستوى جميع النطاقات

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

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

تعديل مواد العرض وحذفها

يمكنك تعديل مواد العرض باستخدام cache.put(request, response) وحذف مواد العرض باستخدام delete(request).

اطّلِع على مستندات عناصر ذاكرة التخزين المؤقت للحصول على مزيد من التفاصيل.

تصحيح أخطاء مساحة التخزين المؤقت

يوفّر العديد من المتصفّحات طريقة لتصحيح أخطاء محتوى ذاكرة التخزين المؤقت ضمن علامة التبويب "تطبيق DevTools". يمكنك من هناك الاطّلاع على محتوى كل ذاكرة تخزين مؤقت ضمن المصدر الحالي. سنتناول المزيد من المعلومات عن هذه الأدوات في فصل "الأدوات وتصحيح الأخطاء".

الموارد

• مساحة التخزين المؤقت على MDN
• Cache API: دليل سريع
• The Offline Cookbook
• معلومات حول ذاكرة التخزين المؤقت: فحص ذاكرات التخزين المؤقت ومحو بياناتها وإيقافها