ذخیره صفحات بر روی کامپیوتر کاربر
در HTML5 به سادگی می توان یک نسخه offline از برنامه وب را با ایجاد یک فایل Manifest ساخت.
Application Cache چیست؟
Html5 قابلیت جدیدی را با نام Application Cache به کاربران وب ارائه داده است و امکان ذخیره شدن صفحات مرور شده بر روی کامپیوتر کاربر و مشاهده آنها را در زمان قطع ارتباط با اینترنت (offline) را فراهم می کند.
Application Cache سه مزیت را در اختیار کاربران قرار می دهد:
- مرور offline: کاربران می توانند صفحات مورد نظر را حتی در زمان offline، نیز مشاهده نمایند.
- سرعت بالاتر: صفحات ذخیره شده بر روی کامپیوتر کاربر با سرعت بیشتری لود و فراخوانی می شوند.
- کاهش حجم اطلاعات ارسالی از سرور: باعث کاهش حجم اطلاعات ارسالی از سرور شده و مرورگر فقط صفحاتی که تغییر کرده اند، را مجددا فراخوانی می کند.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10+, Firefox, Opera, Chrome, Safari متد Application Cache را پشتیبانی می کنند.
مثالی از یک صفحه HTML با قابلیت Application Cashe
مثال زیر، یک صفحه وب با قابلیت مرور offline صفحات در کامپیوتر کاربر را نشان می دهد. در این صفحه قابلیت Application Cache فعال است. توجه نمایید که این خاصیت در حالت عادی، فعال نیست.
مثال (ذخیره صفحات بر روی کامپیوتر کاربر)
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
فعال نمودن قابلیت Application Cache
برای فعال کردن این قابلیت، در تگ <html>، خاصیت manifest را با نام فایل manifest تنظیم نمایید:
<html manifest="demo.appcache">
...
</html>
هر صفحه ای که خاصیت manifest برای آن تنظیم شده باشد، با هر بار مشاهده کاربر در حافظه ذخیره می شود (Cached). اگر خاصیت manifest مشخص نشده باشد، صفحه مورد نظر در حافظه ذخیره نمی شود (مگر اینکه بطور مستقیم صفحه مورد نظر را در فایل manifest مشخص نمایید.)
فرمت رایج برای ذخیره فایل های manifest، فرمت "appcache." است.
فایل Manifest
فایل Manifest یک فایل متنی ساده است و به مرورگر می گوید که چه چیزهایی را باید و نباید Cache نماید.
این فایل شامل 3 قسمت اصلی است:
- Cashe ManiFest: فایل های تعیین شده در این قسمت، در هر بار مشاهده کاربر، دانلود و Cache خواهند شد.
- Network: فایل های تعیین شده در این قسمت نیازمند وجود ارتباط اینترنتی به سرور بوده و هیچگاه ذخیره نمی شوند.
- Fallback: فایل یا فایل های ذخیره شده در این قسمت، در صورتی که به هر دلیل صفحه مورد نظر کاربر، قابل دسترسی نباشد، فراخوانی می شوند. (به جای فایل اصلی)
در این قسمت به تشریح خط به خط فایل Manifest می پردازیم:
CACHE MANIFEST
در خط اول، ذکر عبارت CACHE MANIFEST الزامی است:
/theme.css
/logo.gif
/main.js
در فایل Manifest بالا، لیست فایل هایی که باید Cache شوند آورده شده است، یک فایل CSS، یک عکس با فرمت gif. و یک فایل JavaScript
زمانی که فایل Manifest اجرا می شود مرورگر 3 فایل تعیین شده را از سرور سایت، دانلود و ذخیره می کند. بنابراین هر زمان که کاربر به اینترنت متصل نباشد، سایر فایل های جانبی صفحه (مثل تم یا اسکریپت ها) نیز قابل دسترس خواهند بود.
NETWORK
در قسمت بعدی، عبارت Network قرار داده می شود. فایل هایی که در زیر عبارت Network تعیین شوند هیچگاه توسط مرورگر Cache نخواهند شد:
login.asp
از علامت ستاره (*) می توانید برای نشان دادن اینکه تمام فایل ها، نیاز به ارتباط اینترنتی دارند استفاده نمایید:
*
FALLBACK
در قسمت آخر نیز، عبارت FALLBACK قرار داده می شود. در صورتی که صفحه به هر دلیلی قابل دسترسی و مشاهده نباشد، فایلی که در زیر این عبارت تعیین شود، نشان داده خواهد شد.
در مثال زیر، فایل "offline.html" در صورتی که ارتباط با اینترنت میسر نباشد، بجای تمام فایل هایی که در پوشه /html/ قرار دارند، بکار خواهد رفت:
/html/ /offline.html
Update و به روز رسانی فایل های Cache شده
فایلی که بر روی کامپیوتر کاربر ذخیره می شود بدون تغییر باقی می ماند. مگر اینکه یکی از حالات زیر اتفاق بیافتد:
- کاربر اطلاعات Cache شده مرورگر را پاک کند.
- فایل Manifest تغییر کند.
- Application Cache بصورت برنامه ریزی شده تغییر کند.
مثال - فرم نهایی فایل MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
توجه: خطوطی که با کاراکتر "#" شروع می شوند، توضیحات اند (comments)، اما علاوه بر این، می توان از آن برای اهداف دیگری نیز استفاده نمود. مرورگر پس از ذخیره صفحه بر روی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد، مگر اینکه فایل Manifest آنرا Update کنید. یکی از راه های دوباره Cache کردن فایل ها توسط مرورگر، این است که تاریخ و نسخه مشخص شده در خط Comment را تغییر دهید.
نکاتی درباره Application Cache
در استفاده از این قابلیت و اینکه چه فایل هایی را بر روی کامپیوتر کاربران Cache می کنید، دقت نمایید.
مرورگر پس از ذخیره صفحه برروی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد. مگر اینکه فایل Manifest آنرا Update کنید.
همچنین مرورگرهای مختلف محدودیت مشخصی در حجم فایل های ذخیره شده لحاظ می کنند (معمولا مرورگرها، حداکثر 5 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 19358
دیدگاه‌ها
با سلام
متشکرم از سایت بی نظیرتون
خیلی از مثال های اچ ای ام ال 5 مربوط به JavaScript هستن !
من الان اج تی ام ال رو تموم کردم ولی برای یاد گیری اچ تی ام ال 5 نیاز به یاد گیری JavaScript دارم !
الان ترتیب یادگیری رو چطور ادامه بدم ؟
یعنی اول برم سمت js و بعدش بیام سراغ html5 ?
ممنون و موفق باشین
سلام، طبق فرمایش شما در برخی از مطالب آموزش HTML5 از JavaScript استفاده شده است که بهتر است قبل از مطالعه ی قسمت مذکور مروری بر JavaScript داشته باشید.
سلام من متوجه نشدم چطوری آپدیت میشه فایل manifest.
یعنی مرورگر چطوری میفهمه با یک کامنت تاریخ باید آپدیت بشه ، آخه اون کامنته که
سلام، لطفا یکبار دیگر به جمله زیر دقت کنید:
"یکی از راه های دوباره Cache کردن فایل ها توسط مرورگر، تغییر فایل Manifest است و این کار را میتوانیم با تغییر تاریخ و نسخه مشخص شده در خط Comment انجام دهیم."
به این ترتیب با تغییر تاریخ و نسخه فایل Manifest ، مرورگر متوجه تغییر شده و آنرا با نسخه بروز شده جایگزین می کند.
سلام خدمت شما و تشکر از سایت خوبتون ببخشین میتونین کل کد رو برام بنویسین.چون نمیدونم بعد از اینکه در تگ html ویژگی زیر رو تنظیم کردم آیا باید علامت < رو بزارم بقیه رو بنویسم یا نبندم همو رو داخل ش بنویسم...!؟
<html manifest="demo. appcache">
سلام و عرض ادب
مقداری که برای ویژگی manifest در بالا تنظیم شده است در واقع نام یک فایل است. فایل مذکور که با فرمت appcache. است یک فایل متنی ساده است و به مرورگر می گوید که چه چیزهایی را باید و نباید Cache نماید.
بنابراین فایل demo.appcache را ایجاد کنید و در ادامه چیزهایی که باید و نباید Cache شوند را مانند زیر در آن مشخص کنید:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
اون کدها در فایل .appcache قرار میگیره
آموزش ذخیره صفحات بر روی کامپیوتر کاربر عالی بود.
عالی بود.
سلام آیا میشه کاری کرد که کد تغییر یافته دوباره رست نشود
دوست عزیز سوالتون کمی نا مفهومه لطفاً بیشتر توضیح بدید.
خیلی عالی بود ممنون
آموزش خوبی بود. ممنون