Vue Academy · درس

الدعم دون اتصال والمزامنة في الخلفية

تخزين استجابات API مؤقتًا، واستخدام IndexedDB للبيانات دون اتصال، والمزامنة في الخلفية للإجراءات المؤجلة

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

التفكير بمنهجية العمل دون اتصال

يعني الدعم الحقيقي للعمل دون اتصال أن يستمر التطبيق في العمل من دون شبكة: تأتي عمليات القراءة من مخزن محلي، وتُوضع عمليات الكتابة في قائمة انتظار، ثم تُزامَن عند عودة الاتصال.

IndexedDB للتخزين المحلي

يُعد IndexedDB مخزن المتصفح الكبير والمنظم وغير المتزامن. وواجهته البرمجية الخام مطولة، لذلك تستخدم معظم التطبيقات مكتبة التغليف الصغيرة idb.

npm install idb

فتح قاعدة بيانات باستخدام idb

تعيد openDB مقبض قاعدة بيانات يعتمد على الوعود. عرّف مخازن الكائنات في رد الاستدعاء upgrade.

import { openDB } from "idb";

const db = await openDB("app-db", 1, {
  upgrade(db) {
    db.createObjectStore("todos", { keyPath: "id" });
    db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
  }
});

القراءة والكتابة

استخدم get وgetAll وput لقراءة السجلات وتخزينها. وتعيد هذه الدوال وعودًا يمكنك انتظارها.

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

اكتشاف عدم الاتصال باستخدام navigator.onLine

إن navigator.onLine قيمة منطقية تشير إلى حالة الاتصال. اقرأها لاختيار سلوك الشبكة أو السلوك المحلي.

if (!navigator.onLine) {
  // work from IndexedDB only
}

الاستجابة لأحداث الاتصال

يطلق window حدثي online وoffline. اربط بهما reactive ref حتى تعكس واجهة المستخدم الحالة مباشرة.

import { ref, onMounted, onUnmounted } from "vue";

const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
  window.addEventListener("online", on);
  window.addEventListener("offline", off);
});
onUnmounted(() => {
  window.removeEventListener("online", on);
  window.removeEventListener("offline", off);
});

وضع عمليات التعديل في قائمة انتظار دون اتصال

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

async function saveTodo(todo) {
  await db.put("todos", todo);
  if (!navigator.onLine) {
    await db.add("outbox", { type: "saveTodo", payload: todo });
  } else {
    await api.save(todo);
  }
}

المزامنة عند إعادة الاتصال

عند إطلاق حدث online، فرّغ صندوق الصادر: أعد تشغيل كل عملية تعديل في قائمة الانتظار على الخادم، ثم امسحها.

async function flushOutbox() {
  const items = await db.getAll("outbox");
  for (const item of items) {
    await api.send(item);
    await db.delete("outbox", item.id);
  }
}
window.addEventListener("online", flushOutbox);

واجهة Background Sync API

لإجراء المزامنة حتى بعد إغلاق علامة التبويب، تسجّل Background Sync API التابعة لـ service worker وسم مزامنة يطلقه المتصفح عند عودة الاتصال.

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

معالجة المزامنة في Worker

يستمع service worker إلى حدث sync وينفّذ منطق التفريغ في الخلفية.

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

اعتبارات التعارض

قد تتعارض إعادة تشغيل عمليات الكتابة الموضوعة في قائمة الانتظار مع تغييرات الخادم. استخدم الإصدارات أو الطوابع الزمنية أو قواعد «الكتابة الأخيرة تفوز»، واعرض التعارضات التي لم تُحسم للمستخدم.

تحقق سريع

كيف ينبغي التعامل مع عمليات الكتابة أثناء عدم اتصال التطبيق بالإنترنت؟

ملخص

يخزّن الدعم للعمل دون اتصال البيانات في IndexedDB (من خلال مكتبة idb)، ويكتشف حالة الاتصال باستخدام navigator.onLine وأحداث online/offline، ويضع عمليات التغيير في صندوق صادر أثناء عدم الاتصال، ثم يزامنها عند إعادة الاتصال، اختياريًا باستخدام Background Sync API الخاص بعامل الخدمة. خطّط للتعامل مع التعارضات عند إعادة تشغيل عمليات الكتابة الموضوعة في قائمة الانتظار.

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

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

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

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

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

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

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

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

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

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

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

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

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