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

در بسیاری از برنامه‌های وب، فرض رایج این است که اتصال به شبکه همیشه برقرار خواهد بود. چه سایت از سمت سرور رندر شده باشد، چه به‌صورت ایستا تولید شده باشد یا کاملاً در مرورگر ساخته شود، در هر حال فایل‌های CSS و HTML و JavaScript از طریق درخواست‌های HTTP و با تکیه بر دسترسی به اینترنت بارگیری می‌شوند. با نگاهی به ابزارهای توسعه‌دهنده مرورگر، به‌وضوح می‌توان دید که اغلب صفحات وب به شکل مداوم در حال تعامل با شبکه هستند.

از بارگذاری اسکریپت‌های تحلیلی مانند Google Analytics گرفته تا ویجت‌های Stripe پرداخت و سرویس‌های ردیابی خطا، حتی در زمانی که کاربر هیچ اقدامی انجام نداده، مرورگر همچنان داده‌هایی را از سرورهای مختلف دریافت می‌کند. اما اگر این فرض را به چالش بکشیم چه؟ اگر کاربر بدون اتصال پایدار یا حتی بدون اینترنت به سایت مراجعه کند، چه پاسخی برای او داریم؟ اینجاست که باید به‌عنوان توسعه‌دهنده وب، به راهکارهایی فکر کنیم که بتوانند تجربه‌ای قابل‌اطمینان حتی در شرایط بدون شبکه ارائه دهند.

در ادامه خواهید خواند:

• سرویس ورکرها، پاسخی به مشکل آفلاین بودن سایت‌ها
• وب ورکر چیست؟
• سرویس ورکر چیست؟
• چرخه عمر سرویس ورکر
• سرویس ورکرها چگونه امکان استفاده آفلاین از وب‌سایت‌ها را فراهم می‌کنند؟
• سرویس ورکرها و اپلیکیشن‌های وب پیش‌رونده (PWA)
• چگونه سرویس وکرها با برنامه‌های پیش‌رونده وب (PWA) یکپارچه می‌شوند؟
• جمع بندی

سرویس ورکرها، پاسخی به مشکل آفلاین بودن سایت‌ها

برای حل چالش دسترسی ناپایدار به اینترنت در اپلیکیشن‌های وب، شرکت‌هایی مانند گوگل، موزیلا، سامسونگ و دیگر بازیگران بزرگ وب در سال 2014 همکاری کردند تا اولین پیش‌نویس Service Worker را منتشر کنند. سرویس ورکر نوعی Web Worker است؛ فایل جاوا اسکریپتی که مستقل از رشته اصلی برنامه اجرا می‌شود و در پس‌زمینه فعالیت می‌کند.

وب ورکر‌ها می‌توانند وظایف سنگین یا زمان‌بر را بدون ایجاد اختلال در عملکرد رابط کاربری انجام دهند. این ویژگی باعث می‌شود تجربه کاربری حتی در هنگام پردازش‌های سنگین یا قطع اتصال اینترنت، روان و بی‌وقفه باقی بماند. از آن‌جایی که وب ورکر در یک thread مجزا اجرا می‌شود، به‌طور مستقیم به عناصر DOM یا شیء window دسترسی ندارد، اما با استفاده از پیام‌ها می‌تواند با برنامه اصلی ارتباط برقرار کند.

Service Worker‌ ها به‌طور خاص برای مدیریت کش، کنترل درخواست‌های شبکه و ایجاد تجربه آفلاین طراحی شده‌اند و نقشی کلیدی در اپلیکیشن‌های PWA (Progressive Web Apps) ایفا می‌کنند.

وب ورکر چیست؟

یک وب ورکر (Web Worker) در واقع یک فایل جاوااسکریپت است که در پس‌زمینه یک سایت یا برنامه اجرا می‌شود.
این فایل به صورت مستقل از کد اصلی سایت فعالیت می‌کند. به زبان ساده‌تر، وب ورکر مثل یک دستیار در پشت صحنه عمل می‌کند که می‌تواند کارهای سنگین و زمان‌بر را انجام دهد بدون اینکه سرعت یا عملکرد صفحه‌ی اصلی برای کاربر کند یا مختل شود.

ویژگی‌های مهم وب ورکرها

• روی یک مسیر جداگانه (رشته‌ی پردازشی مستقل) اجرا می‌شوند و به همین دلیل باعث کند شدن سایت نمی‌شوند.
• می‌توانند کارهای سنگینی مثل پردازش داده‌ها را انجام دهند، در حالی که کاربر بدون وقفه به استفاده از سایت ادامه می‌دهد.
• اما نکته مهم اینجاست: وب ورکرها نمی‌توانند مستقیماً به اجزای صفحه (مثل دکمه‌ها یا متن‌های داخل صفحه) دسترسی داشته باشند.

سرویس ورکر چیست؟

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

سرویس ورکرها به یک دامنه و مسیر مشخصی از URL وابسته هستند و فقط به رویدادهایی که از آن مسیر اتفاق می‌افتند پاسخ می‌دهند. برای مثال اگر سرویس ورکری در مسیر mysite.com/puppies/sw.js ثبت (Register) شده باشد، می‌تواند روی آدرس‌های زیر نیز عمل کند:

• mysite.com/puppies/labs
• mysite.com/puppies/boxers

این مسیر، به اصطلاح Scope یا دامنه عملکرد سرویس ورکر نامیده می‌شود. تنها یک سرویس ورکر می‌تواند روی هر Scope ثبت شود، اکا این امکان وجود دارد که این محدوده را محدودتر نیز تعریف کرد.

استفاده از Fast API با دیتابیس رابطه ای در سرور مجازی اوبونتو Ubuntu
Fast APIدر سرور مجازی

تفاوت با وب ورکر

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

در عوض، سرویس‌ ورکرها دسترسی مستقیم به قابلیت‌ها ذخیره سازی مرورگر مانند IndexedDB و Cache API دارند و می‌توانند اطلاعات را در این فضاها ذخیره و بازیابی کنند.

مزیت استفاده از سرویس ورکر

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

اما زمانی که سرویس ورکر فعال باشد، قابلیت‌های قدرتمندی در اختیار توسعه‌دهنده قرار می‌گیرد.

• کش کردن فایل‌ها (Caching)
• همگام‌سازی در پس‌زمینه (Background Sync)
• ارسال اعلان‌های پوش (Push Notifications)
• امکان استفاده آفلاین از سایت

همین حالا، بدون پیچیدگی، Node.js خود را بر بستر هاست ابری لیارا راه‌اندازی کنید.
✅ منابع ابری اختصاصی ✅ عملکرد پایدار ✅ مقیاس‌پذیری آسان
خرید و راه‌اندازی Node.js

چرخه عمر سرویس ورکر

سرویس ورکرها دارای چرخه عمری هستند که مشخص می‌کند چگونه با مرورگر کاربر تعامل دارند. تا زمانی که یک سرویس ورکر ثبت (Register) و نصب (Install) نشود، هیچ کنترلی بر جریان شبکه به سمت کلاینت نخواهد داشت. حتی پس از ثبت و نصب، سرویس ورکر تا زمانی که کاربر دوباره وارد یکی از مسیرهای تحت محدوده آن نشود، شروع به رهگیری درخواست‌ها نخواهد کرد.

مراحل چرخه عمر سرویس ورکر

• ثبت (Registration): این اولین مرحله زمانی آغاز می‌شود که کاربر وارد یکی از مسیرهای تحت محدودهٔ سرویس ورکر شود. سرویس ورکر بررسی می‌کند که آیا مرورگر از آن پشتیبانی می‌کند یا نه. اگر پشتیبانی شود، تابع register فراخوانی می‌شود تا URL اسکریپت را به آن محدوده متصل کند. در اکثر مرورگرهای مدرن می‌توان ثبت سرویس ورکر را در تب Application ابزارهای توسعه (DevTools) مشاهده کرد. برای هر سرویس ورکر، این مرحله تنها یک‌بار انجام می‌شود.
• دانلود (Download): اگر ثبت با موفقیت انجام شود، فایل سرویس ورکر روی مرورگر کاربر دانلود می‌شود. این کار بدون نیاز به دریافت اجازه از کاربر و به‌صورت مخفیانه در پس‌زمینه انجام می‌شود. اگر این دانلود به‌منظور به‌روزرسانی باشد، مرورگر کد جدید را با نسخهٔ قبلی مقایسه می‌کند و در صورت تفاوت، وارد مرحله نصب می‌شود.
• نصب (Installation): وقتی فایل جدید سرویس ورکر دانلود شد، فرایند نصب آغاز می‌شود. اگر این اولین بار است که سرویس ورکر در یک محدوده نصب می‌شود، بلافاصله فعال می‌شود. اما اگر نصب به‌دلیل به‌روزرسانی انجام شده باشد، فعال‌سازی بلافاصله صورت نمی‌گیرد و باید منتظر بماند.
• انتظار (Waiting): این مرحله فقط هنگام به‌روزرسانی رخ می‌دهد. نسخهٔ قدیمی سرویس ورکر همچنان به‌عنوان پروکسی فعال باقی می‌ماند تا زمانی که هیچ صفحه‌ای از وب‌سایت از آن استفاده نکند. البته می‌توان با فراخوانی تابعی خاص، از این مرحله صرف‌نظر کرد و منتظر نماند.
• فعال‌سازی (Activation): بلافاصله پس از مرحلهٔ انتظار یا نصب، رویداد activate اجرا می‌شود. در این مرحله می‌توان کش‌ها را پاک کرد یا وظایف دیگری را انجام داد.
• به‌روزرسانی (Updating): به‌روزرسانی‌ها زمانی رخ می‌دهند که کاربر دوباره وارد یکی از مسیرهای تحت محدودهٔ سرویس ورکر شود، تابع ثبت دوباره اجرا شود یا رویدادی رخ دهد اما طی 24 ساعت گذشته به‌روزرسانی انجام نشده باشد. در صورت به‌روزرسانی، مراحل 2 تا 5 (دانلود، نصب، انتظار و فعال‌سازی) دوباره تکرار می‌شوند.

API چیست؟ معرفی کاربرد ها و انواع API
API 

سرویس ورکرها چگونه امکان استفاده آفلاین از وب‌سایت‌ها را فراهم می‌کنند؟

یادآوری کنید که سرویس ورکرها به عنوان پروکسی عمل می‌کنند. آن‌ها دسترسی به رویداد fetch را فراهم می‌کنند که به شما این امکان را می‌دهد که رفتار برنامه خود را بسته به شرایط مختلف تغییر دهید. علاوه بر این، سرویس ورکرها دارای یک API کش قدرتمند هستند.

تصور کنید که شما یک کاربر در شهر نیویورک هستید. فرض کنید شما در حال مرور یک وب‌سایت هستید که غذای ارگانیک محلی می‌فروشد و ناگهان وارد مترو می‌شوید و سیگنال اینترنت خود را از دست می‌دهید. به یک‌باره با یک صفحه خراب مواجه می‌شوید. سعی می‌کنید صفحه را مجددا بارگذاری کنید، هنوز در دسترس نیست. سعی می‌کنید دکمه بازگشت را بزندی، هنوز در دسترس نیست. اگر هیچ سیگنالی نداشته باشید، درخواست‌های HTTP مرورگر قادر به ارسال به هیچ API نخواهد بود. صفحات بارگذاری نمی‌شوند، فرم ها ارسال نمی‌شوند، شما آفلاین هستید. ما همه این مشکل‌ها را به عنوان کاربران تجربه کرده‌ایم.

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

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

سرویس ورکرها و اپلیکیشن‌های وب پیش‌رونده (PWA)

همان‌طور که پیش‌تر مشاهده شد، سرویس ورکرها امکان دسترسی آفلاین را برای کاربران نهایی فراهم می‌کنند. با این حال، این تنها قابلیت آن‌ها نیست. در این بخش، به مفهومی مرتبط با سرویس ورکرها پرداخته می‌شود. اپلیکیشن‌های پیش‌رونده وب یا به اختصار PWA.

PWA چیست و چه مزیت‌هایی دارد؟
PWA 

PWA چیست؟

اپلیکیشن پیش‌رونده وب نوعی برنامه مبتنی بر وب است که تجربه‌ای مشابه اپلیکیشن‌های بومی ارائه می‌دهد. این نوع اپلیکیشن‌ها با استفاده از فناوری‌های مرسوم وب مانند CSS و HTML و JS توسعه ی می‌یابند، به شی windows دسترسی دارند و می‌توانند درخواست‌های شبکه‌ای به API ها ارسال کنند. با این وجود، ویژگی‌های پیشرفته‌ای نیز دارند که آن‌ها را از وب‌سایت‌های سنتی متمایز می‌سازد.

قابلیت نصب در PWA

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

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

چگونه سرویس وکرها با برنامه‌های پیش‌رونده وب (PWA) یکپارچه می‌شوند؟

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

برخی از قابلیت‌های مهم سرویس ورکر در PWA

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

این قابلیت‌ها نشان می‌دهند که اپلیکیشن‌های PWA به نسبت وب‌اپلیکیشن‌های معمولی از نظر پایداری و عملکرد بسیار قابل‌اتکاتر هستند. API کش و ارتباط دوطرفه سرویس ورکر آنقدر کاربردی است که استفاده از PWA باید به امری رایج تبدیل شود، اگرچه هنوز به‌طور گسترده‌ای استفاده نمی‌شود.

جمع بندی

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

ترکیب سرویس ورکرها، Web API ها و معماری PWA، توسعه‌دهندگان را قادر می‌سازد تا اپلیکیشن‌هایی سریع، قابل‌اطمینان و تعاملی بسازند که حتی در شرایط اتصال ضعیف یا قطع اینترنت نیز عملکردی پایدار دارند. استفاده از این ابزارها دیگر یک ویژگی لوکس نیست، بلکه به یک استاندارد در طراحی تجربه‌ی کاربری مدرن تبدیل شده است.