Skip to content
April 21, 2012 / Mohamed Amged :)

HTML5 Cache

HTML5 Cache
النهاردة هكلمكم عن الكاش، واتمنى الموضوع يعجبكم. لو أول مره تدخل المدونة انصحك تقرأ البوست دا الأول بوست رقم زيرو
مقدمة
التوجه العام دلوقتي هو جعل الweb-based apps تكون accessible offline، كل المتصفحات دلوقتي بتوفر طرق متعددة للكاشينج بس للأسف مش بيشتغلوا بطريقة مستقرة اقدر اعتمد عليها ف بناء تطبيق قوي، دلوقتي الHTML5 بتوفرلنا واجهات برمجيه مالهاش حل عشان اتعامل مع الكاشينج على كل البراوزرز.
استخدام الكاشينج هيوفرلك:
  1. offline browsing كدا يا معلم اليوزر يقدر يتصفح موقعك بشكل كامل بدون اي حاجة للإنترنت
  2.  speed الكاش بيكون متخزن ع الجهاز عندك بالتالي هيكون اسرع جدا ف اللوودينج
  3.  reduce server load الكاش بيخلي السيرفر يشتغل بأقل قدر ممكن لأنه مابيعملش لوود هنا غير للحاجات اللي اتغيرت ف الصفحة
الكاش بيخليك تحدد بالظبط الفيلات اللي هيتعملها كاشينج والفيلات اللي بتتغير.
ال manifest file
ودا فيل بسيط جدا بتكتب فيه كل الفيلات او الريسورسيز ايا كان نوعها صفحات، صور، فيديو، صوت او فيلات جافاسكريت.
طب ازااي اعمل الفيال ده؟؟؟
اولا لازم تعمله انكلود ف الhtml tag
<html manifest=”example.appcache”>
</html>
وهتحط الattribute دا ف كل صفحة لها ريسورسز محتاج تعملها كاش، كمان ممكن يبقى الفايل دا موجود ف لينك معين زي كدا:
</html>
بالنسبة لإمتداد الفايل دا، ماتحيرش نفسك حط اي امتداد انتا عاوزة مش فارقة خالص
احيانا بتحتاج تضيف حاجة على فايل ال .htaccess ف السيرفر، بس احيانا كتير مابتحتاجش ف اغلب السيرفرات
بحط الكود دا ف فايل ال .htaccess
AddType text/cache-manifest .appcache
وبتغير كلمة .appcache على حسب الامتداد اللي انتا عامله للفايل بتاعك
طب احط اية ف فايل الكاش؟؟؟؟
اخبط دا:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

بتبدأ الفايل بكلمة CACHE MANIFEST وبعدها يابرنس حط اسامي الريسورسز اللي انتا عايزها
اقصى حجم للكاش هو 5 ميجا للمواقع، اما لو بتعمل اضافة لأحد المتصفحات او native mobile based web app بيكون غالبا الحجم غير محدود.
مثال متقدم حبتين:
CACHE MANIFEST

# 2010-06-18:v2

# Explicitly cached ‘master entries’.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

كلمة FALLBACK:
ودي بنستخدمها عشان نظهر لليوزر صفحة معينة معمولها كاشينج عنده
كلمه NETWORK:
ودي بقى يا معلم  :D بتحددله فيها الصفحات اللي بتطلب وجود اليوزر اونلاين زي صفحات ال login
كدا انتا خليت الصفحة موجودة ف الكاش عندك ف البراوزر وهتفضتتعرض لليوزر بنفس الشكل لحد ما يحصل حاجة من ال3
  1.  اليوزر يمسح الكاش من البراوزر
  2.  فايل المانيفيست اللي عند اليوزر يتبدل، ملحوظة لو غيرت المانيفيست اللي ع السيرفر دا مش معناه ان كدا الكاش عند اليوزر اتغير
  3.  واخيرا انك تكون مظبط الصفحات اللي معمول لها كاش برمجيا(جافاسكربت) انها تبعت ريكويست تشوف لو الفيل اتغير عند السيرفر، ودا هنشوفه دلوقتي
اخبط دي:

var appCache = window.applicationCache;appCache.update(); // Attempt to update the user’s cache.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}

الكود دا بيعمل check على المانيفيست عند السيرفر ولو لاقاه مختلف عند الموجود عند اليوزر هيبدله القديم بالجديد ويعمل كاش للحاجات الجديدة ويمسح الحاجات اللي ماعدتش ف الكاش

References
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache

Advertisements

2 Comments

Leave a Comment
  1. mohamed yosry (@mohamedyossry) / May 13 2012 1:59 am

    لو اخدنا اسباب استخدام الكاشنج فيتهيالى ان الاوفلاين براوزنج مش حيكون شى مهم فى المستقبل. لما نعتبر الانترنت شى اساسى زى الكهرباء. بحيث لو قطع تبقى مشكلة و تروح تشتكى الدولة.
    مش بعيد ان شاء الله :D

  2. Mohamed Amged :) / May 17 2012 11:32 am

    ماظنش ان زيادة السرعة بديل فعال، لأن كل يوم تطبيقات الويب بتبقى اكثر تعقيدا والريسورسز اللي محتاجة لوودينج حجمها بيبقى اكبر كل يوم، دا غير بقى وقت البروسيسينج للجافاسكربت، ووقت ال geometric calculations + rendering دا على مستوى المتصفح.
    ف اكيد انتا لما تشيل من دماغك عبء اللودينج بيوفر عليك اكواد performance optimization بالعبييط

Please, Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: