वर्कबॉक्स की रेसिपी

रूटिंग और कैश मेमोरी से जुड़े कई सामान्य पैटर्न, इतने सामान्य हैं कि उन्हें फिर से इस्तेमाल की जा सकने वाली रेसिपी में स्टैंडर्ड किया जा सकता है. workbox-recipes, इन्हें आसानी से इस्तेमाल किए जा सकने वाले पैकेज के तौर पर उपलब्ध कराता है. इससे आपको यह तय करने में मदद मिलती है कि ज़रूरत के हिसाब से सर्विस वर्कर काम कर रहे हैं या नहीं.

रेसिपी

हर रेसिपी में कई Workbox मॉड्यूल को एक साथ जोड़ा जाता है और उन्हें आम तौर पर इस्तेमाल किए जाने वाले पैटर्न में बंडल किया जाता है. यहां दी गई रेसिपी में, इस मॉड्यूल का इस्तेमाल करते समय इस्तेमाल की जाने वाली रेसिपी और इसके पीछे इस्तेमाल किया जा रहा मिलता-जुलता पैटर्न दिखेगा. अगर आपको इसे खुद लिखना है, तो यह जानकारी देखें.

ऑफ़लाइन फ़ॉलबैक

ऑफ़लाइन फ़ॉलबैक रेसिपी की मदद से, आपके सर्विस वर्कर को वेब पेज, इमेज या फ़ॉन्ट दिखाने की अनुमति मिलती है. ऐसा तब होता है, जब इनमें से किसी एक के लिए रूटिंग में गड़बड़ी होती है. उदाहरण के लिए, जब कोई उपयोगकर्ता ऑफ़लाइन हो और कैश मेमोरी में कोई हिट न हो. Workbox Recipes के 6.1.0 वर्शन में, पहले से कैश मेमोरी में सेव करने की सुविधा का इस्तेमाल करके, इन आइटम को कैश मेमोरी में सेव करने की ज़रूरत को हटा दिया गया है. पुराने वर्शन के साथ काम करने के लिए, यह अपने कैश मेमोरी में सेव करने की कोशिश करने से पहले, पहले से कैश मेमोरी में सेव किए गए आइटम खोजेगा.

डिफ़ॉल्ट रूप से, यह रेसिपी यह मानती है कि फ़ॉलबैक पेज offline.html है और कोई इमेज या फ़ॉन्ट फ़ॉलबैक नहीं है. कॉन्फ़िगरेशन के सभी विकल्पों की सूची के लिए, ऑफ़लाइन फ़ॉलबैक विकल्प देखें.

ऑफ़लाइन फ़ॉलबैक सिर्फ़ तब लागू होगा, जब किसी अनुरोध के लिए मैच करने वाला रास्ता मौजूद हो. अगर ऑफ़लाइन फ़ॉलबैक रेसिपी का इस्तेमाल अपने-आप किया जा रहा है, तो आपको खुद रूट बनाने होंगे. ऐसा करने का सबसे आसान तरीका यह है कि setDefaultHandler() तरीके का इस्तेमाल करके, ऐसा रूट बनाएं जो सभी अनुरोधों पर NetworkOnly रणनीति लागू करता हो. इसके बारे में यहां बताया गया है. अन्य रेसिपी, जैसे कि पेज की कैश मेमोरी, स्टैटिक रिसॉर्स कैश या इमेज कैश, अपनी-अपनी कैश मेमोरी के लिए रूट सेट अप करती हैं. ऑफ़लाइन फ़ॉलबैक और इनमें से किसी एक रेसिपी का इस्तेमाल करते समय, setDefaultHandler() की ज़रूरत नहीं होती.

रेसिपी

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

पैटर्न

import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;

setDefaultHandler(new NetworkOnly());

self.addEventListener('install', event => {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-offline-fallbacks')
      .then(cache => cache.addAll(files))
  );
});

const handler = async options => {
  const dest = options.request.destination;
  const cache = await self.caches.open('workbox-offline-fallbacks');

  if (dest === 'document') {
    return (await cache.match(pageFallback)) || Response.error();
  }

  if (dest === 'image' && imageFallback !== false) {
    return (await cache.match(imageFallback)) || Response.error();
  }

  if (dest === 'font' && fontFallback !== false) {
    return (await cache.match(fontFallback)) || Response.error();
  }

  return Response.error();
};

setCatchHandler(handler);

वॉर्म कैश मेमोरी

कैश मेमोरी में डेटा सेव करने की रणनीति की मदद से, सेवा वर्कर के install चरण के दौरान दिए गए यूआरएल को कैश मेमोरी में लोड किया जा सकता है. साथ ही, उन्हें दी गई रणनीति के विकल्पों के साथ कैश मेमोरी में सेव किया जा सकता है. अगर आपको उन खास यूआरएल की जानकारी है जिन्हें कैश मेमोरी में सेव करना है, किसी रूट या ऐसी ही दूसरी जगहों के कैश मेमोरी को गर्म करना है, तो पहले से कैश मेमोरी में सेव करने के विकल्प के तौर पर इसका इस्तेमाल किया जा सकता है.

कॉन्फ़िगरेशन के सभी विकल्पों की सूची के लिए, बेहतर रणनीति की कैश मेमोरी के विकल्प देखें.

रेसिपी

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

warmStrategyCache({urls, strategy});

पैटर्न

import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

self.addEventListener('install', event => {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const done = urls.map(
    path =>
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

  event.waitUntil(Promise.all(done));
});

पेज की कैश मेमोरी

पेज कैश मेमोरी की रेसिपी आपके सर्विस वर्कर को नेटवर्क फ़र्स्ट की कैश मेमोरी में सेव करने की रणनीति के साथ एचटीएमएल पेज के अनुरोध का जवाब देने की अनुमति देती है. आम तौर पर, इसकी मदद से कैश फ़ॉलबैक को 4.0 सेकंड से कम के सबसे बड़े कॉन्टेंटफ़ुल पेंट स्कोर के लिए तुरंत उपलब्ध कराया जा सकता है.

डिफ़ॉल्ट रूप से, यह रेसिपी मानती है कि नेटवर्क का टाइम आउट तीन सेकंड होना चाहिए. साथ ही, warmCache विकल्प के ज़रिए कैश मेमोरी में डेटा गर्म करने की सुविधा काम करती है. कॉन्फ़िगरेशन के सभी विकल्पों की सूची के लिए, पेज कैश के विकल्प देखें.

रेसिपी

import {pageCache} from 'workbox-recipes';

pageCache();

पैटर्न

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

स्टैटिक रिसॉर्स कैश

स्टैटिक रिसॉर्स कैश मेमोरी की रेसिपी की मदद से, आपका सेवा वर्कर स्टैटिक रिसॉर्स के अनुरोध का जवाब दे सकता है. खास तौर पर, कैश मेमोरी में सेव किए गए डेटा की फिर से पुष्टि करते समय, उसे अपडेट न किया जाए कैश मेमोरी की रणनीति का इस्तेमाल करके, सीएसएस, JavaScript, और वेब वर्कर के अनुरोधों का जवाब दिया जा सकता है. इससे, उन एसेट को कैश मेमोरी से तुरंत दिखाया जा सकता है और बैकग्राउंड में अपडेट किया जा सकता है

यह रेसिपी warmCache विकल्प की मदद से, कैश मेमोरी को गर्म करने की सुविधा देती है. कॉन्फ़िगरेशन के सभी विकल्पों की सूची के लिए, स्टैटिक रिसॉर्स कैश मेमोरी के विकल्प देखें.

रेसिपी

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

पैटर्न

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cacheName = 'static-resources';
const matchCallback = ({request}) =>
  // CSS
  request.destination === 'style' ||
  // JavaScript
  request.destination === 'script' ||
  // Web Workers
  request.destination === 'worker';

registerRoute(
  matchCallback,
  new StaleWhileRevalidate({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

इमेज कैश

इमेज कैश मेमोरी से जुड़ी रेसिपी की मदद से, आपके सेवा वर्कर को इमेज के लिए किए गए अनुरोध का जवाब देने में मदद मिलती है. इसके लिए, कैश मेमोरी में इमेज को पहले से कैश मेमोरी में सेव करें रणनीति का इस्तेमाल किया जाता है. इससे, इमेज कैश मेमोरी में सेव होने के बाद, उपयोगकर्ता को उनके लिए फिर से अनुरोध करने की ज़रूरत नहीं पड़ती.

डिफ़ॉल्ट रूप से, यह रेसिपी ज़्यादा से ज़्यादा 60 इमेज को कैश मेमोरी में सेव करती है. हर इमेज 30 दिनों तक सेव रहती है. साथ ही, warmCache विकल्प का इस्तेमाल करके कैश मेमोरी में गर्म करने की सुविधा काम करती है. कॉन्फ़िगरेशन के सभी विकल्पों की सूची के लिए, इमेज कैश मेमोरी के विकल्प देखें.

रेसिपी

import {imageCache} from 'workbox-recipes';

imageCache();

पैटर्न

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;

registerRoute(
  matchCallback,
  new CacheFirst({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
      }),
    ],
  })
);

Google Fonts कैश मेमोरी

Google Fonts की रेसिपी, Google Fonts के अनुरोध के दो हिस्सों को कैश मेमोरी में सेव करती है:

• @font-face परिभाषाओं वाली स्टाइलशीट, जो फ़ॉन्ट फ़ाइलों से लिंक होती है.
• बदलाव की गई स्टैटिक फ़ॉन्ट फ़ाइलें.

स्टाइलशीट में अक्सर बदलाव हो सकते हैं. इसलिए, कैश मेमोरी में स्टाइलशीट को सेव करने के लिए, 'कैश मेमोरी में सेव की गई स्टाइलशीट को फिर से पुष्टि करने के दौरान, उसे अपडेट किया जा सकता है' रणनीति का इस्तेमाल किया जाता है. दूसरी ओर, फ़ॉन्ट फ़ाइलों में कोई बदलाव नहीं होता और पहले कैश करें रणनीति का फ़ायदा लिया जा सकता है.

यह तरीका, डिफ़ॉल्ट रूप से ज़्यादा से ज़्यादा 30 फ़ॉन्ट फ़ाइलों को कैश मेमोरी में सेव करता है. हर फ़ाइल को एक साल के लिए सेव किया जाता है. कॉन्फ़िगरेशन के सभी विकल्पों की सूची के लिए, Google Fonts कैश मेमोरी के विकल्प देखें.

रेसिपी

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

पैटर्न

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;

registerRoute(
  ({url}) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: sheetCacheName,
  })
);

// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
  ({url}) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: fontCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds,
        maxEntries,
      }),
    ],
  })
);

तुरंत इस्तेमाल करना

सभी रेसिपी को एक साथ जोड़ने से, एक ऐसा सेवा वर्कर बनेगा जो पेज के अनुरोधों का जवाब, नेटवर्क पहले कैश मेमोरी से जुड़ी रणनीति के साथ देगा. साथ ही, सीएसएस, JavaScript, और वेब वर्कर के अनुरोधों का जवाब, पुरानी-जबकि-फिर से पुष्टि करें रणनीति के साथ देगा. इसके अलावा, इमेज के अनुरोधों का जवाब, पहले कैश मेमोरी रणनीति के साथ देगा. साथ ही, Google फ़ॉन्ट को सही तरीके से कैश मेमोरी में सेव करेगा और पेज के अनुरोधों के लिए ऑफ़लाइन फ़ॉलबैक उपलब्ध कराएगा. यह सब इन तरीकों से किया जा सकता है:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

टाइप

GoogleFontCacheOptions

प्रॉपर्टी

• cachePrefix

  स्ट्रिंग ज़रूरी नहीं

• maxAgeSeconds

  नंबर वैकल्पिक

• maxEntries

  number ज़रूरी नहीं

ImageCacheOptions

प्रॉपर्टी

• cacheName

  स्ट्रिंग ज़रूरी नहीं

• matchCallback

  RouteMatchCallback ज़रूरी नहीं

• maxAgeSeconds

  नंबर वैकल्पिक

• maxEntries

  नंबर वैकल्पिक

• प्लग इन

  WorkboxPlugin[] ज़रूरी नहीं

• warmCache

  string[] ज़रूरी नहीं

OfflineFallbackOptions

प्रॉपर्टी

• fontFallback

  स्ट्रिंग ज़रूरी नहीं

• imageFallback

  स्ट्रिंग ज़रूरी नहीं

• pageFallback

  स्ट्रिंग ज़रूरी नहीं

PageCacheOptions

प्रॉपर्टी

• cacheName

  स्ट्रिंग ज़रूरी नहीं

• matchCallback

  RouteMatchCallback ज़रूरी नहीं

• networkTimeoutSeconds

  नंबर वैकल्पिक

• plugins

  WorkboxPlugin[] ज़रूरी नहीं है

• warmCache

  string[] ज़रूरी नहीं

StaticResourceOptions

प्रॉपर्टी

• cacheName

  स्ट्रिंग ज़रूरी नहीं

• matchCallback

  RouteMatchCallback ज़रूरी नहीं

• प्लग इन

  WorkboxPlugin[] ज़रूरी नहीं

• warmCache

  string[] ज़रूरी नहीं

WarmStrategyCacheOptions

प्रॉपर्टी

• रणनीति वाले गेम

  रणनीति

• यूआरएल

  string[]

तरीके

googleFontsCache()

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

[Google fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts की कैश मेमोरी से जुड़ी रेसिपी को लागू करना

पैरामीटर

• विकल्प

  GoogleFontCacheOptions ज़रूरी नहीं

imageCache()

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

[image caching recipe]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images को लागू करना

पैरामीटर

• विकल्प

  ImageCacheOptions वैकल्पिक

offlineFallback()

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

[comcomensive फ़ॉलबैक रेसिपी]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks को लागू करना. अपने प्रीकैश इंजेक्शन में फ़ॉलबैक शामिल करना न भूलें

पैरामीटर

• विकल्प

  OfflineFallbackOptions ज़रूरी नहीं

pageCache()

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

नेटवर्क टाइम आउट के साथ पेज को कैश मेमोरी में सेव करने की रेसिपी को लागू करना

पैरामीटर

• विकल्प

  PageCacheOptions वैकल्पिक

staticResourceCache()

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

[CSS और JavaScript फ़ाइलों के लिए रेसिपी]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files को लागू करना

पैरामीटर

• विकल्प

  StaticResourceOptions ज़रूरी नहीं

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

पैरामीटर

• विकल्प

  WarmStrategyCacheOptions