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

مع إعداد "مربع العمل" هذا:

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 إلى Workbox-cli

سيجد المطوّرون الذين يستخدمون واجهة سطر أوامر 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

من وحدة node sw-precache إلى وحدة node workbox-build

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

تتطابق دالة generateSW() في الوحدة workbox-build بشكلٍ وثيق مع دالة write() في الوحدة sw-precache. يتمثل أحد الاختلافات الرئيسية في أنّ دالة generateSW() تُعرِض دائمًا وعدًا، في حين كانت دالة write() القديمة تتيح كلاً من ردّ الاتصال وواجهة مستندة إلى الوعد.

استخدام 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 يتكامل مباشرةً مع عملية إنشاء webpack و "يعرف" جميع مواد العرض التي تم إنشاؤها من خلال عملية تجميع معيّنة. وهذا يعني أنّه في العديد من حالات الاستخدام، يمكنك الاعتماد على السلوك التلقائي لواجهة 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.