ডেভেলপাররা যারা আগে sw-precache এবং/অথবা sw-toolbox ব্যবহার করেছেন তাদের কাছে লাইব্রেরির ওয়ার্কবক্স পরিবারে একটি সোজা আপগ্রেডের পথ রয়েছে। ওয়ার্কবক্সে আপগ্রেড করা উন্নত ডিবাগিং এবং ডেভেলপার এর্গোনমিক্স সহ একটি আধুনিক, এক্সটেনসিবল পরিষেবা কর্মীদের অভিজ্ঞতা প্রদান করবে।
আপনার বিদ্যমান কনফিগারেশন পরিবর্তন
আপনি যদি নিম্নলিখিত বিকল্পগুলির সাথে কনফিগার করা sw-precache ব্যবহার করেন, তাহলে Workbox-এ স্থানান্তরিত করার সময় আপনাকে নিম্নলিখিত পরিবর্তনগুলি বিবেচনায় নিতে হবে৷
নাম পরিবর্তন করা বিকল্প
dynamicUrlToDependencies কনফিগার প্যারামিটারের নাম পরিবর্তন করে templatedURLs করা হয়েছে।
staticFileGlobs কনফিগার পরামিতি globPatterns নামকরণ করা হয়েছে।
runtimeCaching কনফিগার প্যারামিটার অন্তর্নিহিত ওয়ার্কবক্স মডিউলগুলিতে ব্যবহৃত নামের সাথে সম্পর্কিত বিকল্পগুলির একটি আপডেট সেট নেয়। কি নামকরণ করা হয়েছে তা ব্যাখ্যা করতে, এই 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,
},
},
}],
অপসারিত বিকল্প
এক্সপ্রেস-স্টাইল ওয়াইল্ডকার্ড রুট আর সমর্থিত নয় । আপনি যদি runtimeCaching কনফিগারেশনে অথবা সরাসরি sw-toolbox এ এক্সপ্রেস-স্টাইল ওয়াইল্ডকার্ড রুট ব্যবহার করেন, ওয়ার্কবক্স ব্যবহার করার সময় একটি সমতুল্য রেগুলার এক্সপ্রেশন রুটে স্থানান্তর করুন।
sw-precache মাইগ্রেশন
sw-precache CLI থেকে workbox-cli
ডেভেলপাররা sw-precache কমান্ড লাইন ইন্টারফেস ব্যবহার করে, হয় ম্যানুয়ালি কমান্ড চালাচ্ছেন বা npm scripts -ভিত্তিক বিল্ড প্রক্রিয়ার অংশ হিসেবে, workbox-cli মডিউল ব্যবহার করে মাইগ্রেট করার সবচেয়ে সহজ উপায় খুঁজে পাবেন। workbox-cli ইনস্টল করা আপনাকে workbox নামক একটি বাইনারিতে অ্যাক্সেস দেবে।
যদিও sw-precache CLI কমান্ড লাইন ফ্ল্যাগ বা কনফিগারেশন ফাইলের মাধ্যমে কনফিগার করতে সমর্থিত , workbox CLI-এর জন্য CommonJS module.exports ব্যবহার করে কনফিগারেশন ফাইলে সমস্ত কনফিগারেশন বিকল্প সরবরাহ করা প্রয়োজন।
workbox CLI বিভিন্ন মোড সমর্থন করে। ( workbox --help সবগুলো দেখতে।) কিন্তু যে মোডটি sw-precache এর কার্যকারিতার সাথে সবচেয়ে ঘনিষ্ঠভাবে মেলে তা হল generateSW । তাই একটি কল
$ sw-precache --config='sw-precache-config.js'
হিসাবে প্রকাশ করা যেতে পারে
$ workbox generateSW workbox-config.js
sw-precache নোড মডিউল থেকে ওয়ার্কবক্স-বিল্ড নোড মডিউল পর্যন্ত
ডেভেলপাররা sw-precache এর জন্য node API ব্যবহার করে, হয় একটি gulp / Grunt ওয়ার্কফ্লো-এর অংশ হিসেবে অথবা কাস্টম node বিল্ড স্ক্রিপ্টের মধ্যে, workbox-build node মডিউলে স্যুইচ করে মাইগ্রেট করতে পারে।
workbox-build মডিউলের generateSW() ফাংশনটি সবচেয়ে ঘনিষ্ঠভাবে sw-precache মডিউলের write() ফাংশনের সাথে মেলে। একটি মূল পার্থক্য হল যে 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 ওয়েবপ্যাক প্লাগইন পর্যন্ত
ডেভেলপাররা তাদের ওয়েবপ্যাক তৈরির প্রক্রিয়ার অংশ হিসেবে sw-precache-webpack-plugin ব্যবহার করে workbox-webpack-plugin মডিউলের মধ্যে GenerateSW ক্লাসে স্যুইচ করে মাইগ্রেট করতে পারে।
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- টুলবক্স মাইগ্রেশন
হাতে তৈরি sw-toolbox থেকে workbox-sw-এ স্থানান্তর করুন
আপনি যদি সরাসরি sw-toolbox ব্যবহার করে থাকেন ( sw-precache এর runtimeCaching বিকল্পের মাধ্যমে এটি ব্যবহার করার পরিবর্তে), তাহলে ওয়ার্কবক্সে স্থানান্তর করার জন্য সমতুল্য আচরণ পেতে কিছু ম্যানুয়াল সামঞ্জস্য প্রয়োজন। আরও প্রসঙ্গের জন্য, 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;
এই ওয়ার্কবক্স কোডের সমতুল্য:
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());
সাহায্য পাচ্ছি
আমরা আশা করি ওয়ার্কবক্সে বেশিরভাগ স্থানান্তর সহজ হবে। আপনি যদি এই নির্দেশিকায় কভার না করা সমস্যার সম্মুখীন হন, তাহলে অনুগ্রহ করে GitHub-এ একটি সমস্যা খোলার মাধ্যমে আমাদের জানান।