چگونه کارگران وب و کارگران خدمات می توانند عملکرد سایت شما را بهبود بخشند و چه زمانی از یک وب کارگر در مقابل یک کارگر خدماتی استفاده کنید.
این بررسی اجمالی توضیح می‌دهد که چگونه کارگران وب و کارگران خدمات می‌توانند عملکرد وب‌سایت شما را بهبود بخشند و چه زمانی باید از یک وب‌کار در مقابل یک کارگر خدماتی استفاده کنید. بقیه این مجموعه را برای الگوهای خاص ارتباط پنجره و کارکنان سرویس بررسی کنید.
چگونه کارگران می توانند وب سایت شما را بهبود بخشند
مرورگر از یک رشته ( رشته اصلی ) برای اجرای تمام جاوا اسکریپت در یک صفحه وب و همچنین برای انجام کارهایی مانند رندر صفحه و جمع‌آوری زباله استفاده می‌کند. اجرای بیش از حد کد جاوا اسکریپت می تواند رشته اصلی را مسدود کند، مرورگر را در انجام این وظایف به تاخیر بیندازد و منجر به تجربه کاربری ضعیف شود.
در توسعه برنامه iOS/Android، یک الگوی رایج برای اطمینان از اینکه رشته اصلی برنامه برای پاسخگویی به رویدادهای کاربر آزاد باقی می‌ماند، بارگذاری عملیات به رشته‌های اضافی است. در واقع، در آخرین نسخه های اندروید، مسدود کردن رشته اصلی برای مدت طولانی منجر به از کار افتادن برنامه می شود .
در وب، جاوا اسکریپت بر اساس مفهوم یک رشته طراحی شده است، و فاقد قابلیت های مورد نیاز برای پیاده سازی یک مدل چند رشته ای مانند همان چیزی است که برنامه ها دارند، مانند حافظه مشترک.
علی‌رغم این محدودیت‌ها، با استفاده از کارگران برای اجرای اسکریپت‌ها در رشته‌های پس‌زمینه، می‌توان به الگوی مشابهی در وب دست یافت و به آنها اجازه می‌دهد تا وظایف را بدون تداخل با رشته اصلی انجام دهند. Workers یک محدوده کامل جاوا اسکریپت است که روی یک رشته مجزا اجرا می شود، بدون هیچ حافظه مشترک.
در این پست با دو نوع مختلف کارگر (کارگران وب و کارگران خدمات)، شباهت ها و تفاوت های آنها و رایج ترین الگوهای استفاده از آنها در وب سایت های تولیدی آشنا خواهید شد.
کارگران وب و کارگران خدمات
شباهت ها
کارگران وب و کارگران خدمات دو نوع کارگری هستند که در دسترس وب سایت ها هستند. آنها در برخی موارد مشترک هستند:
- هر دو در یک رشته ثانویه اجرا می شوند و به کد جاوا اسکریپت اجازه می دهند بدون مسدود کردن رشته اصلی و رابط کاربری اجرا شوند.
- آنها به اشیاء
WindowوDocumentدسترسی ندارند، بنابراین نمی توانند مستقیماً با DOM تعامل داشته باشند و دسترسی محدودی به APIهای مرورگر دارند.
تفاوت
ممکن است تصور شود که اکثر کارهایی که می توان به یک وب کارگر واگذار کرد را می توان در یک سرویس دهنده انجام داد و بالعکس، اما تفاوت های مهمی بین آنها وجود دارد:
- برخلاف کارگران وب، سرویس‌کاران به شما اجازه می‌دهند درخواست‌های شبکه (از طریق رویداد
fetch) را رهگیری کنید و به رویدادهای Push API در پس‌زمینه گوش دهید (از طریق رویدادpush). - یک صفحه می‌تواند چندین وب‌کار را ایجاد کند، اما یک سرویس‌کار تنها همه برگه‌های فعال را در محدوده‌ای که با آن ثبت شده است، کنترل می‌کند.
- طول عمر کارمند وب به زبانه ای که به آن تعلق دارد متصل است، در حالی که چرخه عمر کارگر خدمات مستقل از آن است. به همین دلیل، بستن برگه‌ای که یک وب‌کارگر در آن اجرا می‌شود، آن را خاتمه می‌دهد، در حالی که یک سرویس‌کار می‌تواند در پس‌زمینه به کار خود ادامه دهد، حتی زمانی که سایت هیچ برگه فعالی باز ندارد.
موارد استفاده کنید
تفاوت‌های بین هر دو نوع کارگر نشان می‌دهد که در چه موقعیت‌هایی می‌توان از یکی یا دیگری استفاده کرد:
موارد استفاده برای کارگران وب معمولاً مربوط به بارگذاری کار (مانند محاسبات سنگین ) به یک رشته ثانویه است تا از مسدود کردن رابط کاربری جلوگیری شود.
- به عنوان مثال: تیم سازنده بازی ویدیویی PROXX می‌خواست موضوع اصلی را تا حد امکان آزاد بگذارد تا از ورودی و انیمیشن‌های کاربر مراقبت کند. برای دستیابی به آن، آنها از کارگران وب برای اجرای منطق بازی و نگهداری وضعیت در یک رشته جداگانه استفاده کردند .
وظایف کارکنان خدمات عموماً بیشتر به عمل به عنوان یک پروکسی شبکه، رسیدگی به وظایف پس‌زمینه و مواردی مانند ذخیره‌سازی حافظه پنهان و آفلاین مربوط می‌شوند.
مثال: در یک پادکست PWA ، ممکن است بخواهید به کاربران اجازه دهید قسمت های کامل را دانلود کنند تا در حالت آفلاین به آنها گوش دهند. برای این منظور می‌توان از یک سرویس‌کار، و به‌ویژه، Background Fetch API استفاده کرد. به این ترتیب، اگر کاربر در حین بارگیری قسمت، برگه را ببندد، کار لازم نیست قطع شود.
ابزارها و کتابخانه ها
ارتباطات پنجره و کارگر را می توان با استفاده از API های سطح پایین تر پیاده سازی کرد. خوشبختانه، کتابخانه‌هایی وجود دارند که این فرآیند را انتزاع می‌کنند و از رایج‌ترین موارد استفاده مراقبت می‌کنند. در این بخش، دو مورد از آنها را که به ترتیب از کارگران پنجره به وب و کارگران خدمات مراقبت می کنند، پوشش خواهیم داد: Comlink و Workbox .
کاملینک
Comlink یک کتابخانه کوچک (1.6k) RPC است که هنگام ساخت وب سایت هایی که از Web Workers استفاده می کنند، از بسیاری از جزئیات اساسی مراقبت می کند. در وب سایت هایی مانند PROXX و Squoosh استفاده شده است. خلاصه ای از انگیزه ها و نمونه کد آن را می توانید در اینجا بیابید.
جعبه کار
Workbox یک کتابخانه محبوب برای ساخت وب سایت هایی است که از کارگران خدمات استفاده می کنند. مجموعه‌ای از بهترین روش‌ها را در مورد مواردی مانند ذخیره‌سازی حافظه پنهان، آفلاین، همگام‌سازی پس‌زمینه، و غیره بسته‌بندی می‌کند. ماژول workbox-window راه مناسبی برای تبادل پیام‌ها بین کارمند سرویس و صفحه فراهم می‌کند.
مراحل بعدی
بقیه این مجموعه بر روی الگوهایی برای ارتباط پنجره و کارکنان خدمات تمرکز دارد:
- راهنمای ذخیره سازی ضروری : فراخوانی یک سرویس دهنده از صفحه برای ذخیره منابع از قبل (به عنوان مثال در سناریوهای واکشی اولیه).
- به روز رسانی پخش : تماس با صفحه از طرف سرویس دهنده برای اطلاع رسانی در مورد به روز رسانی های مهم (مثلاً نسخه جدیدی از وب سایت موجود است).
- ارتباط دو طرفه : تفویض یک کار به یک کارگر خدماتی (مثلاً یک بارگیری سنگین)، و اطلاع رسانی صفحه از پیشرفت.
برای الگوهای ارتباط پنجره و وب کارگر بررسی کنید: برای اجرای جاوا اسکریپت از رشته اصلی مرورگر از وب کارگران استفاده کنید .