بهبود تجربه توسعه کارکنان خدمات

در حالی که چرخه عمر کارگر خدمات یک فرآیند نصب و به روز رسانی قابل پیش بینی را تضمین می کند، می تواند چرخه توسعه محلی را کمی متفاوت تر کند.

در چرخه توسعه محلی معمولی، توسعه‌دهندگان تغییرات را در فایل‌ها در یک ویرایشگر متن ذخیره می‌کنند، سپس برای تأیید تغییرات به مرورگر سوئیچ می‌کنند و فرآیند تکرار می‌شود. هنگامی که یک سرویس دهنده در ترکیب است، این چرخه تا حد زیادی یکسان است، اما ممکن است بین آنچه توسعه دهنده انتظار دارد و کاری که مرورگر انجام می دهد تفاوت هایی وجود داشته باشد.

استثنائات توسعه محلی

به طور کلی، API های سرویس دهنده فقط در صفحاتی که از طریق HTTPS ارائه می شوند در دسترس هستند، اما استثناهایی برای این قانون وجود دارد که ممکن است از طریق HTTP در دسترس باشند. یک استثنا قابل توجه برای صفحاتی است که از طریق localhost ارائه می شوند که برای توسعه محلی به خوبی کار می کند.

با این حال، برای توسعه دهندگان غیرعادی نیست که نام میزبان محلی را به غیر از localhost در فایل میزبان مشخص کنند. زمانی که چندین پروژه به نام میزبان جداگانه نیاز دارند، این مورد در محیط های توسعه محلی مورد نیاز است. در این موارد، ارائه گواهی خودامضا انجام خواهد شد.

راه‌حل راحت‌تر این است که به مرورگر دستور دهید تا برای تست سرویس‌کار استثنا قائل شود. برای Chrome، به chrome://flags/#unsafely-treat-insecure-origin-as-secure بروید و مبداهای ناامن را مشخص کنید تا به عنوان مبداهای امن در نظر گرفته شوند. فایرفاکس روشی را برای آزمایش کارکنان سرویس در مبداهای ناامن از طریق تنظیمات devtools.serviceWorkers.testing.enabled در about:config ارائه می دهد.

کمک های توسعه کارکنان خدمات

توسعه محلی با یک کارگر خدماتی در ترکیب می تواند منجر به رفتارهای به ظاهر غیرمنتظره شود. به عنوان مثال، فرض کنید یک استراتژی فقط حافظه پنهان برای دارایی‌های استاتیک بدون نسخه وجود دارد، یا یک صفحه از پیش ذخیره‌شده «شما آفلاین هستید» که انتظار می‌رود پس از ایجاد تغییرات در بارگذاری مجدد به‌روزرسانی شود. از آنجا که یک نسخه قدیمی از آن دارایی ها همیشه از یک نمونه Cache ارائه می شود، ظاهراً هرگز به روز نمی شوند! به هر حال ناامید کننده است، کارگر خدماتی تنها کاری را انجام می دهد که برای انجام آن ساخته شده است، اما راه هایی وجود دارد که آزمایش را آسان تر می کند.

تا حد زیادی مؤثرترین راه برای آزمایش یک سرویس‌دهنده، تکیه بر پنجره‌های مرور خصوصی، مانند پنجره‌های ناشناس در کروم، یا ویژگی مرور خصوصی فایرفاکس است . هر بار که یک پنجره مرور خصوصی را باز می کنید، تازه شروع می کنید. هیچ سرویس دهنده فعالی وجود ندارد و هیچ نمونه Cache باز وجود ندارد. روال این نوع آزمایش عبارت است از:

1. یک پنجره مرور خصوصی باز کنید.
2. به صفحه ای بروید که یک سرویس دهنده را ثبت می کند.
3. بررسی کنید که آیا کارمند خدمات همانطور که انتظار دارید رفتار می کند.
4. پنجره حالت ناشناس را ببندید.
5. تکرار.

با این فرآیند، شما صادقانه از چرخه عمر کارگر خدمات تقلید می کنید.

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

پانل برنامه دارای یک پنل فرعی با عنوان Service Workers است که کارگران خدمات فعال را برای صفحه فعلی نشان می دهد. هر سرویس دهنده فعال را می توان به صورت دستی به روز کرد یا حتی به طور کلی از ثبت نام خارج کرد. همچنین سه ضامن در بالا وجود دارد که به توسعه کمک می کند.

1. آفلاین شرایط آفلاین را شبیه سازی می کند. این به هنگام آزمایش اینکه آیا یک سرویس دهنده فعال در حال ارائه محتوای آفلاین است کمک می کند.
2. به‌روزرسانی هنگام بارگیری مجدد : وقتی صفحه تغییر می‌کند، هر زمان که صفحه دوباره بارگیری می‌شود، سرویس‌کار فعلی را دوباره واکشی می‌کند و جایگزین می‌کند.
3. بای پس برای شبکه ، هنگامی که جابجا می شود، هر کدی را در رویداد fetch یک کارگر سرویس دور می زند و همیشه محتوا را از شبکه واکشی می کند.

