أصبح الوصول غير المتصلة بالإنترنت مهمًا بشكل متزايد للتطبيقات المستندة إلى الويب. على الرغم من أن جميع المتصفحات لديها آليات التخزين المؤقت ، إلا أنها غير موثوقة وقد لا تلعب دائمًا الدور المتوقع. يستخدم HTML5 واجهة ApplicationCache لحل بعض المشكلات الناجمة عن الاستخدام غير المتصلة بالإنترنت.
يمكن أن يؤدي استخدام واجهة ذاكرة التخزين المؤقت إلى إحضار الفوائد الثلاثة التالية إلى تطبيقك :التصفح غير المتصلة بالإنترنت - يمكن للمستخدمين تصفح موقع الويب الكامل الخاص بك أثناء عدم الاتصال بالإنترنت
السرعة - المورد المخزونات هو مورد محلي ، لذلك يتم تحميله بشكل أسرع.
تحميل الخادم أقل - يقوم المتصفح بتنزيل الموارد فقط من الخادم الذي تغير.
يتيح App Cache (المعروف أيضًا باسم AppCache) للمطورين تحديد الملفات التي يجب على المتصفح ذاكرة التخزين المؤقت للمستخدمين غير المتصل بالوصول. سيتم تحميل تطبيقك وتشغيله بشكل طبيعي حتى إذا ضغط المستخدم على زر التحديث عند الاتصال بالإنترنت.
ملف البيان ذاكرة التخزين المؤقت
ملف بيان ذاكرة التخزين المؤقت هو ملف نصي بسيط يسرد الموارد التي يجب على المتصفح ذاكرة التخزين المؤقت للوصول دون اتصال بالإنترنت.
ملف بيان مرجع
لتمكين التخزين المؤقت للتطبيق للتطبيق ، أضف سمة البيان في علامة HTML الخاصة بالوثيقة:
<html missest = "example.appcache">
...
</html>
يجب عليك إضافة خاصية البيان على كل صفحة من تطبيقات الويب التي تريد ذاكرة التخزين المؤقت. إذا لم تحتوي الصفحة على السمة البيض ، فلن يقوم المتصفح بتخزين الصفحة (ما لم يتم سرده بشكل صريح في ملف البيان). هذا يعني أنه سيتم إضافة كل صفحة ويب يتصفحها المستخدم مع البيان ضمنيًا إلى ذاكرة التخزين المؤقت للتطبيق. لذلك ، لا تحتاج إلى سرد كل صفحة في القائمة.
يمكن أن تشير خاصية البيان إلى عنوان URL المطلق أو المسار النسبي ، ولكن يجب أن يكون عنوان URL المطلق هو نفسه تطبيق الشبكة المقابل. يمكن أن يستخدم ملف البيان أي تمديد ملف ، ولكن يجب توفيره بنوع MIME الصحيح (انظر أدناه).
<html manceest = "http://www.example.com/example.mf">
...
</html>
يجب توفير ملف البيان في نوع MIME TEXT/CACHE-Manifest. قد تحتاج إلى إضافة نوع ملف مخصص إلى خادم الويب الخاص بك أو تكوين .htaccess.
على سبيل المثال ، لتوفير نوع MIME هذا في Apache ، أضف السطر التالي إلى ملف التكوين الخاص بك:
AddType Text/Cache-Manifest .AppCache لتوفير نوع mime هذا في ملف app.yaml لمحرك تطبيق Google ، أضف ما يلي:
- url: /ميستاتيدير /(.*/.appcache)
static_files: Mystaticdir // 1
mime_type: النص/ذاكرة التخزين المؤقت
التحميل: Mystaticdir /(.*/. appcache) بنية الملف البيض
تنسيق القائمة البسيطة على النحو التالي:
بيان ذاكرة التخزين المؤقت
index.html
ورقة الأنماط
الصور/logo.png
البرامج النصية/main.js هذا المثال يخبؤ أربعة ملفات على صفحة الويب التي تحدد هذا الملف البيان.
النقاط التالية التي تحتاج إلى الانتباه إلى:
يجب أن تكون سلسلة ذاكرة التخزين المؤقت على السطر الأول وهي ضرورية.
يجب ألا تتجاوز كمية البيانات المخزولة على الموقع 5 ميغابايت. ومع ذلك ، إذا كنت تكتب تطبيقًا لمتجر ويب Chrome ، فيمكنك استخدام UnlimitedStorage لإجراء قيود غير محدودة.
إذا كان لا يمكن تنزيل ملف البيان أو المورد المحدد فيه ، فلا يمكن تنفيذ عملية تحديث ذاكرة التخزين المؤقت بالكامل. في هذه الحالة ، سيستمر المتصفح في استخدام ذاكرة التخزين المؤقت للتطبيق الأصلي.
لنلقي نظرة على أمثلة أكثر تعقيدًا:
بيان ذاكرة التخزين المؤقت
# 2010-06-18: V2
# صراحة المخزنة مؤقتًا "إدخالات رئيسية".
ذاكرة التخزين المؤقت :/favicon.ico
index.html
ورقة الأنماط
الصور/logo.png
البرامج النصية/main.js
# الموارد التي تتطلب من المستخدم أن يكون عبر الإنترنت.
شبكة :login.php
/myapi
http://api.twitter.com
# static.html سيتم تقديمه إذا لم يكن من الممكن الوصول إلى Main.py
# غير متصل. jpg سيتم تقديمه بدلاً من جميع الصور في الصور/كبيرة/
# غير متصل. html سيتم تقديمه بدلاً من جميع ملفات .html الأخرى
احتياطي :/main.py /static.html
الصور/كبيرة/صور/غير متصل. jpg
*.html /offline.html الخطوط التي تبدأ بـ # هي خطوط التعليقات ، ولكن يمكن استخدامها لأغراض أخرى أيضًا. يتم تحديث ذاكرة التخزين المؤقت للتطبيق فقط إذا تغير ملفه البيان. على سبيل المثال ، إذا قمت بتعديل مورد الصورة أو غيرت وظيفة JavaScript ، فإن هذه التغييرات لا يتم إعادة تأجيلها. يجب عليك تعديل ملف البيان نفسه لجعل المتصفح تحديث الملف المخزونات. قم بإنشاء خطوط تعليق مع أرقام إصدار تم إنشاؤها أو قيم تجزئة الملفات أو الطابع الزمني للتأكد من أن المستخدمين يحصلون على أحدث إصدار من البرنامج الخاص بك. يمكنك أيضًا تحديث ذاكرة التخزين المؤقت برنامجياً بعد ظهور إصدار جديد ، كما هو موضح في قسم تحديث ذاكرة التخزين المؤقت.
يمكن أن تتضمن القائمة ثلاثة أجزاء مختلفة: ذاكرة التخزين المؤقت والشبكة والتراجع.
ذاكرة التخزين المؤقت :هذا هو الجزء الافتراضي من الإدخال. يتم تخزين الملفات المذكورة تحت هذا الرأس بشكل صريح لأول مرة (أو الملفات مباشرة بعد بيان ذاكرة التخزين المؤقت).
شبكة :الملفات المدرجة بموجب هذا القسم هي موارد ذات قائمة بيضاء تحتاج إلى توصيلها بالخادم. جميع طلبات هذه الموارد تتجاوز ذاكرة التخزين المؤقت بغض النظر عما إذا كان المستخدم غير متصل أم لا. يمكن استخدام البطاقات البرية.
احتياطي :هذا القسم اختياري ويستخدم لتحديد صفحة الاحتياط عندما لا يمكن الوصول إلى المورد. يمثل URI الأول المورد والثاني يمثل صفحة الويب الاحتياطية. يجب أن يكون كل من URIs مرتبطًا ويجب أن يكون من نفس الأصل مثل ملف البيان. يمكن استخدام البطاقات البرية.
يرجى ملاحظة: يمكن ترتيب هذه الأقسام بأي ترتيب ، ويمكن تكرار كل قسم في نفس القائمة.
تحدد القائمة التالية صفحة الويب الشاملة (غير متصل. html) المعروضة عندما يحاول المستخدم الوصول إلى جذر موقع الويب غير متصل ، ويشير أيضًا إلى أن جميع الموارد الأخرى (مثل الموارد على موقع ويب بعيد) تتطلب اتصالًا بالإنترنت.
بيان ذاكرة التخزين المؤقت
# 2010-06-18: V3
# إدخالات مخزنة صراحة
index.html
CSS/style.css
# Online.html سيتم عرضه إذا كان المستخدم غير متصل بالإنترنت
احتياطي:
//offline.html
# جميع الموارد الأخرى (على سبيل المثال) تتطلب من المستخدم أن يكون متصلاً بالإنترنت.
شبكة:
*
# موارد إضافية للذاكرة التخزين المؤقت
مخبأ:
الصور/logo1.png
الصور/logo2.png
يرجى ملاحظة أن الصور/logo3.png: سيقوم النظام تلقائيًا بتخزين ملف HTML الذي يشير إلى ملف البيان. لذلك لا تحتاج إلى إضافتها إلى القائمة ، لكننا نوصيك بذلك.
ملاحظة : سيتم استبدال رؤوس ذاكرة التخزين المؤقت HTTP وقيود ذاكرة التخزين المؤقت المحددة لصفحات الويب المقدمة عبر SSL مع إظهار ذاكرة التخزين المؤقت. لذلك ، يمكن تشغيل صفحة الويب التي توفرها HTTPS في وضع عدم الاتصال. تحديث ذاكرة التخزين المؤقتيبقى التطبيق مخبأة بعد عدم الاتصال بالإنترنت ما لم يحدث أحد ما يلي:
يقوم المستخدم بمسح تخزين بيانات المتصفح على موقع الويب الخاص بك.
تم تعديل ملف البيان. يرجى ملاحظة: تحديث ملف مدرج في البيان لا يعني أن المتصفح سيعيد إعادة تأكيد المورد. يجب تغيير ملف البيان نفسه.
يتم تحديث ذاكرة التخزين المؤقت للتطبيق برمجيًا.
حالة ذاكرة التخزين المؤقتكائن Window.AppLicationCache هو طريقة وصول برنامجي إلى ذاكرة التخزين المؤقت لتطبيق المتصفح. يمكن استخدام سمة الحالة الخاصة بها لعرض الحالة الحالية لذاكرة التخزين المؤقت:
var appcache = window.applicationCache ؛
التبديل (appcache.status) {
CASE AppCache.UNCACHED: // unned == 0
العودة "غير متوفرة" ؛
استراحة؛
Case AppCache.idle: // idle == 1
إرجاع "الخمول" ؛
استراحة؛
Case AppCache.checking: // checking == 2
إرجاع "التحقق" ؛
استراحة؛
Case AppCache.Downloading: // download == 3
إرجاع "التنزيل" ؛
استراحة؛
Case AppCache.Updateready: // Updateready == 4
إرجاع "updateready" ؛
استراحة؛
CASE AppCache.Obsolete: // oversolete == 5
العودة "عفا عليها الزمن" ؛
استراحة؛
تقصير:
إرجاع "حالة ذاكرة التخزين المؤقت المعروفة" ؛
استراحة؛
} ؛
لتحديث ذاكرة التخزين المؤقت برنامجياً ، اتصل على ApplicationCache.update () أولاً. سيحاول ذلك تحديث ذاكرة التخزين المؤقت للمستخدم (شريطة تغيير ملف البيان). أخيرًا ، عندما يكون ApplicationCache.Status في حالة updateready ، اتصل على ApplicationCache.swapCache () لاستبدال ذاكرة التخزين المؤقت الأصلية مع ذاكرة التخزين المؤقت الجديدة.
var appcache = window.applicationCache ؛
appcache.update () ؛ // حاول تحديث ذاكرة التخزين المؤقت للمستخدم.
...
if (appcache.status == window.applicationCache.updateready) {
appcache.swapcache () ؛ // كان الجلب ناجحًا ، مبادلة في ذاكرة التخزين المؤقت الجديدة.
}
يرجى ملاحظة : استخدام Update () و SwapCache () بهذه الطريقة لن يوفر الموارد المحدثة للمستخدم. تتيح هذه العملية ببساطة للمتصفح التحقق من البيان الجديدة ، وتنزيل التحديثات المحددة ، وإعادة ملء ذاكرة التخزين المؤقت للتطبيق. لذلك ، يجب إعادة تحميل صفحة الويب مرتين قبل توفير محتوى جديد للمستخدم ، والاحترام هو الحصول على ذاكرة التخزين المؤقت للتطبيق الجديدة ، والثاني هو تحديث محتوى صفحة الويب.والخبر السار هو أنه يمكنك تجنب متاعب إعادة التحميل مرتين. لتحديث المستخدمين إلى أحدث إصدار من موقع الويب ، قم بإعداد مستمع لمراقبة أحداث Updateready عند تحميل صفحة الويب:
// تحقق مما إذا كانت ذاكرة التخزين المؤقت الجديدة متوفرة في تحميل الصفحة.
window.addeventListener ('load' ، function (e) {
window.applicationCache.adDeventListener ('Updateready' ، function (e) {
if (window.applicationCache.status == window.applicationCache.updateready) {
// المستعرض قام بتنزيل ذاكرة التخزين المؤقت للتطبيق الجديدة.
// مبادلة في الصفحة وأعد تحميل الصفحة للحصول على السخرية الجديدة.
window.ApplicationCache.swapcache () ؛
إذا (تأكيد ("إصدار جديد من هذا الموقع متاح. تحميله؟")) {
window.location.reload () ؛
}
} آخر {
// لم يتغير البيان. لا شيء جديد على الخادم.
}
}، خطأ شنيع)؛
}، خطأ شنيع)؛
حدث AppCacheكما توقعت ، يتم استخدام أحداث إضافية للاستماع إلى حالة ذاكرة التخزين المؤقت. سيؤدي المتصفح إلى تشغيل الأحداث المقابلة للتنزيل ، وتحديثات ذاكرة التخزين المؤقت للتطبيق ، وحالة الخطأ. يقوم مقتطف الكود التالي بإعداد مستمع حدث لكل نوع حدث ذاكرة التخزين المؤقت:
وظيفة HandleCacheevent (e) {
// ...
}
وظيفة HandleCacheerror (e) {
تنبيه ('خطأ: فشل ذاكرة التخزين المؤقت في التحديث!) ؛
} ؛
// أطلقت بعد ذاكرة التخزين المؤقت الأولى من البيان.
appcache.addeventListener ('cached' ، HandleCacheevent ، false) ؛
// التحقق من التحديث. دائما الحدث الأول أطلق في التسلسل.
appcache.addeventListener ('checking' ، HandleCacheevent ، false) ؛
// تم العثور على تحديث. المتصفح يجلب الموارد.
AppCache.AdDeventListener ('Downloading' ، HandleCacheevent ، false) ؛
// يعيد البيان 404 أو 410 ، فشل التنزيل ،
// أو تغيير البيان أثناء التنزيل كان قيد التقدم.
appcache.addeventListener ('error' ، HandleCacheRorr ، false) ؛
// أطلق النار بعد التحميل الأول من البيان.
AppCache.AdDeventListener ('noupdate' ، HandleCacheevent ، false) ؛
// تم إطلاقه إذا قام ملف البيان بإرجاع 404 أو 410.
// يؤدي هذا إلى حذف ذاكرة التخزين المؤقت للتطبيق.
AppCache.AdDeventListener ('Obsolete' ، HandleCacheevent ، false) ؛
// تم إطلاقه لكل مورد مدرج في البيان حيث يتم جلبه.
AppCache.AdDeventListener ('Progress' ، HandleCacheevent ، false) ؛
// تم إطلاقه عندما تم تحميل الموارد البيئية حديثًا.
appcache.addeventListener ('Updateready' ، HandleCacheevent ، false) ؛
إذا كان لا يمكن تنزيل ملف البيان أو المورد المحدد فيه ، فسوف يفشل التحديث بأكمله. في هذه الحالة ، سيستمر المتصفح في استخدام ذاكرة التخزين المؤقت للتطبيق الأصلي