फ़ॉलबैक के जवाबों को मैनेज करना

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

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

• "इमेज मौजूद नहीं है" प्लेसहोल्डर की जगह इस्तेमाल करने का विकल्प.
• "कोई नेटवर्क कनेक्शन उपलब्ध नहीं" मानक पेज का एक एचटीएमएल विकल्प.

सिर्फ़ ऑफ़लाइन पेज

अगर आपको सिर्फ़ एक कस्टम ऑफ़लाइन एचटीएमएल पेज उपलब्ध कराना है, लेकिन कुछ और नहीं करना है, तो यह एक बेसलाइन रेसिपी है, जिसे आप अपना सकते हैं:

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

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

व्यापक फ़ॉलबैक

जब भी कोई नेटवर्क काम नहीं कर पाता है या कैश मेमोरी में सेव नहीं होती है, तो workbox-strategies की ओर से ऑफ़र की गई कैश मेमोरी की रणनीतियों को अस्वीकार कर दिया जाएगा. इससे किसी एक हैंडलर फ़ंक्शन में किसी भी तरह की गड़बड़ी से निपटने के लिए, ग्लोबल "कैच" हैंडलर सेट करने के पैटर्न को प्रमोट किया जाता है. इससे, अलग-अलग request.destination वैल्यू के लिए, अलग-अलग फ़ॉलबैक दिए जा सकते हैं.

इस उदाहरण में, workbox-recipes की warmStrategyCache रेसिपी का इस्तेमाल किया गया है. साथ ही, रनटाइम कैश मेमोरी में समय से पहले कैश मेमोरी में सेव किए गए आइटम दिखाने के लिए, कैच हैंडलर सेट करता है. हालांकि, प्रीकैशिंग फ़ॉलबैक आपके ऐप्लिकेशन के लिए बेहतर विकल्प हो सकते हैं:

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

इसके बाद, फ़ॉलबैक रिस्पॉन्स को वर्कबॉक्स के बिल्ड टूल के साथ injectManifest का इस्तेमाल करके, पहले से कैश मेमोरी में सेव किया जाता है. साथ ही, matchPrecache तरीके में कोई गड़बड़ी होने पर, इन्हें फ़ॉलबैक के तौर पर उपलब्ध कराया जाता है.

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

दूसरे फ़ॉलबैक सेटअप के इस्तेमाल का एक उदाहरण यह है कि अगर किसी पेज को समय से पहले कैश मेमोरी में सेव कर लिया गया हो, लेकिन पेज से अनुरोध की गई इमेज (या दूसरी एसेट) ठीक न हो. उपयोगकर्ता के ऑफ़लाइन होने पर भी पेज को कैश मेमोरी से पढ़ा जा सकता है. हालांकि, नेटवर्क में कोई गड़बड़ी होने पर, फ़ॉलबैक प्लेसहोल्डर या वैकल्पिक सुविधाएं दी जा सकती हैं.

रनटाइम की कैश मेमोरी को गर्म करना

वर्कबॉक्स, प्री-कैशिंग और रनटाइम कैश मेमोरी के लिए अलग-अलग कैश मेमोरी को सेव रखता है. ऐसी स्थितियां भी हो सकती हैं जिनमें आप प्री-कैशिंग पर भरोसा किए बिना, समय से पहले किसी चीज़ को कैश मेमोरी में सेव करना चाहें, क्योंकि प्रीकैश मेनिफ़ेस्ट को अपडेट करने के लिए आपको अपडेट किए गए सर्विस वर्कर को डिप्लॉय करना होगा.

रनटाइम कैश मेमोरी को एसेट की मदद से पहले ही प्राइम करने के लिए, workbox-recipes की warmStrategyCache रेसिपी का इस्तेमाल करें. हुड के तहत, यह रणनीति सर्विस वर्कर के install इवेंट में Cache.addAll को कॉल करती है.

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});

नतीजा

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