مهاجرت از sw-precache یا sw-toolbox، مهاجرت از sw-precache یا sw-toolbox

توسعه‌دهندگانی که قبلاً از sw-precache و/یا sw-toolbox استفاده کرده‌اند، مسیر ارتقای ساده‌ای به کتابخانه‌های خانواده Workbox دارند. ارتقاء به Workbox یک تجربه خدمتکار مدرن و توسعه‌یافته با بهبود اشکال‌زدایی و ارگونومی توسعه‌دهنده ارائه می‌دهد.

تغییرات در پیکربندی موجود شما

اگر از sw-precache استفاده می‌کنید که با هر یک از گزینه‌های زیر پیکربندی شده است، باید تغییرات زیر را هنگام انتقال به Workbox در نظر بگیرید.

گزینه های تغییر نام یافته

پارامتر پیکربندی dynamicUrlToDependencies به templatedURLs تغییر نام داده است.

پارامتر پیکربندی staticFileGlobs به globPatterns تغییر نام داده است.

پارامتر پیکربندی runtimeCaching مجموعه‌ای از گزینه‌های به‌روز شده را می‌گیرد که مربوط به نام‌های مورد استفاده در ماژول‌های Workbox است. برای نشان دادن چیزی که تغییر نام داده است، این پیکربندی sw-precache :

runtimeCaching: [{
  urlPattern: /api/,
  handler: 'fastest',
  options: {
    cache: {
      name: 'my-api-cache',
      maxEntries: 5,
      maxAgeSeconds: 60,
    },
  },
}],

معادل این پیکربندی Workbox است:

runtimeCaching: [{
  urlPattern: /api/,
  // 'fastest' is now 'StaleWhileRevalidate'
  handler: 'StaleWhileRevalidate',
  options: {
    // options.cache.name is now options.cacheName
    cacheName: 'my-api-cache',
    // options.cache is now options.expiration
    expiration: {
      maxEntries: 5,
      maxAgeSeconds: 60,
    },
  },
}],

گزینه های منسوخ شده

مسیرهای عام به سبک اکسپرس دیگر پشتیبانی نمی شوند. اگر از مسیرهای حروف عام به سبک Express در پیکربندی runtimeCaching یا مستقیماً در sw-toolbox استفاده می‌کردید، هنگام استفاده از Workbox به یک مسیر عبارت معمولی معادل مهاجرت کنید.

مهاجرت های sw-precache

از sw-precache CLI تا workbox-cli

توسعه دهندگانی که از رابط خط فرمان sw-precache استفاده می کنند، چه فرمان را به صورت دستی یا به عنوان بخشی از فرآیند ساخت مبتنی بر npm scripts اجرا می کنند، استفاده از ماژول workbox-cli را ساده ترین راه برای مهاجرت می دانند. نصب workbox-cli به شما امکان دسترسی به یک باینری به نام workbox را می دهد.

در حالی که sw-precache CLI از پیکربندی از طریق پرچم‌های خط فرمان یا یک فایل پیکربندی پشتیبانی می‌کند ، CLI workbox نیاز دارد که همه گزینه‌های پیکربندی در یک فایل پیکربندی با استفاده از CommonJS module.exports ارائه شوند.

workbox CLI از تعدادی حالت مختلف پشتیبانی می کند. (از workbox --help برای دیدن همه آنها استفاده کنید.) اما حالتی که بیشتر با عملکرد sw-precache مطابقت دارد generateSW است. بنابراین یک تماس به

$ sw-precache --config='sw-precache-config.js'

را می توان به صورت بیان کرد

$ workbox generateSW workbox-config.js

از ماژول گره sw-precache گرفته تا ماژول گره ساخت جعبه کاری

توسعه‌دهندگانی که از node API برای sw-precache استفاده می‌کنند، چه به‌عنوان بخشی از یک گردش کار gulp / Grunt یا فقط در یک اسکریپت ساخت node سفارشی، می‌توانند با جابجایی به ماژول node workbox-build مهاجرت کنند.

