کش برنامه یا HTML5 Cache چیه؟ تا حالا اسمش رو شنیدین؟ میدونین کاربرد اصلی اون چیه و چطوری میشه ازش استفاده کرد؟ با ویژگی مانیفست آشنا هستین؟ خب خب اگه هیچ کدوم از این موارد رو نمی‌دونین اصلاً خودتون رو ناراحت نکنین چون من امروز قراره تو این پست براتون از سیر تا پیاز AppCache و ربطشون به فایل‌های مانیفست رو بگم!

پس بهتره با ما همراهی کنین تا نکات خوبی دستگیرتون بشه:

کش برنامه چیست؟

من تا الان تو این وبسایت کلی درمورد کش کردن و انواع کش صحبت کردیم و چیزی که امروز نظر منو به خودش جلب کرد کش برنامه و نقش اون در مواقع استفاده آفلاین از یه برنامه بود!

کش اپلیکیشن یه حافظه پنهانیه که به برنامه‌های وب اجازه میده آفلاین بشن! این رابط برنامه منابعی رو فهرست میکنه که مرورگرها باید اون رو ذخیره کنن تا بتونن به صورت آفلاین هم در دسترس باشن.

در واقع تو این نوع کش، برنامه های بارگذاری شده، ذخیره میشن و به درستی در حالت آفلاین کار میکنن، حتی اگه کاربران دکمه Refresh رو کلیک کنن!! ناگفته نمونه که کش برنامه یه سری مزایایی هم داره:

مرورگر آفلاین

مثلاً کاربران می‌تونن در حالت آفلاین هم تو سایت مورد نظرشون Navigate کنن.

سرعت

منابع کش محلی‌اند و بنابراین خیلی سریع‌تر بارگذاری میشن.

کاهش بار سرور

بارگیری‌های سرور رو کاهش میده پس مرورگر فقط منابعی که از سرور تغییر کرده رو دانلود میکنه.

نحوه عملکرد کش برنامه به چه صورت است؟

فایل کش مانیفست چیست؟

پرونده کش مانیفست یه فایل متنی ساده است که منابعی رو که مرورگر باید برای دسترسی آفلاین ذخیره کنه، فهرست میکنه. این منابع توسط URI شناسایی میشن. مطالب مشخص شده در کش باید دارای یه طرح، میزبان و پورت مشابه مانیفست باشن.

قسمت‌های فایل کش مانیفست

یه فایل کش مانیفست سه تا بخش CACHE, NETWORK و FALLBACK داره:

CACHE

این بخش پیش فرض برای ورودی‌های موجود تو یه فایل Manifest Cache است و پرونده‌هایی که در زیر عنوان CACHE قرار میگیرن، یا بلافاصله بعد از خط CACHE MANIFEST هستن، بعد از بارگیری سریعاً ذخیره میشن.

NETWORK

پرونده‌های که زیر این قسمت قرار میگیرند:

این پرونده‌ها جزو منابع لیست سفید هستند که به اتصال سرور نیاز دارن! درخواست‌های این منابع حتی اگه کاربر آفلاین هم باشه از کش میگذرن. پس در واقع این فایل‌ها کش نمیشن و به صورت آفلاین در دسترس نیستند!

FALLBACK

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

این سه تا بخش رو میشه به ترتیب تو یه فایل MANIFEST CACHE ذکر کرد و هر بخشی می‌تونه بیشتر از یه بار تو مانیفست واحد ظاهر بشه.

فعال کردن کش HTML5

برای فعال کردن AppCache برای یه برنامه، عنصر مانیفست رو داخل <html> وارد کنین:

<html manifest=”/example.appcache”>

</html>

عنصر مانیفست برای Manifest cache یه فایل، به URL مراجعه میکنه: یه فایل متنی، URL هایی رو لیست میکنه که مرورگر باید برای برنامه شما کش کنه.

شما باید تو هر صفحه ویژگی مشخصی که مد نظرتون هست رو درج کنین. مرورگر صفحات رو بدون ویژگی مانیفست ذخیره نمیکنه مگه این که چنین صفحاتی تو پرونده مانیفست قرار گبرین. البته لازم نیست همه صفحاتی که می‌خواین تو در مانیفست کش بشن رو لیست کنین، خود مرورگر به صورت ضمنی هر صفحه‌ای که کاربر بازدید میکنه رو اضافه میکنه و این کار ویژگی مانیفست رو تو کش برنامه تنظیم میکنه.

