ذخیره‌سازی برنامه HTML5

با استفاده از ذخیره‌سازی برنامه، با ایجاد فایل manifest cache، می‌توان به راحتی نسخه‌های خارج از اینترنت وب‌اپلیکیشن‌ها را ایجاد کرد.

ذخیره‌سازی برنامه چیست؟

HTML5 برنامه ذخیره‌سازی (Application Cache) را معرفی کرده است، که این به این معناست که می‌توان از وب‌اپلیکیشن‌ها ذخیره‌سازی کرد و بدون اتصال اینترنت نیز به آن‌ها دسترسی داشت.

کوشش‌های ذخیره‌سازی برنامه برای برنامه‌ها سه مزیت می‌آورد:

  1. بازدید از خط‌مونتاژ - کاربران می‌توانند آن‌ها را در حالت خط‌مونتاژ استفاده کنند
  2. سرعت - منابع ذخیره‌شده بارگذاری می‌شوند
  3. کاهش بار سرور - مرورگر فقط منابع به‌روزرسانی‌شده یا تغییر یافته را از سرور دانلود خواهد کرد

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که پشتیبانی کامل از Application Cache را دارد.

API
Application Cache 4.0 10.0 3.5 4.0 11.5

مثال HTML Cache Manifest

در اینجا یک مستند HTML با manifest cache آورده شده است (برای استفاده آفلاین):

مثال

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
محتوای مستند ......
</body>
</html>

آزمایش کنید

Base Cache Manifest

برای فعال‌سازی برنامه ذخیره شده، manifest attribute را در تگ <html> مستند قرار دهید:

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

هر صفحه‌ای که manifest مشخص شده است، در زمان دسترسی کاربر به آن در حافظه ذخیره می‌شود. اگر property manifest مشخص نشده باشد، صفحه در حافظه ذخیره نمی‌شود (مگر اینکه صفحه مستقیماً در فایل manifest مشخص شده باشد).

نام پیشنهادی فایل‌های فایل manifest این است: ".appcache".

توجه:فایل manifest باید نوع MIME صحیح را تنظیم کند، یعنی "text/cache-manifest". باید در سرور وب پیکربندی شود.

فایل Manifest

فایل manifest یک فایل متنی ساده است که به مرورگر اطلاع می‌دهد چه محتوایی باید در حافظه ذخیره شود (و چه محتوایی نباید)

فایل manifest سه بخش دارد:

  • CACHE MANIFEST - در این عنوان، فایل‌هایی که مشخص می‌شوند، پس از بارگذاری اولیه در حافظه ذخیره می‌شوند
  • NETWORK - در این عنوان، فایل‌هایی که مشخص می‌شوند، نیاز به اتصال به سرور دارند و در حافظه ذخیره نمی‌شوند
  • FALLBACK - در این عنوان، فایل‌هایی که مشخص می‌شوند، صفحات بازگشتی را برای زمانی که صفحه قابل دسترسی نیست (مثلاً صفحه 404) تعیین می‌کنند

CACHE MANIFEST

خط اول، CACHE MANIFEST، ضروری است:

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

فایل manifest بالا سه منبع را لیست می‌کند: یک فایل CSS، یک تصویر GIF و یک فایل JavaScript. هنگامی که فایل manifest بارگذاری می‌شود، مرورگر این سه فایل را از دایرکتوری ریشه وب‌سایت دانلود می‌کند. سپس، هر زمان که کاربر با اینترنت قطع شود، این منابع همچنان قابل استفاده هستند.

NETWORK

بخش NETWORK این فایل تنظیمات "login.php" را مشخص می‌کند که هرگز در حافظه ذخیره نمی‌شود و در حالت آفلاین قابل استفاده نیست:

NETWORK:
login.asp

می‌توان از ستاره برای نشان دادن استفاده از اتصال اینترنت برای تمام منابع/فایل‌های دیگر استفاده کرد:

NETWORK:
*
FALLBACK

بخش FALLBACK زیر مشخص می‌کند که اگر اتصال اینترنت برقرار نشود، باید تمام فایل‌های دایرکتوری /html/ با "offline.html" جایگزین شوند:

FALLBACK:
/html/ /offline.html

نکته:URI اول منبع است و دومین جایگزین.

به‌روزرسانی ذخیره‌سازی

وقتی برنامه ذخیره شود، آن تا وقتی که یکی از موارد زیر رخ دهد در ذخیره‌سازی باقی می‌ماند:

  • کاربر ذخیره‌سازی مرورگر را پاک می‌کند
  • فایل manifest به‌روزرسانی شده است (لطفاً به نکات زیر مراجعه کنید)
  • به‌روزرسانی ذخیره‌سازی برنامه توسط برنامه

مثال - فایل کامل Cache Manifest

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

توجه:خطوط شروع شده با '#' خطوط نظرات هستند، اما می‌توانند برای سایر کاربردها نیز استفاده شوند. ذخیره‌سازی برنامه فقط در صورت تغییر فایل manifest به‌روزرسانی می‌شود. اگر تصویری را ویرایش کنید یا یک تابع JavaScript را تغییر دهید، این تغییرات دوباره ذخیره نمی‌شوند. به‌روزرسانی تاریخ و شماره نسخه در خطوط نظرات روشی برای مجدداً ذخیره کردن فایل‌ها توسط مرورگر است.

نکات توجه در مورد ذخیره‌سازی برنامه

لطفاً محتوای ذخیره شده را نظارت کنید.

وقتی فایل ذخیره شد، مرورگر به نمایش دادن نسخه ذخیره شده ادامه می‌دهد، حتی اگر شما فایل‌های سرور را تغییر دهید. برای اطمینان از به‌روزرسانی ذخیره‌سازی مرورگر، باید فایل manifest به‌روزرسانی شود.

نکته:محدودیت‌های ظرفیت ذخیره‌سازی داده‌های ذخیره شده در مرورگر ممکن است متفاوت باشد (محدودیت برخی مرورگرها برای هر وب‌سایت 5MB است).