کارکنان خدمات کمی جادو را برای کمک به برنامه های وب شما ارائه می دهند تا به سطح بعدی برسند.
آیا تا به حال فکر کرده اید که چگونه به نظر می رسد برخی از وب سایت ها حتی زمانی که آفلاین هستید به کار خود ادامه می دهند؟ راز ساده است: این وب سایت ها دارای کارکنان خدمات هستند.
کارکنان خدمات فناوری کلیدی پشت بسیاری از ویژگی‌های برنامه‌مانند بومی برنامه‌های کاربردی وب مدرن هستند.
کارگران خدماتی چیست؟
Service Workers یک نوع تخصصی از وب کارمندان جاوا اسکریپت هستند. Service Worker یک فایل جاوا اسکریپت است که کمی شبیه به یک سرور پراکسی عمل می کند. درخواست های شبکه خروجی را از برنامه شما دریافت می کند و به شما امکان می دهد پاسخ های سفارشی ایجاد کنید. برای مثال، ممکن است فایل‌های ذخیره‌شده را در حالت آفلاین به کاربر ارائه دهید.
کارکنان خدمات همچنین به شما امکان می دهند ویژگی هایی مانند همگام سازی پس زمینه را به برنامه های وب خود اضافه کنید.
چرا کارگران خدماتی؟
توسعه دهندگان وب برای مدت طولانی در تلاش برای گسترش قابلیت های برنامه های خود بوده اند. قبل از آمدن کارگران خدماتی، می‌توانید از راه‌حل‌های مختلفی برای این امکان استفاده کنید. یکی از موارد قابل توجه AppCache بود که منابع کش را راحت می کرد. متأسفانه، مشکلاتی داشت که آن را به یک راه حل غیرعملی برای اکثر برنامه ها تبدیل کرد.
AppCache ایده خوبی به نظر می رسید زیرا به شما این امکان را می داد که دارایی ها را به راحتی مشخص کنید تا ذخیره شوند. با این حال، مفروضات زیادی در مورد کاری که می‌خواستید انجام دهید ایجاد کرد و سپس زمانی که برنامه شما دقیقاً از آن فرضیات پیروی نکرد، به طرز وحشتناکی شکست خورد. جیک آرچیبالد (متاسفانه با عنوان اما خوش نوشته) را بخوانید.
کش برنامه یک Douchebag است
برای جزئیات بیشتر (منبع:
MDN
)
کارگران خدمات تلاش فعلی برای کاهش محدودیت‌های برنامه‌های وب، بدون اشکالات فناوری مانند AppCache هستند.
موارد استفاده برای کارگران خدماتی
بنابراین کارکنان خدمات دقیقاً به شما اجازه می دهند چه کاری انجام دهید؟ کارکنان خدمات به شما امکان می دهند ویژگی هایی را که مشخصه برنامه های بومی هستند به برنامه وب خود اضافه کنید. آنها همچنین می‌توانند یک تجربه معمولی را در دستگاه‌هایی که از کارگران خدمات پشتیبانی نمی‌کنند، ارائه دهند. برنامه هایی مانند این گاهی اوقات برنامه های وب پیشرو (PWA) نامیده می شوند.
در اینجا برخی از ویژگی هایی وجود دارد که کارگران خدمات ممکن است:
- به کاربر اجازه می دهد تا زمانی که دیگر به اینترنت متصل نیست، از برنامه (یا حداقل بخشی از آن) استفاده کند. کارکنان خدمات با ارائه دارایی‌های ذخیره‌سازی شده در پاسخ به درخواست‌ها به این امر دست می‌یابند.
- در مرورگرهای مبتنی بر Chromium، یک سرویس کار یکی از ملزومات قابل نصب بودن یک برنامه وب است.
- کارکنان سرویس برای برنامه وب شما ضروری هستند تا بتوانند اعلان‌های فشاری را پیاده‌سازی کنند.
چرخه حیات یک کارگر خدماتی
کارکنان خدمات ممکن است درخواست ها را برای کل سایت یا فقط بخشی از صفحات سایت کنترل کنند. یک صفحه وب خاص فقط می تواند یک سرویس دهنده فعال داشته باشد، و همه کارکنان خدمات یک چرخه حیات مبتنی بر رویداد دارند. چرخه زندگی یک کارگر خدماتی به طور کلی به این صورت است:
- ثبت نام و دانلود کارگر. زندگی یک سرویسکار زمانی شروع می‌شود که یک فایل جاوا اسکریپت آن را ثبت کند. اگر ثبت نام موفقیت آمیز باشد، کارمند سرویس بارگیری می کند و سپس در یک موضوع خاص شروع به اجرا می کند.
- هنگامی که صفحه ای که توسط سرویس کار کنترل می شود بارگذاری می شود، سرویس کار یک رویداد “نصب” را دریافت می کند. این همیشه اولین رویدادی است که یک سرویس دهنده دریافت می کند و شما می توانید یک شنونده برای این رویداد در داخل کارگر تنظیم کنید. رویداد “نصب” عموماً برای واکشی و/یا کش کردن منابع مورد نیاز سرویس‌دهنده استفاده می‌شود.
- پس از اتمام نصب سرویسکار، یک رویداد «فعال‌سازی» دریافت می‌کند. این رویداد به کارگر این امکان را می‌دهد تا منابع اضافی استفاده شده توسط کارکنان خدمات قبلی را پاکسازی کند. اگر یک سرویسکار را به‌روزرسانی می‌کنید، رویداد فعال‌سازی فقط زمانی فعال می‌شود که انجام این کار ایمن باشد. این زمانی است که هنوز هیچ صفحه بارگیری شده ای از نسخه قدیمی Service Worker استفاده نمی کند.
- پس از آن، سرویسکار تمام صفحاتی را که پس از ثبت موفقیت آمیز بارگذاری شده‌اند، کنترل کامل دارد.
- آخرین مرحله چرخه حیات، افزونگی است، که زمانی اتفاق می‌افتد که سرویسکار حذف شود یا با نسخه جدیدتر جایگزین شود.
نحوه استفاده از Service Workers در جاوا اسکریپت
Service Worker API (MDN) رابطی را فراهم می کند که به شما امکان ایجاد و تعامل با سرویسکاران در جاوا اسکریپت را می دهد.
کارکنان خدمات در درجه اول با درخواست های شبکه و سایر رویدادهای ناهمزمان سروکار دارند. در نتیجه، سرویس کارگر API به شدت از آن استفاده می کند
وعده ها و برنامه نویسی ناهمزمان
.
برای ایجاد یک Service Worker، اولین کاری که باید انجام دهید این است که متد ()navigator.serviceWorker.register را فراخوانی کنید. در اینجا چیزی است که ممکن است به نظر برسد:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service worker registration succeeded:', registration);
}).catch((error) => { console.log('Service worker registration failed:', error); });
} else {
console.log('Service workers are not supported.');
}
بیرونی ترین بلوک if تشخیص ویژگی را انجام می دهد. این تضمین می‌کند که کد مربوط به سرویس‌دهنده فقط روی مرورگرهایی اجرا می‌شود که از کارگران خدمات پشتیبانی می‌کنند.
در مرحله بعد، کد روش ثبت را فراخوانی می کند. این مسیر را به سرویسکار (نسبت به مبدا سایت) می دهد تا آن را ثبت و دانلود کند. روش ثبت همچنین یک پارامتر اختیاری به نام scope را می پذیرد که می تواند برای محدود کردن صفحات کنترل شده توسط کارگر استفاده شود. کارکنان سرویس به طور پیش فرض تمام صفحات یک برنامه را کنترل می کنند. متد register یک Promise برمی گرداند که نشان می دهد آیا ثبت نام موفق بوده است یا خیر.
اگر Promise حل شود، کارمند خدمات با موفقیت ثبت نام کرد. سپس کد یک شی را که نشان دهنده سرویس کار ثبت شده است در کنسول چاپ می کند.
اگر فرآیند ثبت نام با شکست مواجه شود، کد خطا را دریافت کرده و آن را در کنسول ثبت می کند.
در مرحله بعد، در اینجا یک مثال ساده از آنچه ممکن است خود کارگر خدماتی به نظر برسد آورده شده است:
self.addEventListener('install', (event) => {
event.waitUntil(new Promise((resolve, reject) => {
console.log("doing setup stuff")
resolve()
}))
console.log("Service worker finished installing")
})
self.addEventListener('activate', (event) => {
event.waitUntil(new Promise((resolve, reject) => {
console.log("doing clean-up stuff!")
resolve()
}))
console.log('activation done!')
})
self.addEventListener('fetch', (event) => {
console.log("Request intercepted", event)
});
این کارگر سرویس آزمایشی دارای سه شنونده رویداد است که در مقابل خودش ثبت شده است. دارای یکی برای رویداد “نصب”، رویداد “فعال کردن” و رویداد “واکشی”.
در داخل دو شنونده اول، کد از متد waitUntil استفاده می کند. این روش یک قول را می پذیرد. وظیفه آن این است که اطمینان حاصل کند که کارگر خدمات قبل از رفتن به رویداد بعدی منتظر می ماند تا Promise حل شود یا رد شود.
هر زمان که درخواستی برای منبعی که کارگر سرویس کنترل می کند، درخواست شود، شنونده واکشی فعال می شود.
منابعی که توسط یک سرویسکار کنترل می‌شود، شامل تمام صفحاتی است که کنترل می‌کند و همچنین دارایی‌هایی که در آن صفحات به آنها ارجاع می‌شود.
برنامه های وب خود را با سرویس کاران تقویت کنید
کارگران خدماتی نوع خاصی از کارمندان وب هستند که هدف منحصر به فردی را دنبال می کنند. آنها در مقابل درخواست های شبکه می نشینند تا ویژگی هایی مانند دسترسی به برنامه آفلاین را فعال کنند. استفاده از سرویس دهنده ها در یک برنامه وب می تواند تجربه کاربری آن را بسیار بهبود بخشد. می‌توانید با استفاده از سرویس‌کارگر API، سرویسکار ایجاد کنید و با آنها تعامل کنید.