کاربران انتظار دارند که برنامه ها با اتصالات شبکه کند یا ضعیف یا حتی در حالت آفلاین شروع به کار کنند. آنها انتظار دارند محتوایی که اخیراً با آن تعامل داشته اند، مانند آهنگ های رسانه ای یا بلیط ها و برنامه های سفر، در دسترس و قابل استفاده باشد. وقتی درخواستی امکان پذیر نباشد، انتظار دارند که برنامه به جای عدم موفقیت یا خراب شدن بیصدا به آنها بگوید. و کاربران مایلند همه این کارها را به سرعت انجام دهند. همانطور که در این مطالعه میبینیم میلیثانیهها میلیونها نفر هستند ، حتی یک بهبود 0.1 ثانیه در زمان بارگذاری میتواند تبدیل را تا 10% بهبود بخشد. به طور خلاصه: کاربران انتظار دارند که PWA ها قابل اعتماد باشند و به همین دلیل است که ما کارگران خدماتی داریم.
با سلام خدمت کارکنان
هنگامی که یک برنامه منبعی را درخواست میکند که تحت پوشش حوزه کارمند خدمات باشد، از جمله زمانی که کاربر آفلاین است، سرویسکار درخواست را رهگیری میکند و به عنوان یک پروکسی شبکه عمل میکند. سپس میتواند تصمیم بگیرد که آیا باید منبع را از حافظه نهان از طریق 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/
کنترل کند. کارکنان خدمات فقط می توانند موارد (صفحات، کارگران، مجموعاً "مشتریان") را در محدوده خود کنترل کنند. Scope برای برگه های مرورگر و پنجره های 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 نیست. ویژگیهای دیگری در بالای آن برای مقاصد دیگر مانند اجرای کد پسزمینه، اعلانهای فشار وب و پرداختهای پردازشی در دسترس است. ما در مورد این موارد اضافه شده در فصل قابلیت ها بحث خواهیم کرد.