در جلسه قبلی آموزش HTML با web storage در HTML5 آشنا شدیم. در این بخش به کش کردن با HTML5 خواهیم پرداخت.
شما می توانید اپلیکیشن های آفلاین را با قابلیت کش کردن با HTML5 ایجاد کنید.
کش کردن (Application Cache) چیست
بطور عادی بیشتر اپلیکیشن های تحت وب زمانی کار می کنند که شما آنلاین باشید, اما HTML5 یک مکانیزم کش کردن اپلیکیشن را که به مرورگر اجازه می دهد فایل HTML را خودکار ذخیره کند و همه دیگر منابع مورد نیاز را بصورت صحیح بر روی ماشین محلی نمایش دهد.
بنابراین مرورگر می توانید به صفحه وب و منابع آن بدون داشتن کانکشن اینترنت دسترسی داشته باشد.
بعضی از مزایای قابلیت کش کردن با HTML5 :
- وب گردی آفلاین – کاربران می توانند حتی زمانی که آفلاین هستند یا مشکلی در ارتباط شبکه آنها پیش آمد, از اپلکیشن استفاده کنند.
- بهبود عملکرد – منابع کش شده بصورت مستقیم از کامپیوتر کاربر به جای سرور ریموت لود می شود که باعث افزایش سرعت بارگذاری صفحه و عملکرد بهتر می شود.
- کاهش درخواست HTTP و لود سرور – مرورگر مرورگر تنها نیاز است که منابع تغییر یافته/آپدیت شده را از سرور منبع دانلود کند که باعث به حداقل رساندن درخواست های HTTP و کاهش لود سرور می شود.
نکته: قابلیت کش کردن با HTML5 یا همان Application Cache در تمام مرورگرهای مدرن مثل فایرفاکس, کروم, اپرا, سافاری و اینترنت اکسپلورر ۸+ پشتیبانی می شود.
کش کردن فایل با Manifest
برای کش کردن فایل به منظور استفاده آفلاین, نیاز است که مراحل زیر را تکمیل کنید.
قدم اول: ساخت فایل کش Manifest
Manifest یک فایل متنی بخصوص است که به کاربر می گوید چه فایل هایی را کش کند, چه فایل هایی را ذخیره نکند, و چه فایل هایی را با همدیگر جایگزین کند.
فایل Manifest همیشه با کلمه CACHE MANIFEST (حروف بزرگ) شرورع می شود.
مثالی از یک فایل ساده manifest :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
CACHE MANIFEST # v1.0 : 01-06-2019 CACHE: # pages index.html # styles & scripts css/theme.css js/jquery.min.js js/default.js # images /favicon.ico images/logo.png NETWORK: login.php FALLBACK: / /offline.html |
توضیح کد بالا
یک فایل manifest می تواند شامل سه بخش متفاوت از هم باشد: CACHE, NETWORK و FALLBACK
- فایل های لیست شده در زیر هدر بخش
CACHE:(یا بلافاصله بعد از خطCACHE MANIFEST) به صراحت بعد از دانلود شدن کش می شوند. - فایل های لیست شده در زیر هدر بخش
NETWORK:جز منابع لیست سفید هستند که به هیچ وجه کش نمی شوند و بصورت آفلاین در دسترس نیستند. - بخش
FALLBACK:مشخص می کند که صفحات برگشتی را مرورگر باید در زمان عدم اتصال به سرور استفاده کند. هر ورودی در لیست های این بخش شامل تو آدرسUriاست – اولی برای منبع, دومی برای صفحه برگشتی. - خط های شروع شده با
#همان کامنت هستند.
توجه: خود فایل manifest را داخل فایل کش manifest مشخص نکنید, درغیر اینصوت ناممکن است که مرورگر را از وجود فایل جدید manifest مطلع کنیم.
قدم دوم: استفاده از کش فایل manifest
بعد از ساخت و آپلود فایل manifest خود در سرور, اطمینان حاصل کنید که MIME-type فایل manifest در سور بصورت text/cache-manifest پیکربندی شده باشد.
حالا برای استفاده از کش manifest , نیاز است که آن را در صفحه وب خود فعال کنید, به اینصورت که خصوصیت manifest را در المان html بصورت زیر اضافه کنید.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en" manifest="example.appcache"> <head> <title>HTML5 Application Cache</title> </head> <body> <!--The document content will be inserted here--> </body> </html> |
نکته: در وب سرورهای آپاچی, نوع MIME برای فایلهای manifest (.appcache) می تواند با اضافه کردن
AddType text/cache-manifest .appcache
به فایل .htaccess داخل دایرکتری روت اپلیکیشن ست شود.
امیدوارم در این بخش آموزش HTML , از آموزش کش کردن با HTML5 نهایت استفاده را برده باشید.
در بخش بعدی با کش کردن در HTML آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
