جعبه کار: مجموعه ابزار کارمندان خدمات سطح بالا شما

Jeff Posnick

دو API نقش مهمی در ساخت برنامه های وب قابل اعتماد دارند: Service Worker و Cache Storage . اما استفاده موثر از آنها - بدون معرفی اشکالات ظریف یا برخورد به لبه ها - می تواند یک چالش باشد. به عنوان مثال، خطا در کد سرویس‌دهنده شما می‌تواند باعث مشکلات حافظه پنهان شود. ممکن است به کاربران محتوای قدیمی یا پیوندهای شکسته نشان داده شود.

Workbox یک جعبه ابزار سرویس دهنده سطح بالا است که بر روی Service Worker و Cache Storage API ساخته شده است. مجموعه‌ای از کتابخانه‌های آماده برای افزودن پشتیبانی آفلاین به برنامه‌های وب را فراهم می‌کند. جعبه ابزار در دو مجموعه ساختار یافته است: ابزارهایی که به مدیریت کدهایی که در داخل سرویس کار شما اجرا می شود کمک می کنند و ابزارهایی که با فرآیند ساخت شما یکپارچه می شوند.

کد زمان اجرا

این کدی است که در داخل اسکریپت Service Worker شما اجرا می‌شود و نحوه رهگیری درخواست‌های خروجی و تعامل با Cache Storage API را کنترل می‌کند. Workbox در مجموع دارای یک دوجین یا بیشتر ماژول کتابخانه ای است که هر کدام از موارد استفاده تخصصی مختلف را مدیریت می کنند. مهم‌ترین ماژول‌ها تعیین می‌کنند که آیا سرویس‌کار پاسخ می‌دهد (معروف به مسیریابی )، و چگونه پاسخ می‌دهد (معروف به استراتژی ذخیره‌سازی ).

ایجاد یکپارچگی

Workbox ابزارهای خط فرمان ، ماژول Node.js و افزونه webpack را ارائه می‌کند که راه‌های جایگزینی را برای انجام دو چیز ارائه می‌دهد:

• یک اسکریپت Service Worker بر اساس مجموعه ای از گزینه های پیکربندی ایجاد کنید. سرویس‌کار تولید شده از کتابخانه‌های زمان اجرا Workbox "زیر سرپوش" استفاده می‌کند تا استراتژی‌های ذخیره‌سازی را که پیکربندی کرده‌اید به کار ببرد.
• بر اساس الگوهای قابل تنظیم برای گنجاندن و حذف فایل‌های تولید شده در طول فرآیند ساخت، فهرستی از URL‌هایی که باید از پیش ذخیره شوند، ایجاد کنید.

چرا باید از Workbox استفاده کنید؟

استفاده از Workbox هنگام ساختن سرویس‌کار اختیاری است—تعدادی راهنما وجود دارد که استراتژی‌های رایج ذخیره‌سازی پنهان را از دیدگاه کارگر خدماتی «وانیلی» ارائه می‌کند. اگر تصمیم به استفاده از Workbox دارید، در اینجا برخی از مزایای آن وجود دارد.

مدیریت کش

Workbox به‌روزرسانی‌های کش را برای شما مدیریت می‌کند، یا در هنگام استفاده از پیش کش به فرآیند ساخت شما مرتبط است، یا از طریق سیاست‌های اندازه/سن قابل تنظیم هنگام استفاده از کش در زمان اجرا. API ذخیره سازی کش زیرین قدرتمند است، اما هیچ پشتیبانی داخلی برای انقضای حافظه پنهان ندارد. ابزارهایی مانند Workbox این شکاف را پر می کنند.

گزارش گسترده و گزارش خطا

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

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

یک پایگاه کد بین مرورگر آزمایش شده

Workbox در برابر یک مجموعه آزمایشی بین مرورگرها توسعه یافته است و در صورت امکان، به طور خودکار به پیاده سازی های جایگزین از ویژگی هایی که در مرورگرهای خاص گم شده اند باز می گردد.

• workbox-broadcast-cache-update module در صورت موجود بودن از Broadcast Channel API استفاده می کند و به پیاده سازی مبتنی بر postMessage() در مرورگرهایی که فاقد پشتیبانی هستند بازمی گردد.
• ماژول workbox-background-sync در صورت امکان از Background Sync API استفاده می‌کند، و در غیر این صورت، هر بار که سرویس‌گر راه‌اندازی می‌شود، دوباره رویدادهای صف را امتحان می‌کند.

چگونه باید از Workbox استفاده کنید؟

یکپارچه سازی چارچوب

اگر پروژه جدیدی را از ابتدا شروع می‌کنید، می‌توانید از ادغام Workbox موجود در بسیاری از کیت‌های شروع و افزونه‌های محبوب استفاده کنید:

• ایجاد-واکنش-برنامه
• vue-cli
• preact-cli
• گتسبی
• Next.js

Workbox را به فرآیند ساخت موجود خود اضافه کنید

اگر در حال حاضر یک فرآیند ساخت برای سایت خود دارید، انداختن خط فرمان مناسب، ماژول Node.js یا ابزار افزونه webpack ممکن است تمام چیزی باشد که برای شروع استفاده از Workbox نیاز دارید.

به طور خاص، رابط خط فرمان Workbox راه‌اندازی و اجرای آن را آسان می‌کند، و دارای یک حالت wizard است که محیط توسعه محلی شما را بررسی می‌کند و یک پیکربندی پیش‌فرض معقول را پیشنهاد می‌کند که می‌توانید از آن برای حرکت رو به جلو استفاده کنید:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

برای ایجاد سرویس‌کار خود، workbox generateSW workbox-config.js به عنوان بخشی از فرآیند ساخت اجرا کنید. برای جزئیات به مستندات generateSW مراجعه کنید. می‌توانید با ایجاد تغییرات در workbox-config.js سرویس‌کار خود را بیشتر سفارشی کنید. برای جزئیات بیشتر به مستندات گزینه ها مراجعه کنید.

از Workbox در زمان اجرا در یک سرویس کار موجود استفاده کنید

اگر یک سرویس‌کار موجود دارید و می‌خواهید کتابخانه‌های زمان اجرا Workbox را امتحان کنید، Workbox را از CDN رسمی آن وارد کنید و فوراً از آن برای کش کردن زمان اجرا استفاده کنید. این مورد استفاده به این معنی است که شما نمی توانید از مزیت پیش کش (که نیاز به ادغام در زمان ساخت دارد) استفاده کنید، اما برای نمونه سازی و آزمایش استراتژی های مختلف ذخیره سازی در پرواز عالی است.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);