کاربران انتظار دارند که برنامه ها با اتصالات شبکه کند یا ضعیف یا حتی آفلاین به طور قابل اعتماد شروع به کار کنند. آنها انتظار دارند محتوایی که اخیراً با آن تعامل داشته اند، مانند آهنگ های رسانه ای یا بلیط ها و برنامه های سفر، در دسترس و قابل استفاده باشد. وقتی درخواستی امکان پذیر نباشد، انتظار دارند که برنامه به جای عدم موفقیت یا خراب شدن بی‌صدا به آنها بگوید. و آنها می خواهند همه اینها به سرعت اتفاق بیفتد. همانطور که می‌بینید در میلیون‌ها میلیون‌ثانیه ، حتی یک بهبود 0.1 ثانیه‌ای در زمان بارگذاری می‌تواند تبدیل را تا 10% بهبود بخشد. کارکنان خدمات ابزاری هستند که به برنامه وب پیشرو (PWA) شما اجازه می‌دهند انتظارات کاربران شما را برآورده کند.
هنگامی که یک برنامه منبعی را درخواست می کند که تحت پوشش محدوده کارمند سرویس قرار می گیرد، کارمند سرویس درخواست را رهگیری می کند و به عنوان یک پروکسی شبکه عمل می کند، حتی اگر کاربر آفلاین باشد. سپس می‌تواند تصمیم بگیرد که آیا باید منبع را از حافظه پنهان با استفاده از Cache Storage API ارائه کند، آن را از شبکه به‌گونه‌ای ارائه کند که گویی هیچ سرویس‌دهنده فعالی وجود ندارد، یا آن را از یک الگوریتم محلی ایجاد کند. این به شما امکان می دهد تجربه ای با کیفیت بالا مانند تجربه یک برنامه پلت فرم ارائه دهید، حتی زمانی که برنامه شما آفلاین است.
ثبت نام کارگر خدماتی
قبل از اینکه یک سرویس دهنده کنترل صفحه شما را در دست بگیرد، باید برای PWA شما ثبت شود. این بدان معناست که اولین باری که کاربر PWA شما را باز می‌کند، تمام درخواست‌های شبکه مستقیماً به سرور شما می‌رود، زیرا سرویسکار هنوز بر صفحات شما کنترل ندارد.
پس از بررسی اینکه آیا مرورگر از Service Worker API پشتیبانی می کند یا خیر، PWA شما می تواند یک Service Worker را ثبت کند. پس از بارگیری، سرویسکار خود را بین PWA و شبکه قرار می‌دهد و درخواست‌ها را رهگیری می‌کند و پاسخ‌های مربوطه را ارائه می‌کند.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
بررسی کنید که آیا یک کارگر خدماتی ثبت شده است یا خیر
برای بررسی اینکه آیا یک سرویس دهنده ثبت شده است یا خیر، از ابزارهای توسعه دهنده در مرورگر مورد علاقه خود استفاده کنید.
در مرورگرهای مبتنی بر فایرفاکس و کرومیوم (مایکروسافت اج، گوگل کروم یا اینترنت سامسونگ):
- ابزارهای توسعه دهنده را باز کنید، سپس روی تب Application کلیک کنید.
- در قسمت سمت چپ، Service Workers را انتخاب کنید.
- بررسی کنید که URL اسکریپت کارمند سرویس با وضعیت "فعال شده" ظاهر شود. (برای اطلاعات بیشتر، چرخه حیات را ببینید). در فایرفاکس، وضعیت می تواند "در حال اجرا" یا "توقف" باشد.
در سافاری:
- روی Develop > Service Workers کلیک کنید.
- این منو را برای ورودی با مبدا فعلی بررسی کنید. با کلیک بر روی آن ورودی، یک بازرس در زمینه کارمند خدمات باز می شود.
دامنه
پوشه ای که کارمند خدمات شما در آن قرار دارد محدوده آن را تعیین می کند. یک سرویسکار که در example.com/my-pwa/sw.js زندگی می‌کند، می‌تواند هر پیمایشی را در مسیر my-pwa یا زیر آن کنترل کند، مانند example.com/my-pwa/demos/ . کارکنان خدمات فقط می توانند موارد (صفحات، کارگران، جمعاً "مشتریان") را در محدوده خود کنترل کنند. این محدوده برای برگه های مرورگر و پنجره های PWA اعمال می شود.
فقط یک کارگر خدماتی در هر محدوده مجاز است. هنگامی که یک سرویسکار فعال و در حال اجرا است، صرف نظر از اینکه چند کلاینت (پنجره‌های PWA یا برگه‌های مرورگر) در حافظه هستند، معمولاً فقط یک نمونه در دسترس است.
Safari دارای مدیریت دامنه پیچیده تری است که به عنوان پارتیشن شناخته می شود و بر نحوه کار دامنه ها با iframe های متقابل دامنه تأثیر می گذارد. برای کسب اطلاعات بیشتر در مورد اجرای WebKit، به پست وبلاگ آنها مراجعه کنید.
چرخه زندگی
کارگران خدمات یک چرخه عمر دارند که نحوه نصب آنها را جدا از نصب PWA شما تعیین می کند.
چرخه عمر کارگر خدماتی با ثبت نام کارگر خدماتی شروع می شود. سپس مرورگر سعی می کند فایل Service Worker را دانلود و تجزیه کند. اگر تجزیه موفقیت آمیز باشد، رویداد install سرویسکار فعال می شود. رویداد install فقط یک بار فعال می شود.
نصب سرویسکار بدون نیاز به مجوز کاربر، حتی اگر کاربر PWA را نصب نکند، بی‌صدا انجام می‌شود. Service Worker API حتی در پلتفرم‌هایی که از نصب PWA پشتیبانی نمی‌کنند، مانند Safari و Firefox در دستگاه‌های دسکتاپ در دسترس است.
پس از نصب، سرویسکار باید فعال شود تا بتواند مشتریان خود، از جمله PWA شما را کنترل کند. هنگامی که سرویس دهنده آماده کنترل مشتریان خود است، رویداد activate می شود. با این حال، به‌طور پیش‌فرض، یک سرویسکار فعال نمی‌تواند صفحه‌ای را که آن را ثبت کرده است مدیریت کند تا دفعه بعد که با بارگیری مجدد صفحه یا باز کردن مجدد PWA به آن صفحه بروید.
می‌توانید با استفاده از شی self به رویدادها در حوزه جهانی کارگر خدمات گوش دهید:
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
یک کارگر خدماتی را به روز کنید
وقتی مرورگر تشخیص دهد که سرویسکار که کلاینت را کنترل می‌کند و نسخه جدید فایل سرویسکار از سرور، بایت‌های متفاوتی دارند، به‌روزرسانی می‌شوند.
پس از نصب موفقیت‌آمیز، سرویسکار جدید منتظر می‌ماند تا فعال شود تا زمانی که سرویسکار قدیمی دیگر هیچ مشتری را کنترل نکند. این حالت "انتظار" نامیده می شود و به این صورت است که مرورگر اطمینان می دهد که فقط یک نسخه از سرویس دهنده شما در یک زمان اجرا می شود.
تازه کردن یک صفحه یا باز کردن مجدد PWA باعث نمی‌شود که سرویسکار جدید کنترل را در دست بگیرد. کاربر باید با استفاده از سرویسکار فعلی همه برگه‌ها و پنجره‌ها را ببندد یا از آنها دور شود و سپس برای دادن کنترل به سرویسکار جدید به عقب برگردد. برای اطلاعات بیشتر، به چرخه عمر کارگر خدمات مراجعه کنید.
طول عمر کارگر خدماتی
یک سرویسکار نصب شده و ثبت‌شده می‌تواند تمام درخواست‌های شبکه را در محدوده خود مدیریت کند. این برنامه روی رشته خودش اجرا می‌شود و فعال‌سازی و خاتمه آن توسط مرورگر کنترل می‌شود، که به آن اجازه می‌دهد حتی قبل از باز شدن PWA یا پس از بسته شدن آن کار کند. کارگران سرویس روی رشته خودشان اجرا می‌شوند، اما حالت حافظه ممکن است بین اجرای یک سرویسکار باقی بماند، بنابراین مطمئن شوید که هر چیزی که می‌خواهید برای هر اجرا دوباره استفاده کنید، در IndexedDB یا در حافظه‌های دائمی دیگر موجود است.
اگر از قبل اجرا نشده باشد، هر زمان که یک درخواست شبکه در محدوده آن ارسال می‌شود، یا زمانی که یک رویداد راه‌اندازی مانند همگام‌سازی پس‌زمینه دوره‌ای یا یک پیام فشار دریافت می‌کند، یک سرویسکار شروع به کار می‌کند.
اگر کارگران خدماتی برای چند ثانیه بیکار باشند یا برای مدت طولانی مشغول باشند، از کار خاتمه می یابند. زمان انجام این کار بین مرورگرها متفاوت است. اگر یک سرویسکار خاتمه یافته باشد و رویدادی رخ دهد که آن را راه اندازی کند، دوباره راه اندازی می شود.
قابلیت ها
یک سرویسکار ثبت‌شده و فعال از رشته‌ای با چرخه عمر اجرای کاملاً متفاوت از رشته اصلی PWA شما استفاده می‌کند. با این حال، به طور پیش فرض، خود فایل Service Worker هیچ رفتاری ندارد. هیچ منبعی را در حافظه پنهان یا سرویس نمی دهد. اینها کارهایی هستند که کد شما باید انجام دهد. در فصل های بعدی متوجه خواهید شد که چگونه.
قابلیت‌های کارگر سرویس فقط برای پروکسی یا ارائه درخواست‌های HTTP نیست. سایر ویژگی‌ها در بالای آن برای اهداف دیگر مانند اجرای کد پس‌زمینه، اعلان‌های فشار وب و پرداخت‌های پردازشی در دسترس هستند. ما در مورد این موارد اضافه شده در قابلیت ها بحث خواهیم کرد.