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

تعد Cache API جزءًا من مواصفات Service Worker ، وهي طريقة رائعة للحصول على مزيد من القدرة على التخزين المؤقت للموارد.

مقدمة

تعد Cache API جزءًا من مواصفات Service Worker ، وهي طريقة رائعة للحصول على مزيد من القدرة على التخزين المؤقت للموارد.

يسمح لكذاكرة التخزين المؤقت للموارد القابلة للتوجيه، وهو ما يعني الأصول وصفحات الويب واستجابات HTTP APIs.

إنهليسيُقصد به تخزين قطع البيانات الفردية مؤقتًا ، وهي مهمة ملفIndexedDB API.

إنه متاح حاليًا في Chrome> = 40 و Firefox> = 39 و Opera> = 27.

قدم Safari و Edge مؤخرًا دعمًا له.

Internet Explorer لا يدعمه.

يعد دعم الأجهزة المحمولة جيدًا على نظام Android ، وهو مدعوم على Android Webview وفي Chrome لنظام Android ، بينما يتوفر على iOS فقط لمستخدمي Opera Mobile و Firefox Mobile.

اكتشف ما إذا كانت واجهة برمجة تطبيقات ذاكرة التخزين المؤقت متاحة

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

if ('caches' in window) {
  //ok
}

تهيئة ذاكرة التخزين المؤقت

استخدم الcaches.openAPI ، الذي يقوم بإرجاع ملفيعدمعكائن ذاكرة التخزين المؤقتجاهز للاستخدام:

caches.open('mycache').then(cache => {
  // you can start using the cache
})

mycacheهو اسم أستخدمه لتحديد ذاكرة التخزين المؤقت التي أريد تهيئتها. إنه مثل اسم متغير ، يمكنك استخدام أي اسم تريده.

إذا لم تكن ذاكرة التخزين المؤقت موجودة بعد ،caches.openيخلقها.

أضف عناصر إلى ذاكرة التخزين المؤقت

الcacheيعرض الكائن طريقتين لإضافة عناصر إلى ذاكرة التخزين المؤقت:addوaddAll.

cache.add()

addيقبل عنوان URL واحدًا ، وعندما يطلق عليه ، يجلب المورد ويخزنه مؤقتًا.

caches.open('mycache').then(cache => {
  cache.add('/api/todos')
})

للسماح بمزيد من التحكم في الجلب ، يمكنك تمرير ملفطلبكائن ، جزء منجلب APIتخصيص:

caches.open('mycache').then(cache => {
  const options = {
    // the options
  }
  cache.add(new Request('/api/todos', options))
})

cache.addAll()

addAllيقبل مصفوفة ، ويرجع aيعدعندما يتم تخزين جميع الموارد مؤقتًا.

caches.open('mycache').then(cache => {
  cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
    //all requests were cached
  })
})

يدويا الجلب والإضافة

cache.add()يجلب موردًا تلقائيًا ويخزنه مؤقتًا.

توفر Cache API تحكمًا أكثر دقة في هذا عبرcache.put(). أنت مسؤول عن جلب المورد ثم إخبار Cache API بتخزين استجابة:

const url = '/api/todos'
fetch(url).then(res => {
  return caches.open('mycache').then(cache => {
    return cache.put(url, res)
  })
})

استرجع عنصرًا من ذاكرة التخزين المؤقت

cache.match()إرجاع أإجابةالكائن الذي يحتوي على جميع المعلومات حول الطلب واستجابة طلب الشبكة

caches.open('mycache').then(cache => {
  cache.match('/api/todos').then(res => {
    //res is the Response Object
  })
})

احصل على جميع العناصر في ذاكرة التخزين المؤقت

caches.open('mycache').then(cache => {
  cache.keys().then(cachedItems => {
    //
  })
})

العناصر المخزنة مؤقتًاهي مجموعة منطلبالتي تحتوي على عنوان URL للمورد في ملفurlمنشأه.

احصل على جميع ذاكرات التخزين المؤقت المتاحة

الcaches.keys()طريقة يسرد مفاتيح كل ذاكرة التخزين المؤقت المتاحة.

caches.keys().then(keys => {
  // keys is an array with the list of keys
})

إزالة عنصر من ذاكرة التخزين المؤقت

نظرا لcacheالكائن ، لهdelete()طريقة يزيل منها مورد مخزنة مؤقتًا.

caches.open('mycache').then(cache => {
  cache.delete('/api/todos')
})

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

الcaches.delete()يقبل التابع معرف ذاكرة التخزين المؤقت وعندما يتم تنفيذه ، فإنه يمسح ذاكرة التخزين المؤقت وعناصرها المخزنة مؤقتًا من النظام.

caches.delete('mycache').then(() => {
  // deleted successfully
})

المزيد من دروس المتصفح: