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

कई सामान्य पैटर्न, खास तौर पर रूटिंग और कैश मेमोरी में सेव करना में शामिल हैं. इन्हें बाद में इस्तेमाल की जा सकने वाली रेसिपी में शामिल किया जा सकता है. 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, और वेब वर्कर के अनुरोधों का जवाब stale- देते-फिर से पुष्टि करें रणनीति की मदद से देता है. साथ ही, इमेज के अनुरोधों को कैश पहले रणनीति की मदद से जवाब देता है, Google फ़ॉन्ट को ठीक से कैश मेमोरी में सेव करता है, और पेज के अनुरोधों के लिए ऑफ़लाइन फ़ॉलबैक देता है. यह सब कुछ इस तरह किया जा सकता है:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

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

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

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

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

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

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)