طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش HTML – کش کردن با HTML5


آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با web storage در HTML5 آشنا شدیم. در این بخش به کش کردن با HTML5 خواهیم پرداخت.

شما می توانید اپلیکیشن های آفلاین را با قابلیت کش کردن با HTML5 ایجاد کنید.

کش کردن (Application Cache) چیست

بطور عادی بیشتر اپلیکیشن های تحت وب زمانی کار می کنند که شما آنلاین باشید, اما HTML5 یک مکانیزم کش کردن اپلیکیشن را که به مرورگر اجازه می دهد فایل HTML را خودکار ذخیره کند و همه دیگر منابع مورد نیاز را بصورت صحیح بر روی ماشین محلی نمایش دهد.

بنابراین مرورگر می توانید به صفحه وب و منابع آن بدون داشتن کانکشن اینترنت دسترسی داشته باشد.

بعضی از مزایای قابلیت کش کردن با HTML5 :

  • وب گردی آفلاین – کاربران می توانند حتی زمانی که آفلاین هستند یا مشکلی در ارتباط شبکه آنها پیش آمد, از اپلکیشن استفاده کنند.
  • بهبود عملکرد – منابع کش شده بصورت مستقیم از کامپیوتر کاربر به جای سرور ریموت لود می شود که باعث افزایش سرعت بارگذاری صفحه و عملکرد بهتر می شود.
  • کاهش درخواست HTTP و لود سرور – مرورگر مرورگر تنها نیاز است که منابع تغییر یافته/آپدیت شده را از سرور منبع دانلود کند که باعث به حداقل رساندن درخواست های HTTP و کاهش لود سرور می شود.

 

نکته: قابلیت کش کردن با HTML5 یا همان Application Cache در تمام مرورگرهای مدرن مثل فایرفاکس, کروم, اپرا, سافاری و اینترنت اکسپلورر ۸+ پشتیبانی می شود.

 

کش کردن فایل با Manifest

برای کش کردن فایل به منظور استفاده آفلاین, نیاز است که مراحل زیر را تکمیل کنید.

حتما بخوانید  آموزش HTML - تصاویر در HTML

قدم اول: ساخت فایل کش Manifest

Manifest یک فایل متنی بخصوص است که به کاربر می گوید چه فایل هایی را کش کند, چه فایل هایی را ذخیره نکند, و چه فایل هایی را با همدیگر جایگزین کند.

فایل Manifest همیشه با کلمه CACHE MANIFEST (حروف بزرگ) شرورع می شود.

مثالی از یک فایل ساده manifest :

توضیح کد بالا

یک فایل manifest می تواند شامل سه بخش متفاوت از هم باشد: CACHE, NETWORK و FALLBACK

  • فایل های لیست شده در زیر هدر بخش CACHE: (یا بلافاصله بعد از خط CACHE MANIFEST) به صراحت بعد از دانلود شدن کش می شوند.
  • فایل های لیست شده در زیر هدر بخش NETWORK: جز منابع لیست سفید هستند که به هیچ وجه کش نمی شوند و بصورت آفلاین در دسترس نیستند.
  • بخش FALLBACK: مشخص می کند که صفحات برگشتی را مرورگر باید در زمان عدم اتصال به سرور استفاده کند. هر ورودی در لیست های این بخش شامل تو آدرس Uri است – اولی برای منبع, دومی برای صفحه برگشتی.
  • خط های شروع شده با # همان کامنت هستند.

توجه: خود فایل manifest را داخل فایل کش manifest مشخص نکنید, درغیر اینصوت ناممکن است که مرورگر را از وجود فایل جدید manifest مطلع کنیم.

حتما بخوانید  آموزش HTML - تگ script در html

 

قدم دوم: استفاده از کش فایل manifest

بعد از ساخت و آپلود فایل manifest خود در سرور, اطمینان حاصل کنید که MIME-type فایل manifest در سور بصورت text/cache-manifest پیکربندی شده باشد.

حالا برای استفاده از کش manifest , نیاز است که آن را در صفحه وب خود فعال کنید, به اینصورت که خصوصیت manifest را در المان html بصورت زیر اضافه کنید.

نکته: در وب سرورهای آپاچی, نوع MIME برای فایلهای manifest (.appcache) می تواند با اضافه کردن

AddType text/cache-manifest .appcache

به فایل .htaccess داخل دایرکتری روت اپلیکیشن ست شود.

 

امیدوارم در این بخش آموزش HTML , از آموزش کش کردن با HTML5 نهایت استفاده را برده باشید.

در بخش بعدی با کش کردن در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه