وب ورکرها (Web Workers)

لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.

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

توجه ورکر جدا از مسئله غیر همزمانی در جاوا اسکریت است و در باره بحث Asynchronous می توانید به گفتار زیر مراجعه فرمایید.

شما می توانید هر کدی را که می خواهید به جز چند استثناء در thread ورکر اجرا کنید به عنوان مثال شما نمی توانید dom را از داخل ورکر عوض کنید و یا بعضی از متدها و خصیصه های آبجکت windows را استفاده کنید اما شما می توانید خیلی از آیتم های window مانند وب سوکت و ذخیره داده ها مثل indexedDB را استفاده کنید. لیست توابع و کلاس های که در وب ورکر ها در دسترس هستند در این لینک ببینید

داده بین ورکر و thread اصلی سیستم با پیام جابه جا می گردد هر دو طرف با متد postMessage پیام را ارسال می کنند و جواب پیام را از طریق ایونت یا رویداد می گیرند به مثال ساده زیر توجه کنید که در آن توسط وب ورکر دو عدد به ورکر ارسال شده و در ورکر آنها جمع شده و به thread اصلی برگردانده شده است.

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

علاوه بر وب ورکر ها به صورت فوق که به آنها ورکر های اختصاصی یا dedicated workers گفته می شود نوع های دیگر ورکر به شرح ذیل داریم:

• ورکرهای اشتراکی (Shared workers)

ورکرهای اشتراکی می توانند توسط چند ویندوز و یا iFrame استفاده شوند و اسکریپت ها باید از طریق پورت فعال ارتباط برقرار کنند. برای توضیحات بیشتر به این لینک مراجعه فرمایید

• سرویس ورکر (Service Workers)

این نوع ورکر ها به عنوان واسط (Proxy) بین وب اپلکیشن و شبکه عمل می نمایند که جهت عملیات Cache و Push Notification و همسان سازی بکار می روند که در ادامه به تفضیل توضیح خواهیم داد.

• ورکرهای کروم (Chrome Workers)

جهت توصیحات بیشتر به این لینک مراجعه فرمایید.

• ورکرها صدا

جهت ایجاد توانایی پردازش صوتی در داخل ورکر

در ادامه به سرویس ورکر می پردازیم که یکی از پرکاربرد ترین ورکر های این روز ها است از جمله در وب اپلکیشن ها و PWA

همانطور گفتیم سرویس ورکر یک واسط سمت کلایت بین وب اپلکیشن و شبکه است و به عنوان مثال شما می توانید کنترل cache و یا قابلیت آفلاین و یا پیام های Push را از طریق آن انجام دهید

همانطور که گفتیم سرویس ورکر یک نوع از وب ورکر است و می تواند در پشت صحنه حتی وقتی مرورگر بسته است فعال باشد وسرویسی ورکر به این صورت است که بیکار یا idle می ماند تا اینکه رویدادی اتفاق رخ دهد

سرویس ورکر برپایه Promise است لذا می تواند پردازش ها را غیر همزمان انجام دهد و سرویس ورکر جهت امنیت صرفا برروی https فعال می گردد.

به عنوان نمونه سرویس ورکر به شکل زیر می تواند پردازش جهت آفلاین را انجام دهد و همانطور که می بینید

می تواند نسبت به استراتژی تعریف شده محتوا را از Cache و یا از سرور آنلاین تامین کند.

و یا Push Notification را به شکل زیر از سرویس های Push دریافت کنند و به وب اپلکیشن جهت نمایش تحویل دهند.

و یا شما می توانید با سرویس ورکر در پشت صحنه همسان سازی (‌‌Background Sync)انجام دهید به عنوان مثال پیامی که به دلیل قطعی اینترنت ارسال نشده است را هنگام اتصال اینترنت ارسال نمایید.

چرخه حیات سرویس ورکر

سرویس ورکر یک چرخه حیات مجزا از صفحه وب دارد

برای استفاده از سرویس ورکر باید آن را در کد اصلی ثبت نام کنید به صورت زیر و فایل سرویس ورکر را به وب اپلکیشن معرفی کنید.

همانطور در کد زیر می بینید ابتدا از پشتیبانی سرویس ورکر توسط مرورگر اطمینان حاصل شده و سپس سرویس ورکر به وب اپلکیشن معرفی و یا ثبت نام شده است.

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

بعداز ثبت نام، سرویس ورکر در background چرخه حیات زیر را طی می نماید.

در طول این چرخه حیات سرویس ورکر با رخداد یا ایونت های مختلفی (شامل موارد شکل زیر) روبرو می گردد که ما می توانیم آنها را بگیریم و با توجه به رخداد عملیات cache یا push یا همزمان سازی یا Sync را انجام دهیم.

به عنوان مثلا می توان رخداد install را به شکل ذیل گرفت و این زمان موقع خوبی اگر بخواهیم static asset ها را cache کنیم.

یا می توانیم هنگام رخداد Active اکتیو Cache های قبلی را به شکل زیر حذف نماییم.

یا می توان هنگامی که fetch صورت گرفت بجای گرفتن اطلاعات از سرور محتوا را از cache به صورت زیر آورد.

یا می توان رخداد Push را گرفتم و PushNotification به کاربر نشان داد.

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

خوب بحث را اینجا تمام می کنیم انشالله در قسمت بحث های بعدی به workbox و نکات سرویس ورکر در create-react-app می پردازیم.

لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.