واجهة Cache API
خزّنوا الاستجابات وقدّموها من ذاكرة التخزين المؤقت.
واجهة Cache API درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ما هي Cache API؟
تخزّن Cache API أزواج الطلبات والاستجابات في ذاكرات تخزين مؤقت مسماة. وتستخدمها Service Workers لتقديم الأصول دون الوصول إلى الشبكة، وهو الأساس لدعم العمل دون اتصال.
الكائن caches
يدير الكائن العام caches، وهو من النوع CacheStorage، جميع ذاكرات التخزين المؤقت المسماة. ويتوفر هذا الكائن في الصفحات وفي Service Workers.
// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()فتح ذاكرة تخزين مؤقت
تعيد caches.open(name) وعدًا بذاكرة تخزين مؤقت تحمل ذلك الاسم، وتنشئها إذا لم تكن موجودة. وتتيح لكم الأسماء إصدار ذاكرات التخزين المؤقت.
caches.open('static-v1').then(cache => {
console.log('cache ready');
});التخزين المؤقت المسبق باستخدام addAll
أثناء تنفيذ install، تجلب cache.addAll(urls) قائمة من الأصول وتخزنها في استدعاء واحد. وإذا فشل أي طلب جلب، تفشل العملية بأكملها.
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('static-v1').then(cache =>
cache.addAll(['/', '/styles.css', '/app.js'])
)
);
});waitUntil
يخبر event.waitUntil(promise) المتصفحَ بإبقاء العامل قيد التشغيل حتى تتم تسوية الوعد. غلّفوا إعداد ذاكرة التخزين المؤقت بها حتى لا ينتهي التثبيت مبكرًا.
self.addEventListener('install', (event) => {
event.waitUntil(setupCache());
});إضافة إدخال واحد
تخزّن cache.put(request, response) استجابة واحدة، بينما تجلب cache.add(url) عنوان URL واحدًا وتخزنه. استخدموا put عندما تكون لديكم استجابة جاهزة للحفظ.
const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);البحث في ذاكرة التخزين المؤقت
تبحث cache.match(request) عن استجابة مخزنة. وتُحلّ إلى الاستجابة، أو إلى undefined إذا لم توجد مطابقة.
const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');الاختصار caches.match
تبحث caches.match(request) في جميع ذاكرات التخزين المؤقت دفعةً واحدة، وهذا مفيد في معالج fetch عندما لا يهمكم أي ذاكرة تحتوي على الأصل.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(hit =>
hit || fetch(event.request)
)
);
});respondWith
داخل حدث fetch، توفر event.respondWith(promise) الاستجابة التي سيستخدمها المتصفح. اجعلوا الوعد يُحلّ إلى Response مخزنة مؤقتًا أو جرى جلبها حديثًا.
self.addEventListener('fetch', (event) => {
event.respondWith(handleRequest(event.request));
});استنساخ الاستجابات
لا يمكن قراءة نص الاستجابة إلا مرة واحدة. ولإرجاع الاستجابة وتخزينها معًا، استنسخوها أولًا.
const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the originalحذف إدخالات ذاكرة التخزين المؤقت
تزيل cache.delete(request) إدخالًا واحدًا، بينما تحذف caches.delete(name) ذاكرة تخزين مؤقت مسماة بالكامل. استخدموا هاتين الدالتين للتخلص من الأصول القديمة.
await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache versionاختبار سريع
اختبروا مدى فهمكم لـ Cache API.
مراجعة
لقد تعلمتم Cache API:
- تحصل
caches.open(name)على ذاكرة تخزين مؤقت مسماة أو تنشئها. - تخزّن
addAllالأصول مسبقًا، بينما يخزّنput/addالإدخالات. - تسترجع
matchالإدخالات، بينما تبحثcaches.matchفي جميع ذاكرات التخزين المؤقت. - توفر
respondWithالاستجابة في حدث fetch. - استنسخوا الاستجابات قبل تخزينها مؤقتًا وإرجاعها.
التالي: استراتيجيات التخزين المؤقت.
الأسئلة الشائعة
هل درس «واجهة Cache API» مجاني؟
نعم — نص درس «واجهة Cache API» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «واجهة Cache API»؟
خزّنوا الاستجابات وقدّموها من ذاكرة التخزين المؤقت. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «واجهة Cache API»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.