تخزين مؤقت

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

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

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

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

البيانات التي سيتم تخزينها مؤقتًا

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

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

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

التشغيل بلا إنترنت

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

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

هناك العديد من استراتيجيات التخزين المؤقت المختلفة التي يمكنك استخدامها بناءً على احتياجات تطبيق الويب التقدّمي (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 كمفتاح. وستظهر لك طريقة إجراء ذلك في فصل العرض.

وقت التخزين المؤقت

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

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

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

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

تخزين الأصول مؤقتًا في مشغّل الخدمات

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

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

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().

يمكنك أيضًا التعامل مع الوعود باستخدام البنية غير المتزامنة/الانتظار. في هذه الحالة، يجب إنشاء دالة غير متزامنة يمكنها استدعاء الدالة 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)".

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

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

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

الموارد

• مساحة تخزين ذاكرة التخزين المؤقت على MDN
• ذاكرة التخزين المؤقت لواجهة برمجة التطبيقات: دليل سريع
• كتاب الطبخ بلا إنترنت