تطبيق الويب التقدمي (PWA) الذي يعرض صفحة بديلة عند انقطاع الشبكة ليس بالضرورة مصمماً للعمل دون اتصال أولاً (Offline-First). التجربة الحقيقية تحدد عملاً مفيداً بلا شبكة، وتخزن الحد الأدنى الآمن، وتحفظ نية المستخدم في عملية واضحة، ثم توفّقها مع الخادم. يتيح عامل الخدمة في المتصفح وIndexedDB والمزامنة الخلفية أدوات مهمة، لكنها لا تضمن سعة التخزين أو استمرار العمل في الخلفية أو بقاء البيانات. لذلك يجب التعامل مع امتلاء التخزين والجهاز المشترك وانتهاء الجلسة والترقية والتعارض بوصفها حالات أساسية.
اختر حدود العمل حسب المهمة
صنف كل خطوة إلى تعمل دون اتصال، أو قراءة من نسخة حديثة، أو تحتاج اتصالاً مؤكداً. قد يقرأ الفني مهامه ويسجل ملاحظة، بينما الدفع أو الإرسال التنظيمي يحتاج تحققاً. اشرح الحد في الواجهة. يوضح دليل أهمية offline-first الجانب التشغيلي، ويعرض دليل Flutter وLaravel طريقة الأوامر نفسها لتطبيقات الموبايل.
خزّن ملفات الواجهة بإصدارات واضحة
يمكن لـ Service Worker حفظ ملفات الواجهة كي يفتح التنقل. اختر strategy لكل مورد: ملفات build الثابتة تناسب cache-first، بينما navigation يحتاج fallback مضبوطاً. لا تخزن HTML مصادقاً أو API حساساً بقاعدة واسعة. لا تحذف cache القديم قبل جهوزية الجديد. اختبر نشر ملفات ناقصاً وتبويباً بقي مفتوحاً أثناء التحديث. نجاح install لا يثبت اكتمال كل الأصول.
ضع السجلات المهيكلة في مخزن مناسب
استخدم IndexedDB أو طبقة موثوقة للمعاملات والفهارس بدلاً من اعتبار localStorage قاعدة بيانات. عرّف schema version وترقية. خزّن الحقول المطلوبة للمهمة فقط، مع مدة صلاحية وحذف. تعامل مع الوسائط والأحجام منفصلة. قد يحذف المتصفح البيانات أو يمسحها المستخدم؛ لذلك لا تبقَ النسخة المحلية المصدر الوحيد بعد توفر المزامنة. راقب quota قبل فشل الكتابة.
خزّن أمراً لا طلب شبكة خاماً
مثّل «أكمل قائمة الفحص» أو «أضف ملاحظة» بمعرف عملية ونوع وإصدار حمولة ووقت وهوية واعتمادات. إعادة URL وbody قد تنكسر مع API جديد. مرر العملية بين pending وsending وsynced وfailed وneeds-attention. يعالج الخادم المعرف idempotently. اعرض تاريخاً محلياً يفرق بين محفوظ على الجهاز ومقبول في الخادم.
اعتبر المزامنة الخلفية تحسيناً لا ضماناً
دعم المتصفحات وسياسات النظام تختلف وقد يتأخر العمل الخلفي. شغّل المزامنة عند فتح التطبيق وعودة اتصال محتملة وطلب المستخدم، واستخدم Background Sync حيث يتوفر. طبق retries محدودة مع backoff وjitter، وأوقف خطأ validation الدائم. لا تنشئ حلقة تستهلك البطارية والبيانات. اعرض عمر أقدم عملية وخيار معالجة واضحاً.
اكتشف التعارض قبل الكتابة
أرسل رقم إصدار السجل أو شرطاً مسبقاً عند تعديل بيانات موجودة. إذا تغيرت نسخة الخادم، فأعد للعميل معلومات تكفي لفهم التعارض. قد يقبل حقل نصي الدمج، بينما تحتاج المواعيد والمخزون والمبالغ إلى قاعدة يحكمها الخادم أو إلى مراجعة بشرية. احتفظ بالنسختين حتى يُحسم الخلاف، ولا تعتمد تلقائياً أحدث تعديل زمنياً، فقد يمحو قراراً صحيحاً. سجّل نتيجة المعالجة لأن تعارضاً نادراً قد يفسد سجلاً مهماً.
احمِ الجهاز المشترك
قلل البيانات، وتجنب الأسرار طويلة الأجل، واربط الوصول بجلسة. امسح أو اقفل السجلات عند الخروج أو تغيير الدور أو إلغاء الجهاز حين يتصل. لا تعد بمسح جهاز لن يعود للشبكة. امنع حساباً من رؤية cache حساب آخر. راجع مخاطر الصور والتشخيصات المصدرة. التشفير مفيد لكنه لا يعوض تقليل البيانات وضبط الوصول.
نسّق ترقية عامل الخدمة ومخطط البيانات
قد تتوقع واجهة جديدة schema مختلفاً بينما يعمل تبويب قديم. نسّق activation وترحيل IndexedDB وإصدارات الأوامر وتوافق API. لا تحذف queue أثناء الترقية. اجعل migration قابلاً للاستئناف واختبر انقطاعه. إذا تعذر تحويل عملية، ضعها للمراجعة. لا تطلب من المستخدم مسح كل بيانات الموقع وخسارة عمله كأول حل.
لا تعتمد على مؤشر الاتصال وحده
قد يكون الجهاز متصلاً والـ API أو المزود غير متاح. استخدم نتائج الطلب وتمييز offline وdegraded وunauthorized وفشل خدمة خارجية. لا تمنع العمل المحلي الآمن بسبب health check مؤقت. أظهر آخر sync وحالة كل سجل. الأيقونة الخضراء لا تبرر ادعاء أن كل endpoint يعمل، وتكرار الفحص نفسه قد يزيد الضغط.
اختبر دورة حياة قاسية
اختبر شبكة متقلبة وطلباً تكرر وإغلاق المتصفح وquota ممتلئة وحذف بيانات وانتهاء جلسة وجهازين offline وتحديث Service Worker ونشر API مع backlog. راجع الوصول بلوحة المفاتيح في شاشات الاسترداد. جرّب المتصفحات والأنظمة المدعومة لأن سياسات الخلفية تختلف. راقب queue age والتعارض من دون تسجيل الحمولة الحساسة.
راقب الجودة بعد الإطلاق
اجمع مؤشرات عمر أقدم عملية ومعدل الفشل والتعارض وإصدار المتصفح وحجم التخزين من دون نسخ محتوى السجلات. ضع تنبيهاً للتراكم لا لكل محاولة منفردة، واربطه بمسؤول وإجراء. أعطِ الدعم مرجع عملية وحالتها وإصدار التطبيق، ولا تمنحه زر إعادة شاملة قد يكرر الآثار. راجع المؤشرات مع شكاوى المستخدمين، لأن queue قصيرة لا تعني أن الواجهة شرحت الحالة جيداً.
وثق حدود الدعم
اكتب المتصفحات والأجهزة والسياسات المدعومة، وما يحدث في وضع التصفح الخاص أو عند منع التخزين. اشرح للمستخدم متى يحتاج إبقاء الصفحة مفتوحة أو الاتصال قبل مغادرة الموقع. لا تعد بعمل خلفي لا تضمنه المنصة. حدّث الوثيقة عند تغير browser capability أو تصميم المزامنة، واجعلها جزءاً من اختبار القبول لا صفحة مساعدة منسية.
نفّذ اختبار جهازين وسجل واحد
عدّل السجل نفسه من جهازين أثناء الانقطاع، ثم أعد الاتصال بترتيبين مختلفين. تحقق من بقاء العمليتين بمعرفات ثابتة، وظهور التعارض، ومنع التكرار، وحفظ قرار المستخدم المخول. أضف حذفاً وتغيير صلاحية وامتلاء تخزين. نجاح جهاز واحد في وضع الطيران لا يثبت أن المزامنة تحمي عمل فريق كامل.
الخلاصة: العمل دون اتصال وعد بالاتساق
الوعد المفيد هو ألا تختفي نية مقبولة بصمت، وألا يتكرر الأثر، وأن يعرف المستخدم حالة العمل وحدوده. ابدأ بمسار واحد واختبر أسوأ دورة حياة له. للحصول على مراجعة قبل البناء، اطلب تقييماً لمعمارية PWA دون اتصال يشمل التخزين والأوامر والأمان والترقية والمراقبة والاسترداد.