تنفيذ تطبيق HTML5 دون اتصال بالإنترنت وتخزين العميل

يعد دعم تطوير تطبيقات الويب دون اتصال بالإنترنت بمثابة تركيز آخر لـ HTML5. ما يسمى بتطبيقات الويب غير المتصلة بالإنترنت هي تطبيقات لا يزال من الممكن تشغيلها حتى عندما يتعذر على الجهاز الوصول إلى الإنترنت.

يتطلب تطوير تطبيقات الويب غير المتصلة بالإنترنت عدة خطوات. الأول هو التأكد من أن التطبيق يعرف ما إذا كان الجهاز لديه إمكانية الوصول إلى الإنترنت حتى يتمكن من اتخاذ الإجراء الصحيح بعد ذلك. وبعد ذلك، يجب أن يتمتع التطبيق أيضًا بإمكانية الوصول إلى موارد معينة (الصور، وJavascript، وCSS، وما إلى ذلك) حتى يعمل بشكل صحيح. والأفضل من ذلك هو أنه يجب أن تكون هناك مساحة محلية للمستخدمين لحفظ البيانات، ولن يتم إعاقة القراءة والكتابة بغض النظر عما إذا كان لديهم إمكانية الوصول إلى الإنترنت.

HTML5 وواجهات برمجة التطبيقات ذات الصلة تجعل تطوير التطبيقات غير المتصلة بالإنترنت حقيقة واقعة.

