JavaScript Academy · درس

المزامنة والتحديث في الخلفية

حدّثوا ذاكرة التخزين المؤقت وأجروا المزامنة عند عودة الاتصال.

المزامنة والتحديث في الخلفية درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

الحفاظ على حداثة التخزين المؤقت

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

أسماء التخزين المؤقت المرقّمة بالإصدار

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

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

تنظيف التخزين المؤقت القديم

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

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

العامل المنتظر

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

skipWaiting

تطلب self.skipWaiting() من العامل المنتظر أن يُفعّل فورًا، وأن يتولى التحكم دون انتظار إغلاق علامات التبويب. استدعها في install عندما تريد تطبيق التحديثات فورًا.

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

بعد التفعيل، تتيح self.clients.claim() للعامل الجديد تولي التحكم فورًا في الصفحات المفتوحة بالفعل، بدلًا من التحكم في عمليات التنقل المستقبلية فقط.

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

اكتشاف التحديثات من الصفحة

يمكن للصفحة الاستماع إلى عامل جديد عبر حدث updatefound في التسجيل، ثم مطالبة المستخدم بإعادة التحميل للحصول على أحدث إصدار.

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

المزامنة في الخلفية

تتيح Background Sync API تأجيل إجراء، مثل إرسال نموذج، حتى يتوفر اتصال بالجهاز. تسجل وسم مزامنة، ثم يطلق المتصفح حدث sync عند الاتصال بالإنترنت.

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

معالجة حدث sync

في عامل الخدمة، استمع إلى sync وطابق وسم المزامنة. استخدم waitUntil حتى يُبقي المتصفح العامل قيد التشغيل إلى أن تنتهي إعادة المحاولة.

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

نمط التخزين في قائمة الانتظار ثم المزامنة

تدفق متين للعمل دون اتصال: احفظ الإجراء المعلّق في IndexedDB، وسجّل مزامنة، وفي معالج sync اقرأ قائمة الانتظار وأرسل كل عنصر باستخدام POST، ثم احذفه عند النجاح.

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

مراجعة التحديثات والمزامنة

تجعل هذه الميزات التطبيقات أكثر قدرة على الصمود معًا: تحافظ التخزينات المؤقتة المرقّمة بالإصدار وتنظيفها على حداثة الأصول، ويتحكم skipWaiting/clients.claim في توقيت طرح التحديث، وتكمل Background Sync الإجراءات بموثوقية بعد عودة المستخدم إلى الاتصال.

اختبار سريع

اختبر مدى فهمك للتحديثات والمزامنة في الخلفية.

مراجعة

لقد تعلمت المزامنة في الخلفية والتحديثات:

استخدم أسماء تخزين مؤقت تتضمن الإصدار ونظّف التخزين القديم عند activate.
يتحكم skipWaiting وclients.claim في توقيت التحديث.
اكتشف الإصدارات الجديدة عبر updatefound.
تؤجل Background Sync الإجراءات حتى الاتصال بالإنترنت عبر حدث sync.
ضع الإجراءات في قائمة انتظار داخل IndexedDB، ثم أفرغها عند المزامنة.

لقد أتممت درس عمال الخدمة والتخزين المؤقت دون اتصال.

الأسئلة الشائعة

هل درس «المزامنة والتحديث في الخلفية» مجاني؟

نعم — نص درس «المزامنة والتحديث في الخلفية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «المزامنة والتحديث في الخلفية»؟

حدّثوا ذاكرة التخزين المؤقت وأجروا المزامنة عند عودة الاتصال. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «المزامنة والتحديث في الخلفية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy