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

سرویس ورکر (service worker) اسکریپتی است که مرورگر آن‌ را در بک گراند و مجزا از کدهای وب سایت یا وب اپلیکیشن اجرا می کند و قابلیت های جدیدی نظیر ارسال وب پوش ، کش کردن اسکریپت‌ها و استایل‌ها و غیره را ارائه می کند.

سرویس ورکر در واقع یک JavaScript Worker می‌باشد که مرورگر آن‌را در یک Process مجزا از وب‌سایت اجرا می کند و به صورت مستقیم به DOM یا همون کدهای html , javascript وب سایت دسترسی ندارد و برای تعامل با وب سایت از قابلیتی به نام postMessage که توسط مرورگر ارائه می‌شود استفاده می‌کند.

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

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

برای نمایش اعلان های وب (push notifications)
برای پیاده سازی کردن کش برای استایل ها ، اسکریپتها و ریکوئست های وب سایت
پیاده سازی کردن تجربه کاربری آفلاین
انجام عملیات های سنگین و زمان بر و نمایش نتیجه آن در وب سایت
دانلود کردن فایل هایی که توسط کلاینت ساخته شده
استفاده از سرویس ورکر در PWA ها

چرخه کارکرد سرویس ورکر (Service worker life cycle)

سرویس ورکر چرخه کارکردی دارد که کاملا جدای از وب سایت می باشد.

برای نصب یک سرویس ورکر در وب‌سایت‌تان باید ابتدا آن‌ را از درون وب سایت‌تان رجیستر کنید. رجیستر کردن سرویس ورکر باعث می شود که مرورگر در بک‌گراند سرویس ورکر را نصب (install) کند. در صورتی که نصب سرویس ورکر با موفقیت انجام شود سرویس ورکر به اصطلاح (activate) فعال می شود. در این زمان است که سرویس ورکر آماده کار می باشد. در این حالت سرویس ورکر دو وضعیت دارد یا به حالت ساکن (idle) در می ‌آید تا رم و منابع سیستم را الکی استفاده نکند و یا در وضعیت عمل کردن (fetch/message) به وظیفه ای که برای آن فعال شده.

مواردی که قبلا از استفاده از سرویس ورکر باید بدانیم

برای استفاده از سرویس ورکر ابتدا باید مرورگر از آن پشتیبانی کند که در این زمان بیشتر ورژن های گوگل کروم ، فایرفاکس ، اپرا و برخی مرورگرهای دیگر از آن پشتیبانی می کنند.

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

البته قابل ذکر است که برای توسعه و تست در محیط لوکال (localhost) نیازی به https نمی باشد و سرویس ورکر در این محیط کار می کند.

فایل سرویس ورکر را باید در فولد اصلی (روت) وب سایت قرار دهید تا بتواند تمامی آدرس های وب سایت را تحت کنترل قرار دهد ، البته این کار اجباری نمی باشد و مثلا می توانید سرویس ورکر را در آدرس /blog قرار دهید و در این صورت سرویس ورکر فقط آدرس هایی که با /blog شروع می شوند را کنترل می کند.

نحوه رجیستر کردن سرویس ورکر

برای نصب سرویس ورکر باید آنرا درون کد وب سایت تان رجیستر کنید. کد زیر به مرورگر می گوید که در صورتی که از سرویس ورکر پشتیبانی میکند بعد از لود شدن کامل صفحه سرویس ورکر با فایل sw.js که در فولدر روت قرار گرفته است را رجیستر کند.

if ('serviceWorker' in navigator){
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(() => console.log(&quotServiceWorker registerd successfully&quot))
            .catch((e) => console.log(&quotServiceWorker failed to register&quot, e));
    })
}

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

در مرورگر کروم می توانید تمامی سرویس ورکرها و وضعیت آن ها را با باز کردن صفحه inspect مرورگر توسط کلید های Ctrl+Shift+I و رفتن به تب Application و سپس انتخاب منو Service Workers مشاهده کنید.

در پست بعدی نحوه نوشتن اسکریپت سرویس ورکر و انجام تسک های مختلف در وضعیت های install activate , message , ... به طور کامل و با ذکر مثال توضیح خواهم داد.

منابع

https://developers.google.com/web/fundamentals/primers/service-workers/

https://www.html5rocks.com/en/tutorials/workers/basics/

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers