تم تلخيص امتدادات API الرئيسية في وقت سابق. سوف تلعب الامتدادات التالية فقط أكبر دور في المناسبات المخصصة. دعونا نلقي نظرة قصيرة هنا. بدون استثناء ، لا يدعم IE الميزات التالية. يتم دعم ذاكرة التخزين المؤقت للتطبيق ورسالة الخادم في المتصفحات السائدة الأخرى. يتم دعم إشعارات سطح المكتب حاليًا فقط بواسطة Chrome.
ذاكرة التخزين المؤقت للتطبيقفي كثير من الأحيان ، نحتاج إلى تخزين بعض الصفحات التي لم تتغير بشكل متكرر لتحسين سرعة الوصول ؛ وبالنسبة لبعض التطبيقات ، نأمل أيضًا استخدامها في وضع عدم الاتصال. في HTML5 ، يمكنك بسهولة تنفيذ هذه الوظائف من خلال تقنية تسمى التخزين المؤقت للتطبيق.
في تنفيذ ذاكرة التخزين المؤقت للتطبيق ، يتيح لنا HTML5 إنشاء ملف واضح مخزنة مؤقتًا لإنشاء إصدار غير متصل بالتطبيق بسهولة.
خطوات التنفيذ :1. تمكين التخزين المؤقت للصفحة ، إنه بسيط للغاية. تحتاج فقط إلى تضمين السمة البيان في HTML من المستند:
<! doctype html>
<html missest = "demo.appcache">
...
</html>
سيتم تخزين كل صفحة تحتوي على هذه السمة الواضحة عند الوصول إليها. إذا لم يتم تحديد خاصية البيان ، فلن يتم تخزينها مؤقتًا (ما لم يتم تحديد صفحة الويب مباشرة في ملف البيان). لا يوجد معيار موحد لتمديد الملف البيان ، والتمديد الموصى به هو .appcache.
2. قم بتكوين نوع MIME لملف البيان على جانب الخادم
يجب دعم ملف واضح من خلال نوع MIME الصحيح ، وهو النص/ذاكرة التخزين المؤقت. يجب تكوينه على خادم الويب المستخدم. على سبيل المثال: في Apache ، يمكنك إضافة: AddType Text/Cache-Manifest بيان في .htaccess.
3. اكتب ملف البيان
ملف البيان هو ملف نصي بسيط يخبر المستعرض ما الذي يجب ذاكرة التخزين المؤقت (أو ماذا يجب ذاكرة التخزين المؤقت).
يحتوي ملف البيان على الأجزاء الثلاثة التالية:
• بيان ذاكرة التخزين المؤقت - سيتم تخزين الملفات تحت عنوان القائمة هذا بعد التنزيل.
• الشبكة - يتطلب الملف الموجود تحت عنوان القائمة اتصال الخادم ولن يتم تخزينه مؤقتًا.
• العودة - يعرض صفحة محددة إذا كان الملف الموجود تحت عنوان القائمة هذا غير متاح.
يتم عرض الملف الكامل في المثال التالي:
بيان ذاكرة التخزين المؤقت
# 2012-02-21 V1.0.0
/theme.css
/logo.gif
/main.js
شبكة:
login.asp
احتياطي:
/html5 / /offline.html
تَلمِيح:
التعليقات التمثيلية بدءا من #.
* يمكن استخدامها لتمثيل جميع الموارد أو الملفات الأخرى. على سبيل المثال:
شبكة:
*
وهذا يعني أن جميع الموارد أو الملفات لن يتم تخزينها مؤقتًا.
4. قم بتحديث ذاكرة التخزين المؤقت
بمجرد أن يتم تخزينه مؤقتًا ، سيبقى مخزنة مؤقتًا ما لم يحدث الموقف التالي:
• حذف المستخدم ذاكرة التخزين المؤقت
• تم تعديل ملف البيان
• يتم تعديل ذاكرة التخزين المؤقت للتطبيق بواسطة البرنامج
لذلك بمجرد تخزين الملف مؤقتًا ، بالإضافة إلى التعديلات الاصطناعية ، سيستمر المتصفح في عرض محتوى الإصدار المخزنة مؤقتًا ، حتى لو قمت بتعديل ملف الخادم. من أجل جعل المتصفح يقوم بتحديث ذاكرة التخزين المؤقت ، يمكنك فقط تعديل ملف البيان.
: الخط الذي يبدأ بـ # هو خط تعليق ، ولكن يمكن أن يكون له استخدامات أخرى. إذا كان التعديل الخاص بك ينطوي فقط على صورة واحدة أو وظيفة JavaScript ، فلن يتم إعادة إعادة هذه التغييرات. تحديث التواريخ والإصدارات في التعليقات هي وسيلة للحصول على متصفحك لإعادة تأجيل ملفاتك
: يمكن أن تحتوي المتصفحات على العديد من البيانات المخزنة مؤقتًا بحدود حجم مختلفة (تسمح بعض المتصفحات ببيانات مخزولة عن 5 أمتار).
<strong> رسالة الخادم </strong>
سيناريو شائع آخر هو: عندما تتغير البيانات الموجودة على الخادم ، كيفية إخبار العميل؟ كانت هذه هي الممارسة السابقة: تتحقق الصفحة بنشاط ما إذا كانت هناك تحديثات على الخادم. وفقًا للمقدمة السابقة ، نعلم أن استخدام WebSocket يمكنه تحقيق اتصال ثنائي الاتجاه. نقدم هنا ميزة جديدة أخرى في HTML5: أحداث خادم الخدمة.
في HTML5 ، فإن الكائن الذي يستضيف هذه الميزة هو كائن Eventsource.
خطوات الاستخدام هي كما يلي:
1. تحقق من دعم المستعرض لكائنات Eventsource ، يعلم الجميع هذا:
إذا (typeof (eventsource)! == "غير محدد")
{
// نعم! دعم الأحداث الخادم!
// بعض الكود ...
}آخر {
// آسف! لا يوجد دعم أحداث خادم سنت ..
}
2. رمز الرسائل إرسال جانب الخادم
يعد إرسال رسائل تحديث على جانب الخادم أمرًا بسيطًا للغاية: بعد تعيين معلومات رأس المحتوى إلى رسالة نصية/حدث ، يمكنك إرسال الأحداث. خذ رمز ASP كمثال:
<٪
استجابة. contenttype = "text/event-stream"
استجابة. expires = -1
Response.write ("البيانات: >> وقت الخادم" & now ())
استجابة. flush ()
٪>
3. تلقي رمز الرسالة على جانب المتصفح
var source = new eventsource ("demo_sse.php") ؛
source.onmessage = function (event) {
document.getElementById ("النتيجة"). innerhtml+= event.data+"
"
} ؛
وصف الرمز:
• قم بإنشاء كائن eventsource ، تحديد عنوان URL للصفحة لإرسال التحديثات (فيما يلي demo_see.jsp)
• بعد استلام كل تحديث ، يتم تشغيل حدث OnMessage
• عندما يتم تشغيل وقت onMessage ، قم بتعيين البيانات الناتجة على العنصر باستخدام ID = النتيجة
بالإضافة إلى حدث OnMessage ، يتولى كائن Eventsource أيضًا أخطأ أحداث Onerror ، وأحداث OnoPen التي أنشأتها Connections ، إلخ.
إخطارات سطح المكتب - ميزات شبه HTML5تتيح ميزة إخطار سطح المكتب للمتصفح إخطار المستخدمين بالرسائل حتى لو كان يقلل من الحالة. هذا هو مزيج أكثر طبيعية مع Webim. ومع ذلك ، حاليًا فقط Chrome هو المتصفح الذي يدعم هذه الميزة. النوافذ المنبثقة هي شيء يكرهه الجميع ، لذلك تحتاج إلى الحصول على إذن من المستخدم لتمكين هذه الميزة.
<script>
وظيفة requestpermission (رد الاتصال) {
Window.WebKitNotifications.requestpermission (رد الاتصال) ؛
}
وظيفة الموضحة () {
// المصطلح ما إذا كان المتصفح يدعم الإخطار من خلال window.webkitnotifications
إذا (!! window.webkitnotifications) {
if (window.webKitNotifications.CheckPermission ()> 0) {
requestpermission (الموضحة) ؛
} آخر {
var notification = window.webKitNotifications.CreateNotification ("[[imgurl]" ، "title" ، "body") ؛
الإخطار. ondisplay = function () {
setTimeout ('Itification.cancel ()' ، 5000) ؛
}
الإخطار. show () ؛
}
}
}
</script>
افتح هذه الصفحة في متصفحك وسترى نافذة رسالة تدوم لمدة 5 ثوانٍ تنبثق في الزاوية اليمنى السفلى من سطح المكتب.
هذه الميزة بسيطة للغاية للاستخدام ، ولكن في التشغيل الفعلي ، يجب تقليل تداخل وظيفة الإخطار للمستخدمين ويجب تقليل حدوث وظيفة الإخطار.
فيما يلي بعض تجارب الخبراء عبر الإنترنت في تقديم هذا التطبيق :1. تأكد من ظهور إشعار واحد فقط عند استلام رسائل متعددة ؛
هذه المشكلة أسهل في حلها لأن كائن الإخطار يحتوي على خاصية تسمى ReplyId. بعد تحديد هذه الخاصية ، طالما كانت نافذة الإخطار بنفس POPS تنبثق ، فسيقوم بالكتابة فوق النافذة التي سبق أن ظهرت. في المشروع الفعلي ، يتم تعيين جميع النوافذ المنبثقة باستبدال متطابق. ومع ذلك ، تجدر الإشارة إلى أن سلوك التغطية هذا صالح فقط في نفس المجال.
2. عندما يكون المستخدم في الصفحة التي يظهر فيها IM (الصفحة في حالة التركيز) ، لن يكون هناك إشعار ؛
هذه المشكلة هي تحديد ما إذا كانت نافذة المتصفح موجودة في حالة التركيز. في الوقت الحالي ، يبدو أنه لا توجد طريقة أفضل لمراقبة أحداث OnFocus و Onblur في النافذة. في المشروع ، يتم استخدام هذه الطريقة لتسجيل حالة التركيز للنافذة ، ثم تحديد ما إذا كانت النافذة المنبثقة تعتمد على حالة التركيز عند وصول الرسالة.
$ (window) .bind ('Blur' ، this.windowblur) .bind ('focus' ، this.windowfocus) ؛
ما تحتاج إلى الانتباه إليه عند استخدام هذه الطريقة هو أن نقطة تسجيل الحدث يجب أن تكون مرتفعة قدر الإمكان. إذا كان التسجيل قد فات الأوان ، فمن السهل التسبب في سوء الحكم عندما يفتح المستخدم الصفحة ويترك.
3. عندما يستخدم المستخدم علامات تبويب متعددة لفتح صفحات متعددة مع IM ، لن يظهر أي إشعار طالما أن صفحة واحدة في حالة التركيز ؛
يمكن تحقيق مشاركة الدولة بين صفحات متعددة من خلال التخزين المحلي:
• عند التركيز على نافذة المتصفح ، قم بتعديل قيمة المفتاح المحدد في التخزين المحلي للتركيز.
• عندما يتم تعديل تطهير نافذة المتصفح لتعديل قيمة المفتاح المحدد في التخزين المحلي لتطهيرها.
تجدر الإشارة إلى أنه عند التبديل من علامة تبويب إلى أخرى في Chrome ، قد يتم كتابة Blur لتخزين أكثر من التركيز ، لذلك يتطلب معالجة غير متزامنة عند تعديل حالة التركيز.
/*نافذة على حدث التركيز*/
// استخدام التأخير هو حل مشكلة التبديل بين علامات التبويب المتعددة ، والسماح دائمًا بتركيز الكتابة فوق حدث ضبابي لعلامات التبويب الأخرى.
// ملاحظة: إذا لم تركز على المستند قبل النقر فوق علامة التبويب ، فلن يؤدي النقر فوق علامة التبويب إلى التركيز.
setTimeout (function () {
storage.setitem ('kxchat_focus_win_state' ، 'focus') ؛
} ، 100) ؛
/*نافذة على حدث Blur*/
Storage.setItem ('kxchat_focus_win_state' ، 'Blur') ؛
بعد تنفيذ مشاركة الحالة أعلاه ، بعد وصول الرسالة الجديدة ، تحتاج فقط إلى التحقق مما إذا كانت قيمة "kxchat_focus_win_state" في التخزين المحلي ضبابية ، وإذا كانت ضبابية ، فسيتم عرض النافذة المنبثقة.
4. كيفية السماح للمستخدمين بالنقر فوق الطبقة العائمة للإشعار لتحديد موقع نوافذ دردشة محددة
تدعم نافذة الإخطار استجابات الأحداث مثل OnClick ، ونطاق الوظيفة في وظيفة الاستجابة ينتمي إلى الصفحة التي تم إنشاء النافذة. الرمز التالي:
var n = dn.createNotification (
IMG ،
عنوان،
محتوى
) ؛
// تأكد من وجود تذكير واحد فقط
n.replaceid = this.replaceid ؛
n.onclick = function () {
// تنشيط نافذة المتصفح التي تنبثق من نافذة الإخطار
window.focus () ؛
// افتح نافذة IM
WMOpenwinbyid (البيانات) ؛
// أغلق نافذة الإخطار
N.Cancel () ؛
} ؛
ينتمي كائن النافذة الذي تم الوصول إليه في وظيفة استجابة OnClick إلى الصفحة التي تم إنشاؤها حاليًا ، بحيث يمكنه التفاعل بسهولة مع الصفحة الحالية. ينفذ الرمز أعلاه أن النقر فوق النافذة المنبثقة سيقفز إلى نافذة المتصفح المقابل ويفتح نافذة IM.
: غالبًا ما تكون الأحداث ذات الصلة في الصفحة سلسلة زمنية إلى أجل غير مسمى ، وبالتالي فإن الكود لدينا يحاول عدم افتراض أن ترتيب تشغيل بعض الأحداث مؤكد. على سبيل المثال ، أحداث طمس وتركيز أعلاه
المرجع العملي:المستند الرسمي: http://www.w3schools.com/html5/
برنامج تعليمي صيني لـ HTML5: http://www.gbin1.com/tutorials/html5-tutorial/