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

قابلیت آفلاین در HTML5

کارکرد آفلاین یکی از قابلیت‌های html5 است که توسط اکثر مرورگرها پشتیبانی می‌شود و با کمک آن می‌توان یک وب‌ اپلیکیشن را در حالت آفلاین نیز استفاده کرد. سایت intime.ir یک نمونه وب‌ اپلیکیشن ساده‌ی آفلاین است. پس از یکبار مشاهده سایت مذکور، سایت خودش را برای کارکرد آفلاین آماده می‌کند و مانند برنامه‌ای عمل می‌کند که روی دستگاه شما نصب شده است. حتی بدون داشتن اینترنت می‌توانید براوزر را باز کنید و آدرس وب‌ اپلیکیشن آفلاین را (که حداقل یکبار قبلا به سایتش رفته‌اید) وارد کنید و در حالت فلاین از آن استفاده کنید.(در تصویر زیر میتوانید فایل منیفست رو در داخل منوی سمت چپ cache ملاحضه کنید)

دلایل توسعه وب اپلیکیشن های آفلاین

1. شاید علت اصلی درنظر گرفتن این قابلیت در html5 این باشد که اگر یک برنامه تحت وب بتواند به صورت آفلاین کار کند، در مقابل اختلالات شبکه یا در دسترس نبودن آن به کار خود ادامه دهد و پس از در دسترس بودن شبکه، تغییرات احتمالی را ثبت کند.
2. این امر با گسترش گوشی‌های هوشمند و تبلت ملموس‌تر شده است چرا که همه جا اینترنت بی‌سیم در دسترس نیست و از سویی هم کاربران علاقه دارند که حتی در صورت قطعی اینترنت بتوانند از امکان یک برنامه استفاده کنند. به همین دلیل این قابلیت موجب گسترش ساخت برنامه‌های تحت وبی شده است که مانند یک app و برنامه، در حالت آفلاین نیز به سادگی اجرا می‌شوند و کاربر می‌تواند با آن کار کند.
3. ساخت یک اپلیکیشن تحت وب، این حسن را دارد که وابسته به سیستم‌عامل نیست. یعنی لازم نیست امروز دنبال برنامه‌نویس اندروید و iOS باشید و فردا دنبال برنامه‌نویس بلک‌بری و تایزن و دو سال دیگر دنبال برنامه‌نویس برای سیستم‌عامل‌های نوظهور موبایل و سایر وسایل جدید. یک وب‌اپلیکیشن فقط وابسته به وجود مرورگر است و در هر سیستم‌عاملی هم حداقل یک مرورگر وجود دارد یا قابل نصب است.

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۵۹ هزار تومان

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

همچنین توجه کنید که در حالت آفلاین می‌توان فقط مطالب استاتیک ارائه کرد اما در صورت دریافت مطلب جدیدی از کاربر در حالت آفلاین (مانند ثبت یک نظر یا ایجاد/تغییر/حذف یک یا چند داده) این داده‌ها می‌توانند روی حافظه دستگاه کاربر (localStorage) ذخیره شود تا زمانی که کاربر آنلاین شد، آن تغییرات با سرور هماهنگ شود که در انتهای همین صفحه توضیح داده شده است.

در طول دوره ویدئویی آنلاین و رایگان HTML5 به صورت کامل با ساخت یک برنامه آفلاین آشنا شده‌‌ایم.

مراحل توسعه برنامه وب به صورت آفلاین

1. تهیه مانیفست فایل‌های آفلاین

manifest لیستی از فایل‌هایی است که قرار است کش شوند و ساختار درون آن، چیزی شبیه این خواهد بود:

CACHE MANIFEST

CACHE:

# pages
myPage.html
/about
?part=calendar

# styles & scripts
myStyle.css
myJavascript.js
http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js

# pictures & fonts
*.jpg
myImage.png
asset/fonts/codefriend.ttf

FALLBACK:
/ /offline.html

NETWORK:
Images/logo.png
get-rating.php
*

در این فایل، لازم است در خط اول، با حروف بزرگ انگلیسی عبارت CACHE MANIFEST آورده شده و سپس آدرس فایل‌هایی که مرورگر باید cache کند، آورده شده است. در صورتی که بخواهید پس از عبارت CACHE MANIFEST بلافاصله نام فایل‌های موردنیاز را ذکر کنید، عبارت CACHE: ضروری نیست اما اگر بخواهید در بخش دیگری از مانیفست غیر از ابتدای آن، نام فایل‌هایتان را ذکر کنید که لازم است.

همچنین همانطور که در کد فوق می‌بینید؛ این فایل‌ها لازم نیست حتما تحت دامنه خودتان باشند و می‌توانید موارد استاتیک موجود در Url های دیگر را نیز در مانیفیست ذکر کنید.خط بعد از FALLBACK: نیز برای تعریف فایل جایگزین برای مواردی است که در کش براوزر ذخیره نشده. در کد فوق، عبارت offilne.html// به براوزر می‌گوید که در دسترس نبودن هر فایلی که مسیرش با / شروع می‌شود (یعنی همه فایل‌های تحت آن دامنه/زیردامنه)، فایل offline.html را به جای آن نمایش دهد.