لمعرفة ما إذا كان الجهاز متصلاً أم غير متصل، يحدد HTML5 سمة navigator.onLine. تشير قيمة true إلى أن الجهاز يمكنه الوصول إلى الإنترنت، وتشير قيمة false إلى أن الجهاز غير متصل بالإنترنت.

 if (navigator.onLine) { // العمل بشكل طبيعي} else { // تنفيذ المهام في حالة عدم الاتصال بالإنترنت}

نظرًا لأن navigator.onLine به بعض مشكلات التوافق، بالإضافة إلى سمة navigator.onLine، من أجل تحديد ما إذا كانت الشبكة متاحة بشكل أفضل، يحدد HTML5 أيضًا حدثين، متصلين وغير متصلين.

يتم تشغيل هذين الحدثين على كائن النافذة عندما تقوم الشبكة بالتبديل بين وضع عدم الاتصال بالإنترنت واتصال الإنترنت:

 window.addEventListener('online', function() { // يعمل بشكل طبيعي}); window.addEventListener('offline', function() { // تنفيذ المهام في وضع عدم الاتصال});

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

تم تصميم ذاكرة التخزين المؤقت لتطبيق HTML5، أو appcache للاختصار، خصيصًا لتطوير تطبيقات الويب غير المتصلة بالإنترنت. Appcache هي منطقة ذاكرة تخزين مؤقت منفصلة عن ذاكرة التخزين المؤقت للمتصفح. لحفظ البيانات في ذاكرة التخزين المؤقت هذه، يمكنك استخدام ملف البيان الذي يسرد الموارد التي سيتم تنزيلها وتخزينها مؤقتًا. مثال ملف الوصف:

 بيان ذاكرة التخزين المؤقت # Commentfile.jsfile.css

ثم اقتبس في html:

 <htmlmanifest=./xxx.manifest>

يجب أن يكون نوع MIME للملف xxx.manifest عبارة عن نص/بيان ذاكرة تخزين مؤقت.

جوهر واجهة برمجة التطبيقات هذه هو كائن applicationCache. يحتوي هذا الكائن على سمة حالة. قيمة السمة ثابتة، مما يشير إلى الحالة الحالية لذاكرة التخزين المؤقت للتطبيق:

• 0: لا توجد ذاكرة تخزين مؤقت، أي أنه لا توجد ذاكرة تخزين مؤقت للتطبيق مرتبطة بالصفحة
• 1: خامل، أي لم يتم تحديث ذاكرة التخزين المؤقت للتطبيق
• 2: التحقق، أي تنزيل ملف الوصف والتحقق من التحديثات
• 3: التنزيل، أي أن ذاكرة التخزين المؤقت للتطبيق تقوم بتنزيل الموارد المحددة في ملف الوصف.
• 4: اكتمل التحديث، أي أن ذاكرة التخزين المؤقت للتطبيق قامت بتحديث الموارد، وتم تنزيل جميع الموارد ويمكن استخدامها من خلال SwapCache().
• 5: تم التخلي عنه، أي أن ملف وصف ذاكرة التخزين المؤقت للتطبيق لم يعد موجودًا، لذلك لم تعد الصفحة قادرة على الوصول إلى ذاكرة التخزين المؤقت للتطبيق.

الأحداث ذات الصلة:

• التحقق: يتم تشغيله عندما يبحث المتصفح عن تحديثات لذاكرة التخزين المؤقت للتطبيق
• خطأ: يتم تشغيله عند حدوث خطأ أثناء البحث عن تحديثات أو تنزيل الموارد
• noupdate: يتم تشغيله عند التحقق من ملف الوصف والعثور على أن الملف لا يحتوي على أي تغييرات.
• التنزيل: يتم تشغيله عند بدء تنزيل موارد ذاكرة التخزين المؤقت للتطبيق
• التقدم: يتم تشغيله بشكل مستمر أثناء عملية التخزين المؤقت لتطبيق تنزيل الملف
• Updateready: يتم تشغيله عند تنزيل ذاكرة التخزين المؤقت للتطبيق الجديد للصفحة ويمكن استخدامه من خلال SwapCache()
• مخبأة: يتم تشغيلها عندما تكون ذاكرة التخزين المؤقت للتطبيق متاحة بالكامل

بشكل عام، سيتم تشغيل هذه الأحداث بالترتيب المذكور أعلاه أثناء تحميل الصفحة. يمكن أيضًا تشغيل الأحداث المذكورة أعلاه يدويًا عن طريق استدعاء طريقة التحديث ().

يتم استخدام ملفات تعريف الارتباط HTTP، والتي تسمى عادة ملفات تعريف الارتباط مباشرة، على العميل لتخزين معلومات الجلسة. يتطلب المعيار من الخادم إرسال رأس Set-Cookie HTTP كجزء من الاستجابة لأي طلب HTTP، والذي يحتوي على معلومات الجلسة. مثال لرأس استجابة الخادم:

HTTP/1.1200 موافق

نوع المحتوى: نص/html

ملف تعريف الارتباط المحدد: الاسم = القيمة

رأس آخر: قيمة رأس أخرى

يقوم المتصفح بعد ذلك بتعيين ملفات تعريف الارتباط لمعلومات الجلسة، ثم يضيف رأس ملف تعريف الارتباط HTTP لكل طلب لإرسال المعلومات مرة أخرى إلى الخادم، كما هو موضح أدناه:

احصل على /index.html HTTP/1.1

ملف تعريف الارتباط: الاسم = القيمة

رأس آخر: قيمة رأس أخرى

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

تتضمن ملفات تعريف الارتباط الكاملة ما يلي:

1. الاسم: اسم يحدد ملف تعريف الارتباط بشكل فريد. يجب أن يكون عنوان URL مشفرًا.
2. القيمة: قيمة السلسلة المخزنة في ملف تعريف الارتباط. يجب أن يكون عنوان URL مشفرًا.
3. المجال: المجال الذي يكون ملف تعريف الارتباط صالحًا له.
4. المسار: بالنسبة لهذا المسار في المجال المحدد، يجب إرسال ملف تعريف الارتباط إلى الخادم.
5. وقت انتهاء الصلاحية: طابع زمني يشير إلى متى يجب حذف ملف تعريف الارتباط.
6. علامة الأمان: عند تحديد ملف تعريف الارتباط، يتم إرسال ملف تعريف الارتباط إلى الخادم فقط عند استخدام اتصال SSL.