راه های Workbox

Workbox به اندازه کافی منعطف است تا تقریباً فرآیند ساخت هر پروژه را در خود جای دهد. این بدان معناست که بیش از یک راه برای استفاده از Workbox وجود دارد که به شما امکان می دهد ادغام مناسب برای پروژه خود را انتخاب کنید. صرف نظر از نحوه ادغام با Workbox، ابزارهای مختلف API مشابهی را ارائه می دهند.

generateSW در مقابل injectManifest

شما به یکی از دو روش اصلی ابزارهای ساخت Workbox تکیه خواهید کرد: generateSW یا injectManifest . اینکه کدام یک را باید استفاده کنید به میزان انعطافی که نیاز دارید بستگی دارد. generateSW سهولت استفاده و سادگی را به قیمت انعطاف پذیری در اولویت قرار می دهد و به شما امکان می دهد مجموعه ای از گزینه های پیکربندی را اعلام کنید و در ازای آن یک سرویس دهنده کاملاً کاربردی به شما ارائه دهد.

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

زمان استفاده generateSW

شما باید generateSW استفاده کنید اگر:

• شما می‌خواهید فایل‌های مرتبط با فرآیند ساخت خود را پیش کش کنید، از جمله فایل‌هایی که URL آنها حاوی هش‌هایی هستند که ممکن است از قبل آن‌ها را نشناسید.
• شما نیازهای ذخیره سازی در زمان اجرا ساده دارید که می تواند از طریق گزینه های generateSW پیکربندی شود.

چه زمانی generateSW استفاده نکنید

از طرف دیگر، شما نباید از generateSW استفاده کنید اگر:

• می‌خواهید از سایر ویژگی‌های Service Worker (مانند Web Push ) استفاده کنید.
• برای وارد کردن اسکریپت‌های اضافی یا استفاده از ماژول‌های Workbox خاص برای تنظیم دقیق سرویس‌کار بر اساس نیازهای برنامه‌تان، به انعطاف‌پذیری بیشتری نیاز دارید.

زمان استفاده injectManifest

شما باید از injectManifest استفاده کنید اگر:

• می‌خواهید فایل‌ها را پیش کش کنید، اما می‌خواهید Service Worker خودتان را بنویسید.
• شما نیازهای پیچیده ای برای ذخیره سازی یا مسیریابی دارید که نمی توان آنها را از طریق گزینه های پیکربندی generateSW بیان کرد.
• شما می خواهید از API های دیگر در سرویس کار خود (مانند Web Push) استفاده کنید.

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

چه زمانی از injectManifest استفاده نکنید

شما نباید injectManifest استفاده کنید اگر:

• شما نمی خواهید از precaching در سرویس دهنده خود استفاده کنید.
• نیازهای کارگر سرویس ما به اندازه کافی ساده است که بتوان آن را با آنچه generateSW و گزینه های پیکربندی آن ارائه می کند پوشش داد.
• شما سهولت استفاده را بر انعطاف پذیری اولویت می دهید.

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

اگر به دنبال راهی برای استفاده از Workbox در فرآیند ساخت خود هستید، سه گزینه دارید:

1. workbox-cli
2. workbox-build . ابزار خط فرمان
3. استفاده از باندلر (مانند workbox-webpack-plugin ).

هر یک از این ابزارهای ساخت، هر دو حالت generateSW و injectManifest را با مجموعه‌ای از گزینه‌های مشابه ارائه می‌دهند. همه اینها انتخاب های خوبی هستند وقتی که نمی خواهید سرویس کار مجهز به Workbox خود را به یک چارچوب خاص گره بزنید. برای اینکه بدانید کدام یک از این گزینه ها مناسب تر است، اجازه دهید نگاهی گذرا به هر یک بیندازیم.

workbox-cli

اگر به دنبال کمترین مانع ممکن برای ورود با Workbox هستید، CLI برای شما مناسب است:

npm install workbox-cli --save-dev

برای شروع استفاده از CLI، ویزارد را با npx workbox wizard اجرا کنید. جادوگر چند سوال می پرسد و از پاسخ به آن سوالات برای راه اندازی یک پروژه با فایل workbox-config.js استفاده می شود که می توانید آن را مطابق با نیاز خود سفارشی کنید. چیزی شبیه به این خواهد بود:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

هنگامی که فایل پیکربندی شما ایجاد شد، CLI می تواند متدهای generateSW یا injectManifest را برای شما اجرا کند. متن راهنمای CLI اطلاعات و نمونه‌هایی از کاربرد بیشتری دارد.

workbox-build

workbox-cli یک بسته بندی در اطراف ماژول workbox-build است و یک جایگزین آن استفاده مستقیم از workbox-build است. هنگام استفاده از workbox-build ، به‌جای تعیین گزینه‌ها با استفاده از فایل workbox-config.js ، از متدهای generateSW یا injectManifest مستقیماً به عنوان بخشی از اسکریپت Node استفاده می‌کنید که مجموعه‌ای از گزینه‌های مشابه را ارسال می‌کند:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

در مثال بالا، workbox-build هنگامی که دستور node build-sw.mjs اجرا می شود، سرویس کارگر تولید شده را در پوشه dist می نویسد.

استفاده از باندلر

بسته‌کننده‌های مختلف افزونه‌های Workbox خود را دارند، اما تنها باندلری که به‌طور رسمی توسط تیم Workbox پشتیبانی می‌شود، webpack است، از طریق workbox-webpack-plugin . مانند workbox-cli و workbox-build ، workbox-webpack-plugin متدهای generateSW یا injectManifest را اجرا می‌کند، به جز اینکه افزونه نام این روش‌ها را به‌عنوان GenerateSW یا InjectManifest به حروف بزرگ در می‌آورد. در غیر این صورت، استفاده مشابه workbox-build است:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

گزینه‌هایی که به GenerateSW یا InjectManifest ارسال می‌کنید مانند generateSW یا injectManifest نیستند، اما همپوشانی قابل توجهی وجود دارد. به طور خاص، شما نه نیازی به تعیین یک گزینه globDirectory برای GenerateSW ندارید - و نه می توانید - زیرا وب پک از قبل می داند که دارایی های تولید شما در کجا قرار دارند.

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

همه چیزهایی که در این مورد پوشش داده شده است، بر استفاده از Workbox بدون در نظر گرفتن ترجیحات چارچوب تمرکز دارد. با این حال، در صورتی که توسعه را آسان‌تر کند، می‌توان از Workbox در چارچوب خاصی استفاده کرد. برای مثال، create-react-app به صورت پیش‌فرض با Workbox ارسال می‌شود . ادغام های مختلف چارچوب با Workbox بعداً در مقاله بعدی پوشش داده می شود .

شایان ذکر است که این ادغام‌های Workbox خاص چارچوب ممکن است توانایی شما را برای پیکربندی Workbox به روشی که می‌خواهید محدود کند. در مواردی مانند این، همیشه می توانید به روش هایی که در اینجا بحث شده است بازگردید.

اگر فرآیند ساخت نداشته باشم چه می شود؟

این سند فرض می‌کند که پروژه شما یک فرآیند ساخت دارد، اما پروژه شما در واقع ممکن است نداشته باشد. اگر وضعیت شما را توصیف می‌کند، همچنان می‌توانید از Workbox با ماژول workbox-sw استفاده کنید. با workbox-sw ، می‌توانید زمان اجرا Workbox را از CDN یا محلی بارگیری کنید و سرویس‌کار خود را بنویسید.

نتیجه

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