فایل‌هایی که پس از خط حاوی NETWORK: درج شوند، در حالت آفلاین قابل دسترس نیستند براوزر هم تلاشی برای کش کردن و گرفتن آنها نمی‌کند.همچنین همانطور که می‌بینید، می‌توان از علامت * نیز برای تطبیق بر «هر چیزی» استفاده کرد.پس از نوشتن نام تمام فایل‌ها، آن را در یک فایل با پسوندی دلخواه (مثلا manifest) ذخیره کنید.

نکته مهم: دقت کنید که فقط فایل‌هایی قابل لیست و کش شده هستند که با روش GET دریافت می‌شوند و لذا فایل‌هایی که با روش POST دریافت می‌شوند، قابل کش شدن نیستند چون مرورگر فایل‌های لیست شده در مانیفست را با روش GET درخواست می‌دهد و سپس کش می‌کند.

۲٫ تنظیم صفحه وب جهت ارجاع به مانیفست

پس از تهیه فایل مانیفست، لازم است آدرس فایل مانیفست به براوزر اعلام شود تا براوزر بتواند لیست فایل‌های لازم برای کار کردن برنامه در حالت آفلاین را ببیند. بدین منظور کافی است در تگ html یک مشخصه جدید به نام manifest اضافه کنید:

<!DOCTYPE html>
<html manifest="example.manifest">

دقت کنید که برخی براوزرها مانند سایر فایل‌ها، ممکن است به صورت پیش‌فرض فایل manifest را برای مدتی کش کنند که در اینصورت (مثل فایل css, js) بهترین راه برای فهماندن تغییر فایل manifest به مرورگر کاربر، تغییر نام داینامیک آن است.همچنین دقت کنید که اگر برنامه آفلاین شما حاوی بیش از یک صفحه است، لازم است مانیفست فوق در تمام صفحات ذکر شود. به عبارت دیگر کافی نیست که فقط در home page تان مانیفست را اضافه کنید و در صفحات دیگر (که در مانیفست گفته شده) مانیفست را اضافه نکنید. به عبارت دیگر صفحاتی که مانیفست ندارند، در حالت آفلاین قابل دسترس نیستند حتی اگر در مانیفست صفحات آفلاین نام آنها ذکر شده باشد.

چند نکته مهم:

1. در صورتی که براوزر هنگام درخواست فایل مانیفست، با خطای ۴۰۴ یا ۴۱۰ مواجه شود، کش را پاک خواهد کرد.
2. در صورتی که خطایی در ساختار فایل مانیفست شما باشد، کش انجام نخواهد شد.

۳٫ تنظیم سرور برای ذخیره سازی اطلاعات

فایل مانیفست می‌تواند هر پسوندی داشته باشد اما سرور باید به گونه‌ای تنظیم شود که فایل manifest را با MimeType خاصی (text/cache-manifest) سرو کند و همچنین آن را روی کلاینت کش نکند. مثلا اگر کارساز وب شما Apache است، و فایل‌های مانیفست شما با پسوند manifest سرو می‌شود، می‌توان در htaccess این‌گونه نوشت:

AddType text/cache-manifest .manifest
ExpiresActive On
ExpiresDefault "access"

۴٫ کنترل سمت کاربر با جاوااسکریپت

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

if(window.applicationCache) {
    // براوزر کاربر از حالت آفلاین پشتیبانی می‌کند
}

این کار می‌تواند فوایدی داشته باشد. مثلا می‌توانید در صورت پشتیبانی نکردن مرورگر کاربر از حالت آفلاین، به او پیغام خاصی نمایش دهید یا برخی کدهای خاص مربوط به کار با حالت آفلاین را، ذیل شرط فوق قرار دهید.همچنین در صورتی که مرورگر از حالت آفلاین هم پشتیبانی می‌کند، رویدادهای offline و online نیز در صفحه قابل تعریف هستند که در برنامه‌های آفلاین بسیار پرکاربرد هستند. به عبارتی دیگر، زمانی که براوزر آفلاین می‌شود (اتصالش به اینترنت قطع است) رویداد offline اجرا می‌شود و می‌توان تصمیمات خاصی گرفت و برخی کارکردهای اجزاء صفحه را تغییر داد:

window.addEventListener("online", function(e) {
    // همین الآن! براوزر به اینترنت دسترسی پیدا کرد و آنلاین شد
}, true);
window.addEventListener("offline", function(e) {
    // همین الآن! اتصال براوزر به اینترنت قطع شد و آفلاین شد
}, true);

پس از لود DOM، با خواندن پراپرتی onLine از آبجکت navigator می‌توان تشخیص داد که صفحه فعلی در حالت آنلاین لود شده یا در حالت آفلاین؟(برای آشنایی بیشتر با DOM می توانید از دوره ویدئویی آنلاین و رایگان جاوا اسکریپت استفاده کنید)

$(function(){ // DOM Loaded...
    if(navigator.onLine)
    {
        // صفحه در حالت آنلاین لود شده است
    }
    else
    {
        // صفحه در حالت آفلاین لود شده است
    }
});

