الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

لا تتم صيانة هذا المشروع بشكل نشط.

غير متصل

ملاحظة للمستخدمين قبل 0.6.0: استخدم Offline سابقًا ملفًا مستضافًا على واجهة السحابة كإحدى طرق اكتشاف حالة الاتصال. تم الآن إهمال هذه الطريقة وتمت إزالة الصورة. الرجاء الترقية إلى غير متصل 0.7.0+.

تحسين تجربة تطبيقك عندما يفقد المستخدمون الاتصال.

  • يراقب طلبات اياكس بحثا عن الفشل

  • تأكيد حالة الاتصال عن طريق طلب صورة أو مورد مزيف

  • يلتقط طلبات ajax تلقائيًا أثناء انقطاع الاتصال ويعيد تقديمها بعد استعادة الاتصال.

  • واجهة مستخدم بسيطة مع مواضيع جميلة

  • 3 كيلو بايت مصغر ومضغوط

تثبيت

قم بتضمين جافا سكريبت وأحد السمات وإحدى اللغات على موقعك. لقد انتهيت!

لاستخدام JavaScript API فقط بدون مؤشر واجهة المستخدم، ما عليك سوى ترك ملف CSS.

إذا كنت ترغب في إلقاء نظرة خاطفة على كيفية ظهوره على موقعك، فافصل اتصال الإنترنت لديك، أو جرب جهاز المحاكاة.

متقدم

اختياريًا، يمكنك توفير بعض التكوينات عن طريق تعيين Offline.options بعد إحضار البرنامج النصي.

الخيارات (يمكن توفير أي منها كدالة)، مع إعداداتها الافتراضية:

 { // هل يجب علينا التحقق من حالة الاتصال فورًا عند تحميل الصفحة.  checkOnLoad: false, // هل يجب علينا مراقبة طلبات AJAX للمساعدة في تحديد ما إذا كان لدينا اتصال أم لا.  InterceptRequests: true، // هل يجب علينا إعادة الاختبار تلقائيًا بشكل دوري عندما ينقطع الاتصال (اضبطه على خطأ للتعطيل).  إعادة الاتصال: { // كم ثانية يجب أن ننتظر قبل إعادة الفحص.    initialDelay: 3, // كم من الوقت يجب أن ننتظر بين عمليات إعادة المحاولة.    تأخير: (1.5 * آخر تأخير، بحد أقصى ساعة واحدة) }, // هل يجب علينا تخزين ومحاولة إعادة تقديم الطلبات التي تفشل أثناء انقطاع الاتصال.  الطلبات: صحيح، // هل يجب أن نعرض لعبة الثعبان أثناء انقطاع الاتصال لتسلية المستخدم؟  // لم يتم تضمينه في البنية العادية، يجب عليك إحضار js/snake.js بالإضافة إلى //offline.min.js.  اللعبة: كاذبة}

ملكيات

Offline.check() : التحقق من الحالة الحالية للاتصال.

Offline.state : الحالة الحالية للاتصال "لأعلى" أو "لأسفل"

Offline.on(event, handler, context) : ربط حدث. الأحداث:

  • up: لقد انتقل الاتصال من الأسفل إلى الأعلى

  • down: لقد انتقل الاتصال من الأعلى إلى الأسفل

  • تم التأكيد: نجح اختبار الاتصال، وتم تشغيله حتى لو كان الاتصال قيد التشغيل بالفعل

  • تم التأكيد: فشل اختبار الاتصال، وتم تشغيله حتى لو كان الاتصال معطلاً بالفعل

  • التحقق: نحن نختبر الاتصال

  • إعادة الاتصال: بدأت: لقد بدأنا عملية إعادة الاتصال

  • إعادة الاتصال:توقف: لقد انتهينا من محاولة إعادة الاتصال

  • إعادة الاتصال: علامة: يتم تشغيله كل ثانية أثناء محاولة إعادة الاتصال، عندما لا يحدث التحقق

  • إعادة الاتصال: الاتصال: نحن نعيد الاتصال الآن

  • إعادة الاتصال: فشل: فشلت محاولة التحقق من إعادة الاتصال

  • الطلبات: فلوش: تمت إعادة صياغة أي طلبات معلقة

  • الطلبات:التقاط: يتم تعليق طلب جديد

Offline.off(event, handler) : إلغاء ربط الحدث

التحقق

افتراضيًا، يقوم Offline بإجراء طلب XHR لتحميل /favicon.ico الخاص بك للتحقق من الاتصال. إذا لم يكن لديك مثل هذا الملف، فسيكون 404 في وحدة التحكم، ولكنه يعمل بشكل جيد بخلاف ذلك (حتى 404 يعني أن الاتصال قد انتهى). يمكنك تغيير عنوان URL الذي تصل إليه (نقطة النهاية التي ستستجيب بـ 204 سريعة مثالية):

 Offline.options = {checks: {xhr: {url: '/connection-test'}}};

تأكد من أن عنوان URL الذي تتحقق منه له نفس أصل صفحتك (يجب أن تكون طريقة الاتصال والمجال والمنفذ متماثلة)، وإلا فسوف تواجه مشكلات CORS. يمكنك إضافة رؤوس Access-Control إلى نقطة النهاية لإصلاحها على المتصفحات الحديثة، ولكنها ستظل تسبب مشكلات في متصفح IE9 والإصدارات الأقدم.

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

 Offline.options = {checks: {image: {url: 'my-image.gif'}, active: 'image'}}

التحذير الوحيد هو أنه باستخدام طريقة الصورة، لا يمكننا التمييز بين 404 ومشكلة اتصال حقيقية، لذا فإن أي خطأ على الإطلاق سيظهر في وضع عدم الاتصال كمشكلة اتصال.

يشتمل وضع عدم الاتصال أيضًا على فحص يسمى 'up' وآخر يسمى 'down' والذي سيُبلغ دائمًا بأنه لأعلى أو لأسفل على التوالي للاختبار. يمكنك تنشيطها عن طريق تعيين الخيار active ، وإضافة سمة بيانات إلى علامة البرنامج النصي الخاصة بك بالاسم data-simulate والقيمة 'up' أو 'down' ، أو عن طريق تعيين localStorage.OFFLINE_SIMULATE على 'up' أو 'down' .

أعد الاتصال

تقوم وحدة إعادة الاتصال تلقائيًا بإعادة اختبار الاتصال بشكل دوري عندما يكون معطلاً. سيؤدي طلب AJAX الناجح أيضًا إلى تشغيل إعادة فحص صامت (إذا لم تكن interceptRequests خاطئة).

يمكنك تعطيل وحدة إعادة الاتصال عن طريق ضبط reconnect على خطأ. يمكن تكوين إعادة الاتصال عن طريق تحديد الخيارات في إعداد إعادة الاتصال.

الطلبات

تحتفظ وحدة الطلبات بأي طلبات AJAX فاشلة، وبعد حذفها، تقوم بإعادة إنشائها عند استعادة الاتصال.

يمكنك تعطيله عن طريق ضبط إعداد requests على خطأ.

يمكنك أيضًا تعيين deDupBody ليكون صحيحًا إذا كنت تريد أن يأخذ الحذف في الاعتبار محتوى الطلب أيضًا.

التبعيات

لا أحد!

دعم المتصفح

متصفح Chrome وFirefox وSafari وIE8+ الحديث

لاحظ أنه ليست كل المتصفحات (بما في ذلك Safari وIE القديم) تدعم الأحداث دون اتصال، مما يجبر Offline على استخدام طرق أقل دقة للكشف.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل