sw-precache या sw-toolbox से माइग्रेट करना

जिन डेवलपर ने पहले sw-precache और/या sw-toolbox का इस्तेमाल किया है उनके लिए, लाइब्रेरी की Workbox फ़ैमिली पर अपग्रेड करना आसान है. Workbox पर अपग्रेड करने पर, सर्विस वर्कर को बेहतर तरीके से इस्तेमाल करने का नया और बेहतर अनुभव मिलेगा. साथ ही, इन्हें बेहतर ढंग से डीबग करने और डेवलपर एर्गोनॉमिक्स का ऐक्सेस भी मिलेगा.

आपके मौजूदा कॉन्फ़िगरेशन में बदलाव

अगर आपने sw-precache को इनमें से किसी भी विकल्प के साथ कॉन्फ़िगर किया है, तो Workbox पर माइग्रेट करते समय आपको इन बदलावों को ध्यान में रखना होगा.

नाम बदले गए विकल्प

dynamicUrlToDependencies कॉन्फ़िगरेशन पैरामीटर का नाम बदलकर, templatedURLs कर दिया गया है.

staticFileGlobs कॉन्फ़िगरेशन पैरामीटर का नाम बदलकर, globPatterns कर दिया गया है.

runtimeCaching config पैरामीटर, विकल्पों का अपडेट किया गया सेट लेता है. यह सेट, 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 सीएलआई से वर्कबॉक्स-क्ली तक

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

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

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

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

को इस रूप में दिखाया जा सकता है

$ workbox generateSW workbox-config.js

sw-precache नोड मॉड्यूल से workbox-build नोड मॉड्यूल पर स्विच करना

sw-precache के लिए node एपीआई का इस्तेमाल करने वाले डेवलपर, workbox-build node मॉड्यूल पर स्विच करके माइग्रेट कर सकते हैं. ऐसा, gulp/Grunt वर्कफ़्लो के हिस्से के तौर पर या सिर्फ़ कस्टम node बिल्ड स्क्रिप्ट में किया जा सकता है.

workbox-build मॉड्यूल का generateSW() फ़ंक्शन, sw-precache मॉड्यूल के write() फ़ंक्शन से सबसे करीब से मेल खाता है. एक मुख्य अंतर यह है कि 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-plugin से Workbox वेबपैक प्लगिन तक

webpack की बिल्ड प्रोसेस के हिस्से के तौर पर 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 से वर्कबॉक्स-sw पर माइग्रेट करें

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