دو میانای برنامه‌سازی کاربردی نقش مهمی در ساختن برنامه‌های وب قابل‌اطمینان ایفا می‌کنند: Service Worker و Cache Storage. اما استفاده مؤثر از آن‌ها (بدون ایجاد اشکالات جزئی یا برخورد با موارد خاص) می‌تواند چالش‌برانگیز باشد. برای مثال، خطاها در کد کارگر سرویس شما می‌تواند باعث مشکلات ذخیره‌سازی موقت شود؛ ممکن است محتوای قدیمی یا پیوندهای خراب به کاربران نشان داده شود.
Workbox یک جعبه‌ابزار سطح بالای سرویس‌کار است که بر روی میاناهای برنامه‌سازی کاربردی «سرویس‌کار» و «فضای ذخیره‌سازی حافظه پنهان» ساخته شده است. مجموعه‌ای از کتابخانه‌های آماده تولید را برای افزودن پشتیبانی آفلاین به برنامه‌های وب ارائه می‌دهد. این جعبه‌ابزار به دو مجموعه تقسیم می‌شود: ابزارهایی که به مدیریت کدی که در داخل سرویس‌کار شما اجرا می‌شود کمک می‌کنند، و ابزارهایی که با فرایند ساخت شما ادغام می‌شوند.
کد زمان اجرا
این کدی است که در اسکریپت کارگر سرویس شما اجرا می‌شود و نحوه رهگیری درخواست‌های خروجی و تعامل با Cache Storage API را کنترل می‌کند. Workbox درمجموع حدود دوازده ماژول کتابخانه دارد که هرکدام انواع مختلفی از موارد استفاده تخصصی را مدیریت می‌کنند. مهم‌ترین ماژول‌ها تعیین می‌کنند که آیا کارگر سرویس پاسخ خواهد داد (به عنوان مسیریابی شناخته می‌شود) و چگونه پاسخ خواهد داد (به عنوان استراتژی ذخیره‌سازی شناخته می‌شود).
ساختن یکپارچه‌سازی
Workbox ابزارهای خط فرمان، ماژول Node.js، و افزونه webpack را ارائه می‌دهد که روش‌های جایگزینی برای انجام دو کار ارائه می‌دهند:
- ایجاد اسکریپت کارگر سرویس براساس مجموعه‌ای از گزینه‌های پیکربندی. کارگر سرویس تولیدشده از کتابخانه‌های زمان اجرای Workbox «در پشت صحنه» استفاده می‌کند تا راهبردهای ذخیره‌سازی مؤقت را که پیکربندی می‌کنید عملی کند.
- فهرستی از نشانی‌های وب تولید کنید که باید «پیش‌ذخیره» شوند، براساس الگوهای قابل‌پیکربندی برای گنجاندن و مستثنی کردن فایل‌های تولیدشده درطول فرایند ساخت شما.
چرا باید از Workbox استفاده کنید؟
استفاده از Workbox هنگام ساختن سرویس‌کار اختیاری است—راهنماهای زیادی وجود دارد که استراتژی‌های رایج ذخیره‌سازی موقت را از دیدگاه سرویس‌کار «وانیلی» توضیح می‌دهند. اگر تصمیم گرفتید از Workbox استفاده کنید، در اینجا برخی‌از مزایای آن آورده شده است.
مدیریت حافظه نهان
Workbox به‌روزرسانی‌های حافظه پنهان را برای شما مدیریت می‌کند، چه در هنگام استفاده از پیش‌ذخیره‌سازی به فرایند ساخت شما مرتبط باشد، چه ازطریق خط‌مشی‌های اندازه/سن قابل‌پیکربندی هنگام استفاده از حافظه پنهان زمان اجرا. میانای برنامه‌سازی کاربردی Cache Storage پایه قدرتمند است، اما هیچ‌گونه پشتیبانی داخلی برای انقضای حافظه پنهان ندارد. ابزارهایی مانند Workbox این شکاف را پر می‌کنند.
گزارش‌دهی خطا و ثبت گسترده
وقتی کار با سرویس‌کارها را شروع می‌کنید، فهمیدن اینکه چرا چیزی
ذخیره می‌شود (یا، به همان اندازه ناامیدکننده، چرا ذخیره نمی‌شود) یک چالش است.
Workbox به‌طور خودکار تشخیص می‌دهد که چه زمانی نسخه توسعه وب‌سایتتان را در localhost اجرا می‌کنید و ثبت اشکال‌زدایی را در کنسول جاوا اسکریپت مرورگرتان روشن می‌کند.
با دنبال کردن پیام‌های گزارش، می‌توانید بسیار سریع‌تر از زمانی که به‌تنهایی اقدام می‌کنید، به ریشه هرگونه مشکل پیکربندی یا ابطال برسید.
پایگاه کد آزمایش‌شده و سازگار با مرورگرهای مختلف
Workbox is developed against a cross-browser test suite, and when possible, automatically falls back to alternative implementations of features that are missing from certain browsers.
workbox-broadcast-cache-update moduleاز Broadcast Channel API درصورت دردسترس بودن استفاده می‌کند و در مرورگرهایی که از آن پشتیبانی نمی‌کنند، به پیاده‌سازی مبتنی برpostMessage()برمی‌گردد.- workbox-background-sync module درصورت امکان از Background Sync API استفاده می‌کند و اگر امکان‌پذیر نباشد، هربار که سرویس‌کار شروع‌به‌کار می‌کند، به تلاش مجدد برای رویدادهای صف‌بندی‌شده برمی‌گردد.
چگونه باید از Workbox استفاده کنید؟
یکپارچه‌سازی چارچوب
اگر پروژه جدیدی را از ابتدا شروع می‌کنید، می‌توانید از ادغام Workbox که در بسیاری از کیت‌های شروع محبوب و افزونه‌های برافزا وجود دارد بهره ببرید:
افزودن Workbox به فرایند ساخت موجود
اگر ازقبل فرایند ساخت برای سایتتان دارید، ممکن است برای شروع استفاده از Workbox فقط به ابزار مناسب خط فرمان، ماژول Node.js، یا افزونه webpack نیاز داشته باشید.
به‌ویژه، میانای خط فرمان 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',
})
);