workbox-webpack-plugin

Workbox دو پلاگین بسته وب را ارائه می دهد: یکی که یک سرویس کار کامل را برای شما ایجاد می کند و دیگری که لیستی از دارایی ها را برای پیش کش ایجاد می کند که به فایل سرویس کارگر تزریق می شود.

پلاگین ها به صورت دو کلاس در ماژول workbox-webpack-plugin به نام های GenerateSW و InjectManifest پیاده سازی می شوند. پاسخ به سوالات زیر می تواند به شما در انتخاب افزونه و پیکربندی مناسب برای استفاده کمک کند.

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

GenerateSW

افزونه GenerateSW یک فایل Service Worker برای شما ایجاد می کند و آن را به خط لوله دارایی وب پک اضافه می کند.

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

• می خواهید فایل ها را پیش کش کنید.
• شما نیازهای ذخیره سازی در زمان اجرا ساده دارید.

زمانی که از GenerateSW استفاده نکنید

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

InjectManifest

افزونه InjectManifest لیستی از URL ها را برای پیش کش ایجاد می کند و آن مانیفست پیش کش را به فایل سرویس کارگر موجود اضافه می کند. در غیر این صورت فایل را همانطور که هست باقی می گذارد.

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

• شما می خواهید کنترل بیشتری بر کارمند خدمات خود داشته باشید.
• می خواهید فایل ها را پیش کش کنید.
• شما باید مسیریابی و استراتژی ها را سفارشی کنید.
• می‌خواهید از سرویس‌کار خود با سایر ویژگی‌های پلتفرم (مانند Web Push ) استفاده کنید.

زمانی که از InjectManifest استفاده نکنید

• شما می خواهید ساده ترین راه را برای افزودن یک سرویس دهنده به سایت خود داشته باشید.

پلاگین GenerateSW

می توانید افزونه GenerateSW را به پیکربندی بسته وب خود اضافه کنید:

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      navigateFallback: '...',
      runtimeCaching: [{
        // Routing via a matchCallback function:
        urlPattern: ({request, url}) => ...,
        handler: '...',
        options: {
          cacheName: '...',
          expiration: {
            maxEntries: ...,
          },
        },
      }, {
        // Routing via a RegExp:
        urlPattern: new RegExp('...'),
        handler: '...',
        options: {
          cacheName: '...',
          plugins: [..., ...],
        },
      }],
      skipWaiting: ...,
    }),
  ],
};

این یک سرویس‌کار با راه‌اندازی پیش کش برای تمام دارایی‌های بسته وب که توسط پیکربندی شما انتخاب شده‌اند و قوانین ذخیره‌سازی زمان اجرا ارائه شده ایجاد می‌کند.

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

افزونه InjectManifest

می‌توانید افزونه InjectManifest را به پیکربندی بسته وب خود اضافه کنید:

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      swSrc: '...',
    }),
  ],
};

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

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

اطلاعات اضافی

راهنمایی در مورد استفاده از افزونه ها در زمینه ساخت بسته وب بزرگتر را می توان در بخش « برنامه وب پیشرو » از اسناد وب پک یافت.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new GenerateSW({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
});