نحوه راه‌اندازی وب اپلیکیشن های آفلاین

  •   شما اینجا هستید :
  •   دوشنبه, ۱ بهمن ۱۳۹۷
  •   بلاگ
  •   محمد مسعود ساکی زادی
  •   بدون دیدگاه
  •   51
  • می‌خواهیم با نحوه راه‌اندازی وب اپلیکیشن های آفلاین و همچنین دلایل توسعه برنامه‌های آفلاین بیشتر آشنا شویم.وب اپلیکیشن یک نرم‌‌افزار کاربردی که توسط یک مرورگر پشتیبانی می‌شود .

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

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

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

    How to launch offline websites

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

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

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

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

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

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

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

    تهیه مانیفست پَروَنجاهای آفلاین

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

     

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

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

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

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

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

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

     

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

     نکته مهم:

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

    ۲.درصورتی‌که خطایی در ساختار پَروَنجا مانیفست شما باشد، کش انجام نخواهد شد.

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

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

     

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

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

     

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

     

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

     

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

     

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

     

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

     

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

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

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

     

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

     

     


  • 1 Star2 Stars3 Stars4 Stars5 Stars (1 رای, متوسط: 5٫00 از 5)
    Loading...

  • قالب ایرانی تم روید
    پک کامل UI
    
      خبرنامه رویدکت
    باعضویت در خبرنامه رویدکت به دنیای اندروید متصل بمانید. برای عضویت اینجا کلیک کنید
      نویسنده
  • محمد مسعود ساکی زادی
  • در حال نویسندگی با عشق و علاقه در رویدکت
  • دیدگاه بگذارید

    اولین نفری باشید که دیدگاه میگذارد

    Notify of
    avatar
    wpDiscuz

    جستجو در بین مطالب بلاگ


    جدیدترین مطالب بلاگ


    تبلیغات ویژه

    سورس فروشگاه خواروبار



    کسب درآمد


  • کسب و کار رویدکت در مرکز توسعه تجارت الکترونیکی وزارت صنعت، معدن و تجارت شناسایی شده و دارای نماد اعتماد الکترونیکی می باشد. برای تایید صلاحیت بر روی نماد ها کلیک کنید.
    اعتبار ما، اعتماد شما
  • logo-samandehi