تخزين مؤقت

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

التوافق مع المتصفح

  • 43
  • 16
  • 41
  • 11.1

المصدر

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

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

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

البيانات المطلوب تخزينها

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

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

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

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

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

يجب ألا يعرض تطبيق الويب التقدّمي (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());
});

الطلبات على مستوى النطاقات والردود الغامضة

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

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

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

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

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

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

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

تصحيح أخطاء مساحة تخزين ذاكرة التخزين المؤقت في "أدوات مطوري البرامج في Chrome"

المراجِع