يتوفّر لدى المطوِّرين الذين سبق لهم استخدام 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.