چند هفته پیش در مقاله ای با عنوان “Offline Web Applications چیست؟” به معرفی و بررسی آن پرداختیم. در این مقاله که به قلم امین خادمیان و برای انتشار در بلاگسیما تهیه شده است نحوه اجرا و استفاده ازاین تکنیک را به شما آموزش خواهیم داد.
اولین قدم برای استفاده از Offline Web Apps ساختن فایل cach.manifest می باشد. برخلاف اسم سختی که دارد دارای ساختاری بسیار ساده بوده و تنها کافی است که دستوراتی را طبق اصول خاصی به این فایل بیافزایید. یک نمونه ساده از این فایل را ببینید :
CACHE MANIFEST
CACHE:
index.html
photo.jpg
main.js
NETWORK:
*
خط اول این فایل باید عبارت ‘ CACHE: ‘ باشد. بعد از این خط باید نام و مسیر فایل های مد نظر شما که مایلید در مخزن مرورگر قرار گیرد را وارد کنید. با این کار، وقتی کاربر برای اولین بار وارد صفحه ای که دارای فایل cache.manifest است، می شود مرورگر این فایل ها و اطلاعات را درون مخزن خود ذخیره میکند تا در بازدیدهای بعدی به جای درخواست دوباره از سرور از همین اطلاعات استفاده کند. بعد از لیست کردن اطلاعاتی که دوست داریم کاربر هنگام آفلاین بودن مشاهده کند نوبت به فایل هایی می رسد که قصد نداریم آن ها را درون مخزن مرورگر قرار دهیم.
این بخش می تواند شامل بخش هایی از سایت باشد که فقط در صورت آنلاین بودن کاربر، کاربرد دارند. فرض کنید که اسکریپتی درون سایت شماست که 10 توییت آخر شما را در سایتتان نمایش می دهد، به نظر می رسد که این امکان فقط در صورت آنلاین بودن کار می کند پس منطقی نیست که این بخش در مخزن قرار بگیرد. این اطلاعات را شما باید بعد از عبارت ‘ 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 ” را بخوانید. این مقاله در بخش توسعه دهندگان موزیلا منتشر شده است.
آخرین مرحله برای پیاده سازی تکنولوژی Offline Web Apps، ارجاع دادن به فایل manifest در سند html است. برای این کار تنها کافیست که خصیصه ی manifest را به برچسب html صفحه اضافه کنید :
<! doctype html>
<html manifest=”/cache.manifest” >
خوب کار تمام است ! و سایت برای دسترسی آفلاین کاربران آماده شده است با توجه به این که فایل هایی که درون مخزن مرورگر هستند دوباره از سرور فراخوانی نمی شوند، از این به بعد صفحات سایت شما با سرعت بیشتری بارگذاری شده و همچنین پهنای باند مصرفی شما کاهش می یابد. با این که کار تمام است اما هنوز جای بحث بیشتر وجود دارد، در ادامه به بررسی چند نکته و ترفند کاربردی در Offline Web Apps می پردازیم.
بخش 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’ باشد و نباید کامنت را در خط اول وارد کنید.
شاید مهمترین مشکل Offline Web Apps همین قرار گرفتن فایل manifest در مخزن باشد، به نظر شما با وجود این چه اتفاقی خواهد افتاد؟ اگر تنظیمات سرور شما به این صورت باشد که اجازه دهد، فایل manifest درون مخزن قرار گیرد (اغلب این گونه است و فایل های استاتیک درون مخزن می روند) مرورگر نیز به جای درخواست فایل از سرور آن را از درون مخزن می خواند.
درنتیجه این عمل، حتی اگر فایل های روی سرور شما تغییر کرده باشد مرورگر چیزی را دریافت نمی کند، زیرا تصور می کند که هیچ فایلی تغییر نکرده است. اگر در چنین شرایطی قرار گرفتید بهتر است مخزن برنامه ی تحت وب و مخزن مرورگر را خالی کنید. اگر مشکلتان حل نشد بهترین راه این است که این کد را به فایل.htaccess (در وب سرور آپاچی) خود اضافه کنید:
ExpiresActive On ExpiresDefault “access”
این کد به سرور می گوید، باید فایل cache.manifest را همیشه تاریخ مصرف گذشته اعلام کنید که این باعث می شود همیشه این فایل از سرور درخواست شود و نه مخزن مرورگر. تمامی مراحلی که ذکر شد را انجام دهید، سایت خودتان را در حالت آفلاین تست کنید و از درستی کارکرد آن مطمئن شوید. در صورت بروز مشکل و یا نیاز به راهنمایی های بیشتر میتوانید در بخش نظرات همین مقاله سوالات خود را مطرح کنید.
آموزش ارائه شده در این مقاله توسط امین خادمیان برای انتشار در بلاگسیما ارائه شده که درباره خودش اینچنین گفته:
دوساله در زمینه برنامه نویسی تحت وب تجربه دارم و در همین زمینه هم فعالیت می کنم , تمامی نمونه کارهامو با css3 , html5 انجام میدم و تا حد امکان اصول سئو و قوانین کنسرسیوم جهانی وب رو اولویت قرار میدم.
برای مشاهده نمونه کارها یا مطالعه سایر مقالات او میتوانید به سایت شخصی امین خادمیان مراجعه کنید.
پاسخ‌گوی سوالات شما هستیم
سوالات شما توسط کارشناسان وب‌سیما پاسخ داده می‌شود.
سلام من می خواهم اول یک سایت رایگان وافلاین داشته باشم. واگر دیدم می توانم مدیریت کنم و غنی نمایم سپس آنلاین نمایم. درمرحله ی اول ازکجا باید سایت رایگان افلاین تهیه کنم .ممنون اگر ایمیل کنید برام
سلام، درست متوجه سوال شما نشدم. باید در ابتدا یک نرم افزار شبیه ساز هاست و سرور نصب کنید و بعد مثلا یک وردپرس روش راه اندازی کنید.
ممنون بابته این مطلبه خوبتون
چه مقاله ها و آموزشهای خوبی میذارید
دمتون گرم
نظر لطف شماست. مرسی از کامنت انرژی بخش
ممنون عالی بود
خواهش میکنم دست آقای خادمیان درد نکنه