کار با کارگران خدماتی

جف پوسنیک

این لبه کد به شما نشان می دهد که چگونه یک سرویس دهنده را از داخل برنامه وب خود ثبت کنید و از ابزارهای توسعه دهنده Chrome برای مشاهده رفتار آن استفاده کنید. همچنین برخی از تکنیک‌های اشکال‌زدایی را پوشش می‌دهد که ممکن است هنگام برخورد با کارکنان خدمات مفید بیابید.

با نمونه پروژه آشنا شوید

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

  • register-sw.js خالی شروع می شود، اما حاوی کدی است که برای ثبت سرویس کارگر استفاده می شود. در حال حاضر از طریق یک تگ <script> در داخل index.html پروژه بارگذاری شده است.
  • service-worker.js به طور مشابه خالی است. این فایلی است که شامل سرویس کار برای این پروژه است.

کد ثبت نام کارگر خدماتی را اضافه کنید

یک Service Worker (حتی یک سرویس خالی، مانند فایل service-worker.js فعلی) استفاده نخواهد شد مگر اینکه ابتدا ثبت شده باشد. می توانید این کار را از طریق تماس با شماره زیر انجام دهید:

navigator.serviceWorker.register(
  '/service-worker.js'
)

داخل فایل register-sw.js شما.

با این حال، قبل از اینکه آن کد را اضافه کنید، چند نکته وجود دارد که باید در نظر گرفته شود.

اولاً، هر مرورگری از سرویس‌دهندگان پشتیبانی نمی‌کند. این به ویژه برای نسخه های قدیمی مرورگرهایی که به طور خودکار به روز نمی شوند صادق است. بنابراین بهترین کار این است که پس از بررسی اینکه آیا navigator.serviceWorker پشتیبانی می شود یا خیر، به صورت مشروط navigator.serviceWorker.register() را فراخوانی کنید.

دوم، زمانی که یک سرویس‌کار ثبت نام می‌کنید، مرورگر کد موجود در فایل service-worker.js شما را اجرا می‌کند و ممکن است بسته به کد موجود در install و activate کنترل‌کننده‌های رویداد، URL‌ها را برای پر کردن حافظه‌های پنهان شروع کند.

اجرای کدهای اضافی و دانلود دارایی ها می تواند از منابع ارزشمندی استفاده کند که مرورگر شما در غیر این صورت می تواند برای نمایش صفحه وب فعلی استفاده کند. برای کمک به جلوگیری از این تداخل، به تأخیر انداختن ثبت نام یک سرویس دهنده تا زمانی که مرورگر رندر صفحه فعلی را به پایان برساند، تمرین خوبی است. یک راه مناسب برای تقریب این است که منتظر بمانید تا رویداد window.load فعال شود.

با کنار هم قرار دادن این دو نکته، این کد ثبت نام کارگر خدمات عمومی را به فایل register-sw.js خود اضافه کنید:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

مقداری کد ورود به سیستم کارگر سرویس اضافه کنید

فایل service-worker.js شما جایی است که تمام منطق پیاده‌سازی سرویس‌کارگر شما به طور معمول در آن قرار می‌گیرد. می‌توانید از ترکیبی از رویدادهای چرخه عمر سرویس‌کار، API حافظه پنهان و دانش در مورد ترافیک شبکه برنامه وب خود استفاده کنید تا یک سرویس‌کار کاملاً ساخته‌شده، آماده برای رسیدگی به تمام درخواست‌های برنامه وب خود ایجاد کنید.

اما ... این همه برای یادگیری بعد است. در این مرحله، تمرکز بر مشاهده رویدادهای مختلف سرویس‌دهنده و راحت‌تر شدن استفاده از DevTools Chrome برای اشکال‌زدایی وضعیت سرویس‌کار شما است.

برای این منظور، کد زیر را به service-worker.js اضافه کنید، که پیام‌ها را در پاسخ به رویدادهای مختلف به کنسول DevTools ثبت می‌کند (اما کار زیادی انجام نمی‌دهد):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

با پنل Service Workers در DevTools آشنا شوید