بعضی مرورگرها مثل فایرفاکس، تو نوار اعلانات اولین باری که یه برنامه از کش برنامه استفاده میکنه رو نشون میدن. در چنین مواقعی همچین پیامی رو نشون میده:

“سایت example.com در حال درخواست ذخیره داده روی کامپیوتر، برای استفاده آفلاین است”. که زیرش هم دوتا گزینه «اجازه میدهم» و «اجازه نمی‌دهم» ظاهر میشه.

اصطلاح “برنامه آفلاین” گاهی وقت‌ها به طور خاص به برنامه‌هایی اطلاق میشه که کاربر اجازه استفاده از قابلیت‌های آفلاین رو داره.

دانلود اسناد برای کش برنامه

استفاده از کش برنامه روند طبیعی بارگیری یه سند رو تغییر میده:

  • اگه یه Application Cache وجود داشته باشه، مرورگر سند و منابع اون رو مستقیماً از حافظه نهان، بدون دسترسی به شبکه بارگیری میکنه. این کار باعث افزایش زمان بارگذاری اون سند میشه.
  • سپس مرورگر بررسی میکنه که آیا Manifest Cache در سرور به روز شده یا نه.
  • در صورت به روز رسانی کش، مرورگر نسخه جدیدی از مانیفست رو بارگیری میکنه. این کار در بک گراند انجام میشه و تاثیر قابل توجهی روی عملکرد نداره.

مراحل دانلود اسناد در کش برنامه

مراحل بارگیری اسناد و به روز رسانی در کش برنامه با جزئیات بیشتر تو مراحل زیر گفته شده:

  1. هنگامی که مرورگر از سندی که داری عنصر مانیفست است بازدید میکنه، اگه AppCache وجود نداشته باشه، مرورگر سند رو بارگیری میکنه و سپس تمام ورودی‌های نام برده شده تو پرونده مانیفست رو fetch میکنه و در نسخه اول کش برنامه رو ایجاد میکنه.
  2. بازدیدهای بعدی از اون سند باعث میشه مرورگر یه بار دیگه سند و سایر دارایی‌های مشخص شده در پرونده مانیفست رو از کش برنامه (دقت کنین از کش! نه از سرور) بارگیری کنه. علاوه بر این مرورگر یه رویداد بررسی رو به windows.applicationCache ارسال میکنه و مطابق با قوانین مناسب ذخیره سازی HTTP، پرونده مانیفست رو بارگیری میکنه.
  3. اگه نسخه ذخیره شده فعلی از مانیفستِ به روز باشه، مرورگر یه رویداد noupdate رو به ApplicationCache ارسال میکنه و پروسه آپدیت تکمیل میشه. توجه داشته باشین که اگه منابع ذخیره شده روی سرور رو تغییر بدین باید خود فایل مانیفست رو هم طوری تغییر بدین که مرورگر متوجه بشه باید دوباره منابع رو بارگیری کنه.
  4. اگه پرونده مانیفست تغییر کرده باشه، کلیه پرونده‌های نام برده تو مانیفست و همچنین اون‌هایی که با فراخوانی برنامه Cache.add() به حافظه پنهان اضافه شدن، با رعایت قوانین کش HTTP تو یه حافظه موقت بارگیری میشن. برای هر فایل تو این کش موقت، مرورگر یه رویداد پیشرفت رو به ApplicationCache ارسال میکنه و در صورت بروز هر خطایی، مرورگر یه رویداد خطا میفرسته و به روز رسانی متوقف میشه.
  5. هنگامی که همه پرونده‌ها با موفقیت به روزرسانی شدن، به صورت خودکار به کش آنلاین واقعی منتقل میشن و یه رویداد ذخیره به ApplicationCache ارسال میکنن. از اون‌جایی که این سند قبلاً از کش مرورگر بارگذاری شده، تا بارگذاری مجددش (چه به صورت دستی چه با برنامه)، سند آپدیت شده‌ای ارائه نمیشه.

محل ذخیره سازی و پاک کردن کش برنامه آفلاین

در گوگل کروم می‌تونین با انتخاب گزینه “…Clear browsing data” در تنظیمان Preference یا مراجعه به chrome://appcache-internals/. حافظه کش رو پاک کنین. Safari نیز گزینه “Empty Cache” رو تو تنظیمات Preference خودش داره اما شاید راه‌اندازی مجدد مرورگر هم لازم بشه.

پاک کردن کش HTML5

در فایر فاکس اطلاعات حافظه پنهان، جدا از نمایه فایرفاکس در کنار دیسک کش معمولی ذخیره میشه:

Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache

Mac/Linux:/Users/<username>/Library/Caches/Firefox/<salt>.<profile name>/OfflineCache

در فایر فاکس می‌تونین وضعیت فعلی کش آفلاین رو اینجا بررسی کنین: صفحه کش شده (زیر هدینگ “Offline Cache Device”).

کش آفلاین میتونه برای هر سایت جداگونه‌ای با استفاده از دکمه “…Remove” در قسمت Tools>Options>Advanced>Network>Offline data خالی بشه.

در Linux  می‌تونین تنظیمات مربوطه رو تو قسمت Edit>Preferences>Advanced>Network>Offline web content and User data پیدا کنین.

راستی حواستون باشه که کش برنامه می‌تونه منسوخ هم بشه. اگه فایل مانیفست برنامه از سرور حذف بشه، مرورگر همه AppCacheهایی که از اون مانیفست استفاده میکنه رو حذف میکنه و یه رویداد «منسوخ / Obsoleted» رو به ApplicationCache ارسال میکنه.

تو این حالت، کش برنامه روی OBSOLETE تنظیم میشه.

منابع موجود در کش برنامه

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

Master Entries

این‌ها منابعی هستند که به حافظه افزوده میشن زیرا یه متنی که توسط کاربر درحال مشاهده است، شامل سندیه که نشون میده این سند با استفاده از عنصر مانیفست تو این کش اپلیکیشن قرار داره.

Explicit Entries

این‌ها منابعی هستند که به صورت واضح در کش برنامه فایل مانیفست لیست شدن.

Network Entries

منابعی که به عنوان ورودی شبکه یا Network entries در کش برنامه فایل مانیفست لیست شدن.

Fallback Entries

منابعی که به عنوان ورودی صفحات برگشتی در کش برنامه فایل مانیفست لیست شدن.

مزایای کش برنامه

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

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

متدهای AppCache

abort

فرآیند بارگیری کش برنامه رو لغو کنین! این روش قراره توسط اون دسته از برنامه‌های وب استفاده بشه که جریان کش UI خودشون رو در صورتی که کاربر بخواد آپدیت رو متوقف کنه، نشون میدن (چون پهنای باند محدوده).

swapCache

اگه یه نسخه جدیدتری وجود داشته باشه، به آخرین کش برنامه تغییر میکنه و اگه وجود نداشته باشه یه استثناء InvalidStateError ارسال کنین. این کار باعث نمیشه که منابع بارگذاری شده در گذشته، مجدداً بارگذاری بشن. مثلاً تصاویر به طور ناگهانی بارگذاری نمیشن و برگه‌ها و اسکریپت‌های سبک مجدداً مورد ارزیابی قرار نمیگیرن!

تنها تغییر اینه که درخواست‌های بعدی برای منابع ذخیره شده، نسخه جدیدتری رو به دست میارن، همین!

قبل از این که این روش شروع بشه، رویداد به روز رسانی اتفاق میفته و بعد از این برنامه وب میتونه تو وقت‌های آزادش با استفاده از این روش کش خودش رو با به روز رسانی‌های جدیدتری تغییر بده.

برای استفاده درست از این متد، برنامه‌ها باید بتونن ویژگی‌های جدیدی رو وارد بازی کنن. مثلاً بارگذاری مجدد اسکریپت‌ها برای فعال کردن یه سری ویژگی جدید!

یه جایگزین آسون‌تر برای این متد اینه که کل صفحه رو تو زمان مناسب با استفاده از روش location.reload () مجدداً برای کاربر بارگذاری کنین.

update

این متد فرآیند بارگیری کش برنامه رو اجرا میکنه. در صورت عدم وجود کش برنامه برای به روز رسانی، یه استثناء InvalidStateError ارسال میشه. اجرا کردن این روش معمولاً ضروری نیست چون که عوامل کاربر معمولاً از به روز رسانی کش های برنامه به طور خودکار محافظت میکنن.

این روش میتونه درباره چیزهایی مثل برنامه‌های طولانی مدت خیلی مفید باشه مثلاً یه برنامه وب ممکنه به مدت یه هفته در یه صفحه مرورگر باز بمونه، چنین برنامه‌ای میتونه هر روز تست به روز رسانی‌ها رو انجام بده.

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

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

مثل همیشه هر تجربه و نظری در مورد کش برنامه یا کش HTML5 دارین، از طریق کامنت‌ها با من به اشتراک بذارین!