سبد (0)

تبلیغات

ذخیره صفحات بر روی کامپیوتر کاربر

در HTML5 به سادگی می توان یک نسخه offline از برنامه وب را با ایجاد یک فایل Manifest ساخت.


Application Cache چیست؟

Html5 قابلیت جدیدی را با نام Application Cache به کاربران وب ارائه داده است و امکان ذخیره شدن صفحات مرور شده بر روی کامپیوتر کاربر و مشاهده آنها را در زمان قطع ارتباط با اینترنت (offline) را فراهم می کند.

Application Cache سه مزیت را در اختیار کاربران قرار می دهد:

  • مرور offline: کاربران می توانند صفحات مورد نظر را حتی در زمان offline، نیز مشاهده نمایند.
  • سرعت بالاتر: صفحات ذخیره شده بر روی کامپیوتر کاربر با سرعت بیشتری لود و فراخوانی می شوند.
  • کاهش حجم اطلاعات ارسالی از سرور: باعث کاهش حجم اطلاعات ارسالی از سرور شده و مرورگر فقط صفحاتی که تغییر کرده اند، را مجددا فراخوانی می کند.

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10+, Firefox, Opera, Chrome, Safari متد Application Cache را پشتیبانی می کنند.


مثالی از یک صفحه HTML با قابلیت Application Cashe

مثال زیر، یک صفحه وب با قابلیت مرور offline صفحات در کامپیوتر کاربر را نشان می دهد. در این صفحه قابلیت Application Cache فعال است. توجه نمایید که این خاصیت در حالت عادی، فعال نیست.

مثال (ذخیره صفحات بر روی کامپیوتر کاربر)

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>
خودتان امتحان کنید »

فعال نمودن قابلیت Application Cache

برای فعال کردن این قابلیت، در تگ <html>، خاصیت manifest را با نام فایل manifest تنظیم نمایید:

<!DOCTYPE HTML>
<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 الزامی است:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

در فایل Manifest بالا، لیست فایل هایی که باید Cache شوند آورده شده است، یک فایل CSS، یک عکس با فرمت gif. و یک فایل JavaScript

زمانی که فایل Manifest اجرا می شود مرورگر 3 فایل تعیین شده را از سرور سایت، دانلود و ذخیره می کند. بنابراین هر زمان که کاربر به اینترنت متصل نباشد، سایر فایل های جانبی صفحه (مثل تم یا اسکریپت ها) نیز قابل دسترس خواهند بود.

NETWORK

در قسمت بعدی، عبارت Network قرار داده می شود. فایل هایی که در زیر عبارت Network تعیین شوند هیچگاه توسط مرورگر Cache نخواهند شد:

NETWORK:
login.asp

از علامت ستاره (*) می توانید برای نشان دادن اینکه تمام فایل ها، نیاز به ارتباط اینترنتی دارند استفاده نمایید:

NETWORK:
*

FALLBACK

در قسمت آخر نیز، عبارت FALLBACK قرار داده می شود. در صورتی که صفحه به هر دلیلی قابل دسترسی و مشاهده نباشد، فایلی که در زیر این عبارت تعیین شود، نشان داده خواهد شد.

در مثال زیر، فایل "offline.html" در صورتی که ارتباط با اینترنت میسر نباشد، بجای تمام فایل هایی که در پوشه /html/ قرار دارند، بکار خواهد رفت:

FALLBACK:
/html/ /offline.html

Update و به روز رسانی فایل های Cache شده

فایلی که بر روی کامپیوتر کاربر ذخیره می شود بدون تغییر باقی می ماند. مگر اینکه یکی از حالات زیر اتفاق بیافتد:

  • کاربر اطلاعات Cache شده مرورگر را پاک کند.
  • فایل Manifest تغییر کند.
  • Application Cache بصورت برنامه ریزی شده تغییر کند.

مثال - فرم نهایی فایل MANIFEST

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 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)

دیدگاه‌ها  

+3 # فرشید 1395-12-15 13:28
با سلام
متشکرم از سایت بی نظیرتون
خیلی از مثال های اچ ای ام ال 5 مربوط به JavaScript هستن !
من الان اج تی ام ال رو تموم کردم ولی برای یاد گیری اچ تی ام ال 5 نیاز به یاد گیری JavaScript دارم !
الان ترتیب یادگیری رو چطور ادامه بدم ؟
یعنی اول برم سمت js و بعدش بیام سراغ html5 ?
ممنون و موفق باشین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-12-17 09:47
سلام، طبق فرمایش شما در برخی از مطالب آموزش HTML5 از JavaScript استفاده شده است که بهتر است قبل از مطالعه ی قسمت مذکور مروری بر JavaScript داشته باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # سما 1395-11-15 13:28
سلام من متوجه نشدم چطوری آپدیت میشه فایل manifest.
یعنی مرورگر چطوری میفهمه با یک کامنت تاریخ باید آپدیت بشه ، آخه اون کامنته که
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-12-17 09:54
سلام، لطفا یکبار دیگر به جمله زیر دقت کنید:
"یکی از راه های دوباره Cache کردن فایل ها توسط مرورگر، تغییر فایل Manifest است و این کار را میتوانیم با تغییر تاریخ و نسخه مشخص شده در خط Comment انجام دهیم."
به این ترتیب با تغییر تاریخ و نسخه فایل Manifest ، مرورگر متوجه تغییر شده و آنرا با نسخه بروز شده جایگزین می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # kitana 1395-10-27 17:42
سلام خدمت شما و تشکر از سایت خوبتون ببخشین میتونین کل کد رو برام بنویسین.چون نمیدونم بعد از اینکه در تگ html ویژگی زیر رو تنظیم کردم آیا باید علامت < رو بزارم بقیه رو بنویسم یا نبندم همو رو داخل ش بنویسم...!؟
<html manifest="demo. appcache">
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1396-02-26 08:41
سلام و عرض ادب
مقداری که برای ویژگی 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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mehdi2237 1396-02-25 21:17
اون کدها در فایل .appcache قرار میگیره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # kitana 1395-10-27 17:38
آموزش ذخیره صفحات بر روی کامپیوتر کاربر عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهدی ربانی 1394-07-29 10:29
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # rezabay22 1393-12-01 11:15
سلام آیا میشه کاری کرد که کد تغییر یافته دوباره رست نشود
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # مظاهر نصوحی 1393-12-01 14:09
دوست عزیز سوالتون کمی نا مفهومه لطفاً بیشتر توضیح بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # لیلا 1393-02-11 00:03
خیلی عالی بود ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # خانم مهندس جابر زاده 1392-09-20 23:44
آموزش خوبی بود. ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی