نسخه آفلاین سایت خود را بسازید

آموزش فعال سازی Offline Web Applications

چند هفته پیش در مقاله ای با عنوان “Offline Web Applications چیه؟” به معرفی و بررسی اون پرداختیم. در این مقاله که به نوشته امین خادمیان و واسه انتشار در بلاگسیما جفت و جور شده چگونگی اجرا و استفاده ازاین فوت وفن رو به شما آموزش میدیم.

مراحل راه اندازی نسخه آفلاین در سایت

۱- ساخت فایل cache.manifest

اولین قدم واسه به کار گیری Offline Web Apps ساختن فایل cach.manifestه. برخلاف اسم سختی که داره دارای ساختاری بسیار ساده بوده و فقط کافیه که دستوراتی رو طبق اصول خاصی به این فایل اضافه کنید. یه نمونه ساده از این فایل رو ببینین :

CACHE MANIFEST

CACHE:

index.html

photo.jpg

main.js

NETWORK:

*

خط اول این فایل باید عبارت ‘ CACHE: ‘ باشه. بعد از این خط باید نام و راه فایلای مورد توجه شما که دوست دارین در مخزن مرورگر قرار گیرد رو  وارد کنین. با این کار، وقتی کاربر واسه اولین بار وارد صفحه ای که دارای فایل cache.manifestه، می شه مرورگر این فایلا و اطلاعات رو درون مخزن خود ذخیره میکنه تا در بازدیدهای بعدی به جای درخواست دوباره از سرور از همین اطلاعات استفاده کنه. بعد از لیست کردن اطلاعاتی که دوست داریم کاربر هنگام آفلاین بودن مشاهده کنه نوبت به فایلایی می رسه که قصد نداریم اونا رو درون مخزن مرورگر بذاریم.

این بخش می تونه شامل بخشایی از سایت باشه که فقط در صورت آنلاین بودن کاربر، کاربرد دارن. فرض کنین که اسکریپتی درون سایت شماس که ۱۰ توییت آخر شما رو در سایتتون نمایش میده، انگار این امکان فقط در صورت آنلاین بودن کار می کنه پس منطقی نیس که این بخش در مخزن قرار بگیره. این اطلاعات رو شما باید بعد از عبارت ‘ NETWORK: ‘ وارد کنین. اطلاعاتی که در این بخش وارد می کنین همیشه وقتی که کاربر آنلاین باشه از سرور درخواست می شه و هیچ وقت درون مخزن قرار نمی گیره. نمونه کد این بخش :

NETWORK:

lasttentweets.php

برخلاف بخش ‘CACHE’ که ما مجبوریم هر فایلی که دوست داریم درون مخزن قرار گیرد رو ذکر کنیم، در بخش ‘NETWORK’ می تونین از میانبر استفاده کنین. این میانبر کارکتر * است. با قرار دادن این کاراکتر در بخش ‘NETWORK’ مرورگر همه فایلا به جز فایلا و اطلاعات بخش ‘CACHE’ رو فقط در زمان آنلاین بودن فرا می خواند (مانند اولین نمونه کدی که ذکر شد)

۲- تعیین نوع محتوا روی سرور

قدم بعدی واسه استفاده و اجرای Offline Web Apps اینه که مطمئن شید سرور شما فایل manifest رو با محتوای مناسب واسه کاربران می فرسته . واسه انجام این کار فقط کافیه که نوع اطلاعات مربوط به این فایل رو در تنظیمات سرور خود وارد کنین. اگه از Apache Web Server استفاده می کنین، کافیه که این خط رو به فایل ‘htaccess.’ خود اضافه کنین :

AddType text/cache-manifest.manifest

اگه از وب سروری غیر از Apache استفاده می کنین می تونین این خط رو به فایلای مشابه ‘htaccess.’ در سرور خود اضافه کنین. اگه در این مورد مشکلی واسه شما اتفاق می تونین با پشتیبانی سرور خود تماس بگیرین، و یا مقاله تنظیم بهینه MIME typeا در سرور “ properly configuring server mime type ” رو بخونین. این مقاله در بخش پیشرفت دهندگان موزیلا منتشر شده.

۳- برگشت دادن به فایل manifest در کد html

آخرین مرحله واسه اجرا تکنولوژی Offline Web Apps، برگشت دادن به فایل manifest در سند htmlه. واسه این کار فقط کافیه که خصیصه manifest رو به برچسب html صفحه اضافه کنین :

<! doctype html>

<html manifest=”/cache.manifest” >

خوب کار تمامه ! و سایت واسه دسترسی آفلاین کاربران آماده شده با در نظر گرفتن این که فایلایی که درون مخزن مرورگر هستن دوباره از سرور فراخوانی نمی شن، از این به بعد صفحات سایت شما با سرعت بیشتری بارگذاری شده و هم اینکه پهنای باند مصرفی شما کم میشه. با این که کار تمامه اما هنوز جای بحث بیشتره، در ادامه به بررسی چند نکته و ترفند کاربردی در Offline Web Apps می پردازیم.

مشکلات احتمالی در نسخه آفلاین سایت

  • همه آدرسای سایت شما ( تصاویر، استایلا و… ) باید در یکی از بخشای فایل manifest وجود داشته باشه وگرنه آدرسای که به اونا اشاره ای نشده باشه بارگذاری نمی شن حتی اگه کاربر آنلاین باشه. واسه جلوگیری از بروز این مشکل پیشنهاد می کنم که از کارکتر میانبر * در بخش ‘ NETWORK ‘ استفاده کنین.

  • همه صفحات html سایت شما باید دارای خصیصه manifest در برچسب html خود باشن. مطمئن شید که همه صفحات شما دارای این خصیصه هستن وگرنه ممکنه صفحات سایت شما درون مخزن قرار نگیره. تنها داشتن یه فایل manifest واسه یه سایت کافیه اما همه صفحات باید دارای کد گفته شده در قدم سوم باشن.

  • با در نظر گرفتن این که حجم مخزن مرورگر محدوده پس سایتایی که دارای اطلاعاتی سنگین مانند mp3 و یا mp4 هستن بهتره که این فایلا رو درون مخزن قرار ندن چون تموم فضای مخزن مرورگر رو پر می کنن، علاوه بر این در بعضی نسخه های مرورگر سافاری به دلیل مشکل در برنامه نویسی، قادر به بارگذاری این فایلا (mp3،mp4) از مخزن نیس. واسه حل این مشکل بهتره نشانی فایلای حجیم رو در بخش ‘NETWORK’ وارد کنین.

بخش Fallback

بخش Fallback ویژگی دیگریست که می تونین از اون در فایل manifest استفاده کنین ( به کار گیری این بخش اختیاریه و اجباری واسه به کار گیری اون وجود نداره! ). کار بخش Fallback اون هستش که اگه هر فایل یا صفحه ای به دلیلی بارگذاری نشد و یا درون مخزن قرار نداشت، چه فایلی جانشین اون شه؟ می تونین از این بخش واسه فایلای ویدئویی سایت خود که درون مخزن قرار ندارن استفاده کنین.

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

FALLBACK: media/ images/offline.png

هم اینکه شما می تونین یه صفحه اختصاصی واسه وقتی که هیچ کدوم از فایلای سایت شما بارگذاری نشد بسازین و اون رو به بخش Fallback اضافه کنین. واسه این کار باید کدی مثل زیر داشته باشین :

FALLBACK: / /offline.html

در این کد اولین ‘ / ‘ به معنی همه آدرسای سایته.

به روز کردن محتویات مخزن

یکی از مشکلات عادی در تکنولوژی Offline Web Apps به روز کردن محتوای اون هستش. شاید حل این موضوع به نظر شما ساده به نظر برسه اما باید بگم که تنها وقتی سرور تصور می کنه، فایل manifest تغییر کرده و باید به روز شه که دقیقا خود فایل manifest رو ویرایش کرده باشین. فرض کنین که در حال پیشرفت سایت خود هستین، اگه تغییری در محتوای فایلای خود ( css، html،… ) بدین چون فایل manifest رو تغییر نداده اید سرور هم تغییری در درون اطلاعات مخزن ایجاد نمی کنه شاید به خاطر همین تغییراتی رو که انجام دادین در مرورگر اعمال نشه.

واسه حل این مشکل پیشنهاد می کنم که نسخه فایل manifest رو درون اون به صورت کامنت بذارین، با این کار وقتی که شما تغییراتی رو بسازین فقط کافیه که نسخه درون این فایل رو تغییر بدید تا سرور با این فرض، اطلاعات درون مخزن رو به روز کنه. چگونگی وارد کردن کامنت به این صورته :

CACHE MANIFEST # version 0.1 CACHE: index.html . .

فقط باید به این موضوع دقت لازم رو به عمل بیارین که خط اول فایل manifest حتما باید عبارت ‘CACHE MANIFEST’ باشه و نباید کامنت رو در خط اول وارد کنین.

در مخزن قرار گرفتن فایل cach.manifest

شاید مهمترین مشکل Offline Web Apps همین قرار گرفتن فایل manifest در مخزن باشه، به نظر شما با اینحال چه اتفاقی می افته؟ اگه تنظیمات سرور شما به این صورت باشه که اجازه بده، فایل manifest درون مخزن قرار گیرد (بیشتر این گونه س و فایلای استاتیک درون مخزن می رن) مرورگر هم به جای درخواست فایل از سرور اون رو از درون مخزن می خواند.

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

ExpiresActive On ExpiresDefault “access”

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

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

دوساله در مورد برنامه نویسی تحت وب تجربه دارم و در همین زمینه هم فعالیت می کنم , همه نمونه کارهامو با css3 , html5 انجام میدم و تا حد امکان اصول سئو و قوانین کنسرسیوم جهانی وب رو اولویت قرار میدم.

واسه مشاهده نمونه کارا یا مطالعه بقیه مقالات اون می تونین به سایت شخصی امین خادمیان مراجعه کنین.

این مطلب را هم بخوانید:
هک رشد چیست؟

Leave a Reply

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *