آکادمی وبسیما
میز خدمات پشتیبانیآموزش فعال سازی Offline Web Applications
چند هفته پیش در مقاله ای با عنوان “Offline Web Applications چیست؟” به معرفی و بررسی آن پرداختیم. در این مقاله که به قلم امین خادمیان و برای انتشار در بلاگسیما تهیه شده است نحوه اجرا و استفاده ازاین تکنیک را به شما آموزش خواهیم داد.
مراحل راه اندازی نسخه آفلاین در سایت
1- ساخت فایل cache.manifest
اولین قدم برای استفاده از 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’ را فقط در زمان آنلاین بودن فرا می خواند (مانند اولین نمونه کدی که ذکر شد)
2- تعیین نوع محتوا بر روی سرور
قدم بعدی برای استفاده و اجرای Offline Web Apps این است که مطمئن شوید سرور شما فایل manifest را با محتوای مناسب برای کاربران ارسال می کند. برای انجام این کار تنها کافیست که نوع اطلاعات مربوط به این فایل را در تنظیمات سرور خود وارد کنید. اگر از Apache Web Server استفاده می کنید، کافیست که این خط را به فایل ‘htaccess.’ خود اضافه کنید :
AddType text/cache-manifest.manifest
اگر از وب سروری غیر از Apache استفاده می کنید می توانید این خط را به فایل های مشابه ‘htaccess.’ در سرور خود اضافه کنید. اگر در این زمینه مشکلی برای شما پیش آمد می توانید با پشتیبانی سرور خود تماس بگیرید، و یا مقاله تنظیم بهینه MIME type ها در سرور “ properly configuring server mime type ” را بخوانید. این مقاله در بخش توسعه دهندگان موزیلا منتشر شده است.
3- ارجاع دادن به فایل 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 انجام میدم و تا حد امکان اصول سئو و قوانین کنسرسیوم جهانی وب رو اولویت قرار میدم.
برای مشاهده نمونه کارها یا مطالعه سایر مقالات او میتوانید به سایت شخصی امین خادمیان مراجعه کنید.
تکنیک Content First در طراحی سایت
Content-first design یک تکنیک طراحی سایت با هدف ارائه محتوا در بهترین شکل ممکن است. در واقع پیش از طراحی باید درک درستی از محتوا داشته باشیم.
از اصول باز طراحی سایت چه میدانید؟
بازطراحی سایت، کاری زمانبر و با اهمیت است؛ اما دانستن اصول و قواعد ذکر شده در این مقاله به شما کمک میکند که ترس را کنار گذاشته و به سمت بازطراحی جدید شیرجه عمیقی بزنید.
قواعد استفاده از پاپ آپ در طراحی سایت
18 قانون مهم که هنگام استفاده از پاپ باید رعایت کنیم این قوانین موجب میشود که نرخ تبدیل پاپ آپ شما بیشتر شده و تاثیر منفی بر سئو سایت شما نداشته باشد.
“درباره ما” شامل چه اطلاعاتی باشد؟
صفحه درباره ما سایت باید چگونه باشد؟ اکثرافراد در صفحه درباره ما مطالبی طولانی و یا نوشته ای کوتاه قرار میدهند که موجب زیر سوال بردن اعتبار شرکت شده و …
سلام من می خواهم اول یک سایت رایگان وافلاین داشته باشم. واگر دیدم می توانم مدیریت کنم و غنی نمایم سپس آنلاین نمایم. درمرحله ی اول ازکجا باید سایت رایگان افلاین تهیه کنم .ممنون اگر ایمیل کنید برام
سلام، درست متوجه سوال شما نشدم. باید در ابتدا یک نرم افزار شبیه ساز هاست و سرور نصب کنید و بعد مثلا یک وردپرس روش راه اندازی کنید.
ممنون بابته این مطلبه خوبتون
چه مقاله ها و آموزشهای خوبی میذارید
دمتون گرم
نظر لطف شماست. مرسی از کامنت انرژی بخش
ممنون عالی بود
خواهش میکنم دست آقای خادمیان درد نکنه