HTML Academy · درس

صفحة بديلة للعمل دون اتصال

عرض صفحة بديلة مخزنة مؤقتًا عندما يكون المستخدم غير متصل

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

لماذا تحتاج إلى صفحة بلا اتصال؟

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

تخزين الصفحة البديلة مؤقتًا

في حدث install الخاص بعامل الخدمة، خزّن صفحة offline.html مؤقتًا مسبقًا حتى تكون متاحة دائمًا، حتى قبل أن ينتقل المستخدم إلى أي مكان أثناء انقطاع الاتصال. يضمن المتصفح بقاء ذاكرة التخزين المؤقت حتى حدوث التغيير التالي في sw.js.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

العرض عند الفشل

في حدث fetch، حاول الوصول إلى الشبكة أولًا؛ وعند الفشل، أعد صفحة offline.html المخزنة مؤقتًا. يُعد هذا النمط، أي أولوية الشبكة مع صفحة بديلة للعمل بلا اتصال، أبسط وصفة لبناء PWA ويعمل مع معظم مواقع المحتوى.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

التحقق من وضع التنقل

استخدم صفحة offline.html البديلة فقط لطلبات التنقل، أي عمليات تحميل الصفحات ذات المستوى الأعلى. أما طلبات الصور والبرامج النصية وعمليات جلب الموارد الفرعية الأخرى، فاتركها تفشل أو استخدم نسخًا مخزنة مؤقتًا لكل مورد؛ فعرض صفحة HTML بدل صورة مفقودة يؤدي إلى إفساد الصفحة بدرجة أكبر.

تصميم صفحة العمل بلا اتصال

اجعل صفحة العمل بلا اتصال خفيفة: استخدم CSS بالحد الأدنى، وتجنب الأصول الخارجية إلا إذا كانت مخزنة مؤقتًا أيضًا. اعرض شعار العلامة التجارية ورسالة ودية ("أنت غير متصل — سيُحمّل المحتوى عند عودة الاتصال") وزر إعادة المحاولة يستدعي location.reload().

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

تخزين الصفحات التي تمت زيارتها مؤقتًا

إلى جانب صفحة واحدة للعمل بلا اتصال، خزّن الصفحات التي حُمّلت بنجاح باستخدام استراتيجية stale-while-revalidate أو استراتيجية التخزين المؤقت أثناء التشغيل. عند العودة إلى مقالة عُرضت مؤخرًا دون اتصال بالشبكة، سيظل المحتوى ظاهرًا، ولن يفشل التحميل إلا للصفحات التي لم تُفتح من قبل.

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

عند تحديث offline.html، غيّر الثابت CACHE في sw.js (CACHE = "v2"). وفي حدث activate، احذف ذاكرات التخزين المؤقت القديمة: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). فالصفحات القديمة للعمل بلا اتصال قد تسبب الالتباس.

اختبار العمل بلا اتصال

تحاكي لوحة Network في أدوات مطوري Chrome انعدام الشبكة عند اختيار تقييد الاتصال "Offline". تنقّل داخل تطبيقك، وتحقق من ظهور صفحة العمل بلا اتصال للمسارات غير المعروفة، ومن استمرار تحميل الصفحات التي زِيرت سابقًا من ذاكرة التخزين المؤقت.

فشل الموارد الفرعية

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

ما بعد العمل بلا اتصال الثابت

تضع تطبيقات PWA المتقدمة إجراءات المستخدم في قائمة انتظار أثناء انقطاع الاتصال باستخدام Background Sync، ثم تعيد محاولتها عند عودة الاتصال، وتعرض في الأثناء واجهة متفائلة. توفر مكتبة Workbox وصفات جاهزة لهذه الأنماط؛ كما يمكن تنفيذها يدويًا، لكن ذلك يتطلب جهدًا أكبر.

استعادة الاتصال

استمع إلى حدث online في صفحة العمل بلا اتصال لاكتشاف عودة الاتصال: window.addEventListener("online", () => location.reload()). ستعيد الصفحة تحميل نفسها فور عودة الاتصال، من دون حاجة المستخدم إلى النقر على زر إعادة المحاولة.

كن صادقًا بحذر

يجب أن تعيد أزرار "حاول مرة أخرى" المحاولة فعلًا؛ استدعِ location.reload() بدلًا من عرض مؤشر تحميل زائف لا يفعل شيئًا. تحافظ الواجهة الصادقة على ثقة المستخدم، بينما تضر صفحات العمل بلا اتصال المضللة بالمصداقية سريعًا عندما يلاحظ المستخدمون ذلك.

اختبار المعرفة

لماذا يجب إعادة صفحة offline.html البديلة لطلبات التنقل فقط (e.request.mode === "navigate") وليس لجميع الطلبات الفاشلة؟

الملخص

يمكن لعوامل الخدمة عرض صفحة مخصصة للعمل بلا اتصال بدلًا من رسالة الخطأ العامة في المتصفح. خزّن offline.html مسبقًا في install، واعرضها في fetch عند فشل الشبكة إذا كان الطلب طلب تنقل. اجعل الصفحة مكتفية بذاتها، وأصدر ذاكرة التخزين المؤقت لتطبيق التحديثات، واستمع إلى حدث online لإعادة التحميل تلقائيًا. اختبر ذلك باستخدام تقييد الاتصال للعمل بلا اتصال في أدوات المطور.

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

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

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

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

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

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

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

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

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

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

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

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

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