اکنون که کدی را به فایل های register-sw.js و service-worker.js اضافه کرده اید، وقت آن است که از نسخه Live پروژه نمونه خود بازدید کرده و سرویس کارگر را در حال مشاهده مشاهده کنید.

  • برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  • «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  • روی تب Console کلیک کنید.

شما باید چیزی شبیه پیام های گزارش زیر را مشاهده کنید که نشان می دهد سرویس دهنده نصب و فعال شده است:

نشان می دهد که Service Worker نصب و فعال شده است.

سپس به تب Applications رفته و پنل Service Workers را انتخاب کنید. شما باید چیزی شبیه به زیر ببینید:

جزئیات کارگر خدمات را در پانل کارگر خدمات نشان می دهد.

این به شما اطلاع می‌دهد که یک سرویس‌کار با نشانی اینترنتی منبع service-worker.js برای برنامه وب solar-donkey.glitch.me وجود دارد که در حال حاضر فعال و در حال اجرا است. همچنین به شما می گوید که در حال حاضر یک مشتری (برگه باز) وجود دارد که توسط سرویس دهنده کنترل می شود.

می‌توانید از پیوندهای موجود در این پانل، مانند Unregister یا stop ، برای ایجاد تغییرات در سرویس‌کار ثبت‌شده فعلی برای اهداف اشکال‌زدایی استفاده کنید.

جریان به‌روزرسانی کارگر سرویس را فعال کنید

یکی از مفاهیم کلیدی که باید هنگام توسعه با کارکنان خدمات درک کرد، ایده جریان به روز رسانی است.

پس از بازدید کاربران از یک برنامه وب که یک سرویس دهنده را ثبت می کند، در نهایت کد نسخه فعلی service-worker.js نصب شده در مرورگر محلی خود را دریافت می کنند. اما وقتی نسخه service-worker.js ذخیره شده در وب سرور شما را به روز رسانی می کنید چه اتفاقی می افتد؟

هنگامی که یک بازدیدکننده مکرر به یک URL که در محدوده یک سرویس‌کار است برمی‌گردد، مرورگر به‌طور خودکار آخرین service-worker.js را درخواست می‌کند و هرگونه تغییر را بررسی می‌کند. اگر هر چیزی در اسکریپت Service Worker متفاوت باشد، سرویس‌کار جدید فرصت نصب، فعال‌سازی و در نهایت کنترل را خواهد داشت.

شما می توانید این جریان به روز رسانی را با بازگشت به ویرایشگر کد پروژه خود و ایجاد هرگونه تغییر در کد شبیه سازی کنید. یک تغییر سریع، جایگزینی خواهد بود

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

با

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

پس از انجام این تغییر، به نسخه Live برنامه نمونه خود بازگردید و صفحه را با باز بودن تب DevTools Application بارگیری مجدد کنید. شما باید چیزی شبیه به زیر ببینید:

دو نسخه از Service Worker نصب شده را نشان می دهد.

این نشان می دهد که دو نسخه از Service Worker شما در این نقطه نصب شده است. نسخه قبلی که قبلاً فعال شده بود در حال اجرا است و صفحه فعلی را کنترل می کند. نسخه به روز شده سرویس کارگر درست در زیر فهرست شده است. در حالت waiting است و تا زمانی که همه برگه‌های باز که توسط سرویس‌کار قدیمی کنترل می‌شوند بسته شوند، منتظر می‌ماند.

این رفتار پیش‌فرض تضمین می‌کند که اگر سرویس‌کار جدید شما تفاوت اساسی در رفتار با سرویس‌کار قدیمی شما داشته باشد - مانند یک کنترل‌کننده fetch که با منابعی که با نسخه‌های قدیمی‌تر برنامه وب شما ناسازگار است پاسخ می‌دهد - تا زمانی که یک کاربر وارد عمل نمی‌شود. تمام نمونه های قبلی برنامه وب شما را خاموش کرده است.

خلاصه کردن مطالب

اکنون باید با روند ثبت نام یک سرویس دهنده و مشاهده رفتار یک سرویس دهنده با استفاده از DevTools Chrome راحت باشید.

شما اکنون در موقعیت خوبی هستید که می توانید استراتژی های کش را شروع کنید، و همه چیزهای خوبی که به بارگذاری سریع و مطمئن برنامه وب شما کمک می کند.