HTML5 Application Cache
باستخدام ذاكرة التخزين المؤقت للتطبيق (App Cache)، من السهل إنشاء إصدار غير متصل بالإنترنت لتطبيق ويب ، عن طريق إنشاء ملف بيان ذاكرة التخزين المؤقت.
ما هي ذاكرة التخزين المؤقت للتطبيق؟ – APP Cache
عادةً ما تعمل معظم التطبيقات المستندة إلى الويب فقط إذا كنت متصلاً بالإنترنت!
لكن HTML5 يقدم آلية ذاكرة التخزين المؤقت للتطبيق التي تسمح للمتصفح بحفظ ملف HTML تلقائيًا وجميع الموارد الأخرى التي تحتاج إلى عرضها بشكل صحيح على الجهاز المحلي ، بحيث لا يزال بإمكان المتصفح الوصول إلى صفحة الويب ومواردها دون اتصال بالإنترنت .
مميزات استخدام ميزة التخزين المؤقت للتطبيق – App Cache
- التصفح دون اتصال: يمكن للمستخدمين استخدام التطبيق حتى في حالة عدم الاتصال بالإنترنت أو وجود اضطرابات غير متوقعة في اتصال الشبكة.
- تحسين الأداء: يتم تحميل الموارد المخزنة مؤقتًا مباشرة من جهاز المستخدم بدلاً من الخادم البعيد وبالتالي يتم تحميل صفحات الويب بشكل أسرع وأفضل أداء.
- تقليل طلب HTTP وتحميل الخادم: سيتعين على المتصفح فقط تنزيل الموارد المحدثة أو المتغيرة من الخادم البعيد لتقليل طلبات HTTP إلى الحد الأدنى وحفظ النطاق الترددي الثمين بالإضافة إلى تقليل الحمل على خادم الويب.
كيفية تخزين الملفات للاستخدامات في وضع عدم الاتصال؟
لتخزين الملفات للاستخدامات في وضع عدم الاتصال ، تحتاج إلى إكمال الخطوات التالية:
الخطوة 1: قم بإنشاء ملف Cache Manifest
Manifest هو ملف نصي خاص يخبر المتصفحات بالملفات المراد تخزينها ، والملفات التي لا يجب تخزينها ، والملفات التي يجب استبدالها بشيء آخر.
يبدأ ملف الـ Manifest دائمًا بالكلمات CACHE MANIFEST (بأحرف كبيرة).
مثال للتوضيح على ملف Manifest:
CACHE MANIFEST
# 11-09-2020 v1.0
CACHE:
# pages
index.html
# styles & scripts
css/theme.css
js/jquery.min.js
js/main.js
# images
/favicon.ico
/logo.gif
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
توضيح الكود السابق:
يتكون ملف البيان من ثلاثة أقسام:
- CACHE MANIFEST: لتخزين الملفات المدرجة تحت هذا العنوان مؤقتًا بعد تنزيلها لأول مرة.
- NETWORK: تتطلب الملفات المدرجة تحت هذا العنوان اتصالاً بالخادم ، ولن يتم تخزينها مؤقتًا.
- FALLBACK: تحدد الملفات المدرجة تحت هذا العنوان الصفحات الاحتياطية إذا تعذر الوصول إلى الصفحة.
CACHE MANIFEST
يجب بدأ الملف بـ CACHE MANIFEST ثم ملفات الـ CACHE:
CACHE MANIFEST
# 11-09-2020 v1.0
CACHE:
# pages
index.html
# styles & scripts
css/theme.css
js/jquery.min.js
js/main.js
# images
/favicon.ico
/logo.gif
يسرد ملف الـ Manifest السابق ثلاثة اقسام:
- القسم الأول خاص بـالـ (pages) يوجد به ملف “index.php”.
- القسم الثانى خاص بـالـ (styles & scripts) يوجد به 3 ملفات (ملف CSS و ملفين JavaScript).
- القسم الثالث خاص بـالـ (images) يوجد به صورتين.
عندما يتم تحميل ملف الـ Manifest، سيقوم المتصفح بتنزيل جميع الملفات السابقة من الدليل الجذر (root) لموقع الويب، وعندما يكون المستخدم غير متصل بالإنترنت ، ستظل الموارد متاحة.
NETWORK
الملفات الموجوده ضمن الـ NETWORK هي مصادر لا يتم تخزينها مؤقتًا ولا تتوفر في وضع عدم الاتصال.
هذا يعني أنه لا يمكن للمستخدمين الوصول إلى صفحة login.php إلا عندما يكونون متصلين بالإنترنت:
NETWORK:
login.php
لجعل جميع الموارد أو الملفات الأخرى تتطلب اتصالاً بالإنترنت، يمكنك استخدام علامة النجمة “*” للإشارة إلى ذلك:
NETWORK:
*
FALLBACK
يحدد قسم FALLBACK الصفحات الاحتياطية التي يجب أن يستخدمها المتصفح في حالة تعذر إنشاء الاتصال بالخادم.
فى المثال الكامل السابق سيتم عرض ملف “offline.html” بدلاً من جميع الملفات في / html /، في حالة تعذر إنشاء اتصال بالإنترنت:
FALLBACK:
/html/ /offline.html
الخطوة 2: استخدام ملف Cache Manifest
بعد إنشاء ملف Manifest ، قم بتحميله على خادم الويب.
تأكد من تهيئة خادم الويب لخدمة ملفات الـ Manifest باستخدام نوع text/cache-manifest.
لتطبيق ميزة Cache Manifest ، تحتاج إلى تمكينه في صفحات الويب الخاصة بك ، عن طريق إضافة سمة manifest إلى عنصر <html> ، كالتالى:
<!DOCTYPE HTML>
<html manifest="test.appcache">
...
</html>
سيتم تخزين كل صفحة مع سمة manifest المحددة في ذاكرة التخزين المؤقت عندما يزورها المستخدم، إذا لم يتم تحديد سمة manifest، فلن يتم تخزين الصفحة مؤقتًا (ما لم يتم تحديد الصفحة مباشرة في ملف manifest).
دعم المتصفحات لذاكرة التخزين المؤقت للتطبيق – App Cache
| المتصفح | Firefox | Chrome | Internet Explorer | Safari | Opera |
| من بداية الإصدار | 3.5 | 4.0 | 12.0 | 4.0 | 11.5 |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!