تابع generateSW() ماژول workbox-build بیشترین تطابق را با تابع write() ماژول sw-precache دارد. یک تفاوت کلیدی این است که generateSW() همیشه یک Promise را برمی گرداند، در حالی که تابع write() قدیمی هم از یک callback و هم یک رابط مبتنی بر Promise پشتیبانی می کند.

استفاده gulp در امتداد خطوط

const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
  return swPrecache.write('service-worker.js', {
    // Config options.
  });
});

قابل تغییر است به

const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
  return workboxBuild.generateSW({
    // Config options.
  });
});

از پلاگین sw-precache-webpack-plugin تا افزونه Workbox webpack

توسعه دهندگانی که از پلاگین sw-precache-webpack-plugin به عنوان بخشی از فرآیند ساخت پک وب خود استفاده می کنند، می توانند با جابجایی به کلاس GenerateSW در ماژول workbox-webpack-plugin مهاجرت کنند.

workbox-webpack-plugin مستقیماً با فرآیند ساخت پک وب ادغام می‌شود و در مورد تمام دارایی‌های تولید شده توسط یک کامپایل مشخص می‌داند. این بدان معناست که برای بسیاری از موارد استفاده، می‌توانید به رفتار پیش‌فرض workbox-webpack-plugin بدون پیکربندی اضافی تکیه کنید و یک سرویس‌کار معادل با آنچه sw-precache-webpack-plugin ارائه می‌دهد دریافت کنید.

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
  // ...
  plugins: [
    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'service-worker.js',
    }),
  ],
};

قابل تغییر به

const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
  // ...
  plugins: [
    new GenerateSW({
      // Config options, if needed.
    }),
  ],
};

مهاجرت های sw-toolbox

از جعبه ابزار دست ساز sw به workbox-sw مهاجرت کنید

اگر مستقیماً از sw-toolbox استفاده می کردید (به جای استفاده ضمنی از طریق گزینه runtimeCaching sw-precache )، پس انتقال به Workbox به تنظیمات دستی نیاز دارد تا رفتار معادل را به دست آورد. برای زمینه بیشتر، مطالعه مستندات مربوط به ماژول‌های workbox-routing و ماژول‌های workbox-strategies می‌تواند به ارائه زمینه بیشتر کمک کند.

در اینجا چند قطعه کد برای کمک به هدایت مهاجرت آورده شده است. این کد sw-toolbox :

importScripts('path/to/sw-toolbox.js');

// Set up a route that matches HTTP 'GET' requests.
toolbox.router.get(
  // Match any URL that contains 'ytimg.com', regardless of
  // where in the URL that match occurs.
  /\.ytimg\.com\//,

  // Apply a cache-first strategy to anything that matches.
  toolbox.cacheFirst,

  {
    // Configure a custom cache name and expiration policy.
    cache: {
      name: 'youtube-thumbnails',
      maxEntries: 10,
      maxAgeSeconds: 30,
    },
  }
);

// Set a default network-first strategy to use when
// there is no explicit matching route:
toolbox.router.default = toolbox.networkFirst;

معادل این کد Workbox است:

importScripts('path/to/workbox-sw.js');

workbox.routing.registerRoute(
  // Match any URL that contains 'ytimg.com'.
  // Unlike in sw-toolbox, in Workbox, a RegExp that matches
  // a cross-origin URL needs to include the initial 'https://'
  // as part of the match.
  new RegExp('^https://.*.ytimg.com'),

  // Apply a cache-first strategy to anything that matches.
  new workbox.strategies.CacheFirst({
    // Configuration options are passed in to the strategy.
    cacheName: 'youtube-thumbnails',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
        maxAgeSeconds: 30,
      }),
      // In Workbox, you must explicitly opt-in to caching
      // responses with a status of 0 when using the
      // cache-first strategy.
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

// Set a default network-first strategy to use when
// there is no explicit matching route:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());

کمک گرفتن

ما پیش‌بینی می‌کنیم که بیشتر مهاجرت‌ها به Workbox ساده باشد. اگر با مشکلاتی مواجه شدید که در این راهنما پوشش داده نشده است، لطفاً با باز کردن مشکلی در GitHub به ما اطلاع دهید.