اینها ضامن های مفیدی هستند، به ویژه Bypass برای شبکه ، که وقتی در حال توسعه یک پروژه با یک سرویس دهنده فعال هستید، بسیار عالی است، اما همچنین می خواهید مطمئن شوید که تجربه بدون یک سرویس دهنده همانطور که انتظار می رود کار می کند.

فایرفاکس یک پنل برنامه مشابه در ابزارهای توسعه‌دهنده خود دارد، اما این عملکرد به نشان دادن سرویس‌دهنده‌های نصب شده و همچنین امکان لغو ثبت نام دستی هر سرویس‌کار فعال برای صفحه فعلی محدود است. این به همان اندازه مفید است، اما به تلاش دستی بیشتری در چرخه توسعه محلی نیاز دارد.

جابجایی و بارگذاری مجدد

هنگام توسعه محلی با یک سرویس‌کار فعال بدون نیاز به عملکردی که به‌روزرسانی در رفرش یا دور زدن شبکه ارائه می‌کند، نگه داشتن Shift و فشار دادن دکمه تازه‌سازی نیز مفید است.

به این یک تازه سازی اجباری گفته می شود که حافظه پنهان HTTP شبکه را دور می زند. هنگامی که یک سرویس دهنده فعال است، یک به روز رسانی اجباری نیز به طور کامل سرویس دهنده را دور می زند.

اگر در مورد اینکه آیا یک استراتژی ذخیره‌سازی خاص همانطور که در نظر گرفته شده است کار می‌کند یا خیر، این عملکرد عالی است، و استفاده از همه چیز از شبکه برای مقایسه رفتارها با و بدون یک سرویس‌دهنده مفید است. بهتر از آن، این یک رفتار مشخص است، بنابراین همه مرورگرهایی که از کارکنان خدمات پشتیبانی می کنند، آن را رعایت می کنند.

بررسی محتویات کش

در صورتی که کش قابل بازرسی نباشد، تشخیص اینکه آیا یک استراتژی ذخیره سازی آنطور که در نظر گرفته شده است کار می کند یا خیر، دشوار است. مطمئناً، حافظه پنهان را می‌توان به صورت کد بررسی کرد، اما این فرآیندی است که شامل اشکال‌زدایی‌کننده‌ها و/یا دستورات console می‌شود که ابزار بصری برای این کار مناسب‌تر است. پانل برنامه در Chrome DevTools یک پنل فرعی برای بررسی محتویات نمونه های Cache ارائه می دهد.

این پنل فرعی با ارائه عملکردهایی مانند:

• مشاهده نام نمونه های Cache .
• توانایی بازرسی بدنه پاسخ دارایی های ذخیره شده و سرصفحه های پاسخ مرتبط با آنها.
• یک یا چند مورد را از حافظه پنهان خارج کنید یا حتی کل نمونه های Cache را حذف کنید.

این رابط کاربری گرافیکی بازرسی کش های سرویس کارمند را آسان تر می کند تا ببینید آیا موارد اضافه، به روز شده یا به طور کلی از کش سرویس کار حذف شده اند یا خیر. فایرفاکس نمایشگر کش خود را با عملکرد مشابه ارائه می دهد، اگرچه در یک پانل ذخیره سازی جداگانه زندگی می کند.

شبیه سازی سهمیه ذخیره سازی

در وب‌سایت‌هایی با دارایی‌های استاتیک زیاد (مانند تصاویر با وضوح بالا)، می‌توان به سهمیه‌های ذخیره‌سازی رسید. وقتی این اتفاق می‌افتد، مرورگر مواردی را از حافظه پنهان خارج می‌کند که آن‌ها را کهنه می‌داند، یا به‌نظر می‌رسد ارزش قربانی کردن برای ایجاد فضا برای دارایی‌های جدید را دارند.

پرداختن به سهمیه‌های ذخیره‌سازی باید بخشی از توسعه کارکنان خدمات باشد، و Workbox این فرآیند را ساده‌تر از مدیریت خودتان می‌کند. با این حال، با یا بدون Workbox، شبیه سازی یک سهمیه ذخیره سازی سفارشی برای آزمایش منطق مدیریت کش ممکن است ایده خوبی باشد.

پانل برنامه در DevTools کروم دارای یک زیرپانل فضای ذخیره‌سازی است که اطلاعاتی در مورد میزان استفاده از سهمیه ذخیره‌سازی فعلی توسط صفحه ارائه می‌دهد. همچنین اجازه می دهد تا یک سهمیه سفارشی در مگابایت مشخص شود. زمانی که Chrome اعمال شود، سهمیه ذخیره سازی سفارشی را اعمال می کند تا بتوان آن را آزمایش کرد.

ضمناً، این پنل فرعی همچنین حاوی یک دکمه پاک کردن داده‌های سایت و مجموعه کاملی از چک باکس‌های مرتبط برای مواردی است که با کلیک روی دکمه باید پاک شوند. در میان این موارد، هر نمونه Cache باز، و امکان لغو ثبت نام هر سرویس دهنده فعالی که صفحه را کنترل می کند، وجود دارد.

توسعه آسان تر، بهره وری بهتر

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