23
تشکر

Application Cache در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

همانطور که همه شما میدانید دنیای وب هر روز گسترش پیدا میکند. امروزه اپلیکیشن های بسیاری بر پایه وب ساخته میشود. همانطور که میدانید اپلیکیشن ها میتوانند به صورت آفلاین هم در دسترس کاربران قرار گیرند. اما اپلیکیشن های بر پایه وب برای اینکار چه راه حلی دارند؟ Cache

Cache راه حلی برای ساخت اپلیکیشن های بر پایه وب است. ساختار اولیه Cache موجود در مرورگرها برای اینکار کافی نیست، به همین دلیل HTML5 تکنولوژی به نام Application Cache را توسعه داده است که این امکان را میدهد اپلیکیشن هایی به صورت آفلاین هم بسازیم.

استفاده از Application Cache سه نتیجه خوب برای شما دربر دارد:

1. مرور آفلاین: کاربران میتوانند به صورت آفلاین کل سایت شما را مرور کنند.

2. سرعت: فایلهای کش شده دارای سرعت خیلی بیشتری هستند.

3. کاهش درخواست از سرور: مروگر تنها فایلهایی را از سرور درخواست میکند که تغییر کرده باشند.

Application Cache یا AppCache این امکان را به توسعه دهنده میدهد که انتخاب کند کدام فایل ها را میتواند Cache کند و کدام فایل ها را تنها باید از سرور دریافت کند.

در ادامه همراه ما باشید…

فایل cache manifest

فایل cache manifest دارای لیست فایلهایی است که مرورگر برای دسترسی آفلاین باید آنها را Cache کند. ما باید این فایل را در دسترس مرورگر قرار دهیم که برای اینکار در تگ html آدرس فایل cache manifest را قرار میدهیم.

<html manifest="example.appcache">
  ...
</html>

خاصیت manifestباید در تمام صفحات سایت شما که میخواهید از AppCache استفاده شود قرار داشته باشد. نبود این خاصیت در یک صفحه به این معنی است که شما از AppCache استفاده نمیکنید.

میتوانید از آدرس های مطلق (absolute) هم برای آدرس دهی فایل cache manifest استفاده کنید. همینطور میتوانید از هر پسوندی برای فایل cache manifest استفاده کنید. البته ابتدا باید MIME-TYPE آن را به سرور اضافه کرده باشید.

برای مثال در کد بالا که ما از پسوند appcache. استفاده کردیم میتوانیم MIME-TYPE آنرا در htaccess. به صورت زیر اضافه کنیم:

AddType text/cache-manifest .appcache

ساختار فایل manifest

یک فایل ساده manifest را در زیر میتوانید ببینید:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

این مثال چهار فایل را جهت کش شده به مرورگر معرفی میکند.

رشته CACHE MANIFEST باید به همین صورت و در ابتدای فایل نوشته شود.

بعضی از مرورگرها محدودیت هایی برای میزان فضا برای کش شدن صفحات سایت دارند. اما اگر برای Chrome Web Store اپلیکیشن مینویسید میتوانید از unlimitedStroge Permission استفاده کنید تا فضای نامحدود در اختیار شما قرار گیرد.

اگر دانلود کردن فایلی که در manifest ذکر شده است با مشکل روبرو شود کل عملیات AppCache متوقف میشود و از نسخه قبلی استفاده خواهد شد.

حالا نگاهی به یک فایل manifest پیچیده تر میکنیم:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

خط هایی که با # شروع میشوند کامنت هستند. یک AppCache زمانی بروز میشود که فایل manifest بروز شود. برای مثال یک تابع جاوا اسکریپت در یکی از فایلهایتان را بروز کردید اما کاربران هنوز هم از همان نسخه قدیمی استفاده میکنند. برای اینکه شما به مرورگر بگویید که فایل بروز شده است و دوباره آن را کش کند باید فایل manifest را بروز کنید.

ساخت یک خط کامنت و  نوشتن نسخه فایل در هر بار بروز رسانی میتواند این اطمینان را به شما بدهد که همه کاربران از آخرین نسخه های فایل استفاده میکنند.

یک فایل manifest از سه قسمت CACHE, NETWORK و FALLBACK تشکیل میشود.

CACHE: در این قسمت لیست فایل هایی که میخواهید توسط مرورگر کش شود را قرار میدهیم.

NETWORK: فایلهایی که در این لیست قرار میگیرد برای استفاده نیاز به دانلود شدن دارند، و مرورگر از کش کردن آنها جلوگیری میکند.

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

نکته: این بخش ها میتواند به هر ترتیبی نوشته شود و همچنین میتوان چند بار از آنها در یک فایل استفاده کرد.

خب حالا یک فایل manifest دیگر را بررسی میکنیم:

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online. 
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

در این فایل زمانی که کاربر بخواهد به روت سایت دسترسی داشته باشد و آفلاین باشد، فایل offline.html نمایش داده میشود. همچنین در این فایل به غیر از فایلهایی که برای کش شدن به مرورگر معرفی شده اند بقیه فایل ها نیاز به دسترسی به اینترنت دارند.

برای مثال شما در عکس زیر مشاهده میکنید که چهار درخواست HTTP داده شده است. اما همه آنها از Cache لود شده است. حتی عکسی با سایز 534KB هم از کش لود شده است.

appCache

appCache

مشاهده دمو

بروزرسانی کش

مواقعی که کش کاربر آپدیت میشود شامل موارد زیر است:

1. کاربر اطلاعات کش خود را پاک میکند.

2. فایل manifest بروز میشود.

3. AppCache به صورت برنامه ریزی شده بروز شود.

وضعیت Cache

متد window.applicationCache میتواند به شما وضعیت جاری Cache را بدهد.

var appCache = window.applicationCache;

switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};

برای آپدیت کش با استفاده از برنامه نویسی ابتدا باید متد ()applicationCache.update را فراخوانی کنید. برای مثال در کد زیر ابتدا در رویداد updateready وضعیت کش بررسی میشود سپس اگر manifest بروز شده بود با استفاده از متد ()applicationCache.swapCache نسخه جدید جایگزین نسخه قبلی میشود و در صورت موافقت کاربر صفحه دوباره بارگذاری خواهد شد.

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

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

رویداد ها

تمام رویداد های AppCache را در زیر میتوانید ببینید:

function handleCacheEvent(e) {
  //...
}

function handleCacheError(e) {
  alert('Error: Cache failed to update!');
};

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
  • farhad می‌گه:

    راستی fallback را متوجه نشدم!!
    ناراحت شدم:)

  • farhad می‌گه:

    سایت های بسیار زیادی دیدم ولی تا حالا ندیده بودم سایتی به مثل شما واضح و مفهومی توضیح داده باشه.
    از این کامل ترم میتونست باشه ولی همینم خیلی خوب بود.
    ممنون
    آپارنت موفق باشی

  • رضا طاهری می‌گه:

    سلام محسن جان
    ممنون
    فقط اگر میشه سایتتو زود به زود اپدیت کن

  • MaMaL می‌گه:

    عالی. دمت گرم محسن. خیلی خوب و دقیق توضیح دادی. خسته نباشی.

  • sali می‌گه:

    عالی بود ممنون


  • نظرات این مطلب بسته است.