با کمک پراپرتی status از آبجکت window.applicationCache می‌توان وضعیت کش شدن/نشدن/بودن و … را کشف کرد:

function getCacheStatus()
{
  switch (window.applicationCache.status) {
    case window.applicationCache.UNCACHED: // UNCACHED == 0
      return 'کش انجام نشده است';
      break;
    case window.applicationCache.IDLE: // IDLE == 1
      return 'بیکار';
      break;
    case window.applicationCache.CHECKING: // CHECKING == 2
      return 'در حال چک کردن';
      break;
    case window.applicationCache.DOWNLOADING: // DOWNLOADING == 3
      return 'در حال دانلود';
      break;
    case window.applicationCache.UPDATEREADY:  // UPDATEREADY == 4
      return 'آپدیت آماده است';
      break;
    case window.applicationCache.OBSOLETE: // OBSOLETE == 5
      return 'کش منسوخ شده و از بین است';
      break;
    default:
      return 'وضعیت نامشخص';
      break;
  };
}

می‌توان در صورت آماده بودن محتویات جدید، به کاربر اطلاع داد تا صفحه براوزرش رفرش شود و برنامه آفلاین جدید نمایش داده شود:

window.addEventListener('load', function(){
  window.applicationCache.addEventListener('updateready', function(){
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY)
      // براوزر محتویات جدید را دانلود کرده است
      if (confirm('نسخه جدیدی از برنامه آماده شده، آیا مایل به رفرش صفحه هستید؟'))
        window.location.reload();
  }, false);

}, false)

۸ رویداد (event) مهمی که در رابطه با کار با کش آفلاین می‌توان استفاده کرد:

// اگر برای آپدیت چک شود، این رویداد اجرا می‌شود
window.applicationCache.addEventListener('checking', handleCacheEvent, false);

// اگر آپدیتی یافت شود و براوزر شروع به دانلود آن کند، این رویداد اجرا می‌شود
window.applicationCache.addEventListener('downloading', handleCacheEvent, false);

// مانیفست یافت نشد (خطای ۴۰۴ یا ۴۱۰) یا اینکه در حین دانلود، مانیفست تغییر کرده
window.applicationCache.addEventListener('error', handleCacheError, false);

// پس از اولین دانلود مانیفست اجرا می‌شود
window.applicationCache.addEventListener('noupdate', handleCacheEvent, false);

// اگر مانیفست یافت نشود (خطای ۴۰۴ یا ۴۱۰) این رویداد اجرا می‌شود و کش خود به خود حذف می‌شود
window.applicationCache.addEventListener('obsolete', handleCacheEvent, false);

// این رویداد زمانی اجرا می‌شود که یک یا چند فایل لیست شده در مانیفست، در حال دانلود باشد
window.applicationCache.addEventListener('progress', handleCacheEvent, false);

// زمانی که آپدیت فایل‌های داخل مانیفست دانلود شده باشد، این رویداد اجرا می‌شود
window.applicationCache.addEventListener('updateready', handleCacheEvent, false);

ایجاد نسخه آفلاین برای فرم ها

یکی از مسائلی که در حالت آفلاین باید درنظر گرفته شود، فرم‌های سایت است. اگر فرم می‌تواند بر اساس اطلاعات کش شده برای حالت آفلاین کار کند که مشکلی نیست. اما اگر فرم قرار است مثلا در یک دیتابیس بزرگ سمت سرور جستجو کند که حتما نیاز به سرور دارد، لازم است فرم را غیرفعال یا حتی مخفی کنید و پیغامی هم نمایش دهید که در حالت آفلاین امکان استفاده از فلان فرم جستجو نیست.

اما گاهی یک فرم برای جستجو نیست بلکه برای مثلا اضافه کردن یک کامنت یا ویرایش یک مطلب است. در این حالت هم راه ساده آن است که در حالت آفلاین آن فرم را غیرفعال یا مخفی کنید اما راه بهتر که کدنویسی بیشتری هم نیاز دارد این است که به کاربر اجازه کار با فرم را در حالت آفلاین بدهیم و موارد درج‌شده در فرم را در localStorage ذخیره کنیم:

$('#myForm').submit(function(e){
  e.preventDefault();
  var data = $(this).serialize();
  if (navigator.onLine)
    $.post('/api', data);
  else
  {
    var submissions = JSON.parse(localStorage.getItem('submissions') || '[]');
    submissions.push(data);
    localStorage.setItem('submissions', JSON.stringify(submissions));
  }
});

سپس در رویداد مربوط به زمان آنلاین شدن (که در بالا اشاره شد) ارسال موارد ذخیره شده در localStorage به سرور را انجام دهیم:

window.addEventListener('online', function () {
  var submissions = JSON.parse(localStorage.getItem('submissions'));
  var promises = submissions.map(function (data) {
      return $.post('/api', data).done(function () {
        submissions.splice(submissions.indexOf(data), 1);
      });
    });
  $.when.apply($, promises).done(function () {
    localStorage.setItem('submissions', JSON.stringify(submissions));
  });
}, false);