نقل البيانات من 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,
    },
  },
}],

الخيارات التي تم إيقافها نهائيًا

لم تعُد مسارات أحرف البدل التي تستخدم نمط الكتابة السريعة متاحة. إذا كنت تستخدم مسارات أحرف البدل بنمط سريع في إعدادات runtimeCaching أو مباشرةً في sw-toolbox، عليك نقل البيانات إلى مسار تعبير عادي مكافئ عند استخدام Workbox.

عمليات نقل البيانات من sw-precache

من واجهة سطر الأوامر

سيجد المطوِّرون الذين يستخدمون واجهة سطر أوامر sw-precache، إما من خلال تشغيل الأمر يدويًا أو كجزء من عملية تصميم مستندة إلى npm scripts، أن استخدام وحدة workbox-cli أسهل طريقة لنقل البيانات. سيتيح لك تثبيت workbox-cli الوصول إلى برنامج ثنائي يُسمى workbox.

على الرغم من متوافق واجهة سطر الأوامر sw-precache مع عملية الضبط من خلال علامات سطر الأوامر أو ملف إعداد، تتطلّب واجهة سطر الأوامر workbox توفير جميع خيارات الضبط في ملف الإعداد باستخدام CommonJS module.exports.

تتوافق واجهة سطر الأوامر workbox مع عدد من الأوضاع المختلفة. (يمكنك استخدام workbox --help للاطّلاع عليها جميعًا.) إنّ الوضع الأكثر تطابقًا مع وظيفة sw-precache هو generateSW. لذلك فإن المكالمة

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

يمكن التعبير عنها

$ workbox generateSW workbox-config.js

من وحدة العقدة sw-precache إلى وحدة عقدة Workbox-build

يمكن للمطوّرين الذين يستخدمون واجهة برمجة التطبيقات node لنظام التشغيل sw-precache، إما كجزء من سير العمل gulp/Grunt أو ضمن نص برمجي لإصدار node مخصص، نقل بياناتهم من خلال التبديل إلى وحدة node workbox-build.

تتطابق الدالة generateSW() في الوحدة workbox-build إلى حدّ كبير مع دالة write() في الوحدة sw-precache. يتمثل أحد الاختلافات الرئيسية في أنّ generateSW() تعرض دائمًا Promise، في حين أن دالة write() القديمة كانت تدعم كلاً من معاودة الاتصال والواجهة المستندة إلى 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-extension إلى المكوّن الإضافي 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-box

الانتقال من إطار عمل Switbox المصنوع يدويًا إلى صندوق العمل

في حال استخدام 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.