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-प्री-कैश माइग्रेशन

sw-precache सीएलआई से Workbox-cli तक

sw-precache कमांड लाइन इंटरफ़ेस का इस्तेमाल करने वाले डेवलपर, निर्देश को मैन्युअल तरीके से चला रहे हैं या npm scripts पर आधारित बिल्ड प्रोसेस के हिस्से के तौर पर, workbox-cli मॉड्यूल का इस्तेमाल कर पाएंगे. यह माइग्रेट करने का सबसे आसान तरीका है. workbox-cli इंस्टॉल करने से, आपको workbox नाम की बाइनरी का ऐक्सेस मिल जाएगा.

sw-precache सीएलआई को कमांड लाइन फ़्लैग या कॉन्फ़िगरेशन फ़ाइल के ज़रिए कॉन्फ़िगर करने के लिए सीएलआई का इस्तेमाल किया जा सकता है. workbox सीएलआई के लिए ज़रूरी है कि कॉन्फ़िगरेशन के सभी विकल्प, CommonJS module.exports का इस्तेमाल करके, कॉन्फ़िगरेशन फ़ाइल में दिए जाएं.

workbox सीएलआई कई मोड के साथ काम करता है. (सभी टेंप्लेट देखने के लिए, workbox --help का इस्तेमाल करें.) हालांकि, generateSW वाला मोड, sw-precache की सुविधा से सबसे ज़्यादा मेल खाता है. इसलिए,

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

को ऐसे दिखाया जा सकता है

$ workbox generateSW workbox-config.js

sw-precache नोड मॉड्यूल से Workbox-build नोड मॉड्यूल तक

sw-precache के लिए node API का इस्तेमाल करने वाले डेवलपर, workbox-build node मॉड्यूल पर स्विच करके माइग्रेट कर सकते हैं. ऐसा, gulp/Grunt वर्कफ़्लो के हिस्से के तौर पर या सिर्फ़ कस्टम 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-टूलबॉक्स से Workbox-sw पर माइग्रेट करें

अगर सीधे तौर पर sw-toolbox का इस्तेमाल किया जा रहा है (sw-precache के runtimeCaching विकल्प के ज़रिए इसका इस्तेमाल करने के बजाय), तो 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 पर समस्या का हल करके हमें बताएं.