آموزش فعال سازی Offline Web Applications و نسخه آفلاین سایت

چند هفته پیش در مقاله ای با عنوان “برنامه های وب آفلاین چیست؟” ارائه و بررسی کردیم. در این مقاله که توسط امین خادمیان برای انتشار در بلاگ سیما آماده شده است، نحوه پیاده سازی و استفاده از این تکنیک را به شما آموزش می دهیم.

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

1- ایجاد فایل cache.manifest

اولین قدم برای استفاده از Offline Web Apps، ایجاد فایل cache.manifest است. برخلاف نام سختش ساختار بسیار ساده ای دارد و کافی است دستوراتی را طبق اصول خاصی به این فایل اضافه کنید. یک مثال ساده از این فایل را ببینید:


CACHE MANIFEST
CACHE:
index.html
photo.jpg
main.js
NETWORK:
*


خط اول این فایل باید ‘CACHE:’ باشد. بعد از این خط باید نام و مسیر فایل هایی که می خواهید در مخزن مرورگر قرار دهید را وارد کنید. بنابراین، هنگامی که کاربر برای اولین بار به صفحه حاوی فایل cache.manifest دسترسی پیدا می کند، مرورگر این فایل ها و این اطلاعات را در مخزن خود ذخیره می کند تا در بازدیدهای بعدی به جای درخواست مجدد از سرور، از همان اطلاعات استفاده کند. پس از فهرست کردن اطلاعاتی که می‌خواهیم کاربر در حالت آفلاین ببیند، نوبت به فایل‌هایی می‌رسد که قصد نداریم در مخزن مرورگر قرار دهیم.
این بخش ممکن است شامل بخش‌هایی از سایت باشد که فقط زمانی که کاربر آنلاین است استفاده می‌شود. فرض کنید یک اسکریپت در سایت دارید که 10 توییت آخر شما را در سایت شما نمایش می دهد، به نظر می رسد فقط زمانی که آنلاین هستید کار می کند، بنابراین منطقی نیست که آن بخش را در مخزن داشته باشید. این اطلاعات را باید بعد از کلمه “NETWORK:” وارد کنید. اطلاعاتی که در این قسمت وارد می کنید همیشه در زمانی که کاربر آنلاین است از سرور درخواست می شود و هرگز ذخیره نمی شود. نمونه کد از این بخش:

شبکه:
lastentweets.php

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

۲- نوع محتوای روی سرور را مشخص کنید

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

AddType text/cache-manifest.manifest

اگر از وب سروری غیر از آپاچی استفاده می کنید، می توانید این خط را به فایل های مشابه «htaccess» اضافه کنید. سرور خود را اضافه کنید اگر در این زمینه مشکلی دارید، می توانید با پشتیبانی سرور خود تماس بگیرید و یا مقاله “تنظیم صحیح نوع MIME سرور” را در مورد تنظیم بهینه انواع MIME در سرور مطالعه کنید. این مقاله در بخش توسعه دهندگان موزیلا قرار داده شده است.

3- به فایل مانیفست در کد html مراجعه کنید

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



< ! doctype html>

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

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

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

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

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

بخش نجات

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

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

بازگشت: media/images/offline.png

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

بازگشت: //offline.html

در این کد، اولین ‘/’ نشان دهنده تمام آدرس های سایت است.

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

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

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

CACHE MANIFEST # نسخه 0.1 CACHE: index.html. .

فقط باید توجه داشته باشید که خط اول فایل مانیفست باید ‘CACHE MANIFEST’ باشد و نباید نظر را در خط اول وارد کنید.

فایل cache.manifest در مخزن

شاید بزرگ‌ترین مشکل برنامه‌های وب آفلاین، مکان فایل مانیفست در مخزن باشد، فکر می‌کنید چه اتفاقی می‌افتد؟ اگر تنظیمات سرور شما اجازه می دهد که فایل مانیفست در مخزن قرار گیرد (اغلب این کار را می کند و فایل های استاتیک در مخزن می روند)، مرورگر به جای درخواست فایل از سرور، آن را از مخزن می خواند.

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

ExpireActive در ExpireDefault “دسترسی”

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

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

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

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