वर्कबॉक्स-कैशेबल-रिस्पॉन्स

रनटाइम के दौरान ऐसेट को कैश मेमोरी में सेव करते समय, इस बात का कोई एक ही नियम नहीं होता कि दिया गया रिस्पॉन्स "मान्य" है और उसे सेव किया जा सकता है या दोबारा इस्तेमाल किया जा सकता है.

workbox-cacheable-response मॉड्यूल एक स्टैंडर्ड तरीका है जिससे यह तय किया जा सकता है कि किसी रिस्पॉन्स को उसके संख्या वाले स्टेटस कोड के आधार पर कैश मेमोरी में सेव किया जाना चाहिए या नहीं, किसी खास वैल्यू वाले हेडर की मौजूदगी या दोनों के कॉम्बिनेशन के आधार पर.

स्थिति कोड के आधार पर कैश मेमोरी में सेव करना

किसी रणनीति के plugins पैरामीटर में CacheableResponsePlugin इंस्टेंस जोड़कर, स्टेटस कोड के किसी सेट को कैश मेमोरी में सेव करने के लिए, Workbox की रणनीति को कॉन्फ़िगर किया जा सकता है:

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

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

यह कॉन्फ़िगरेशन Workbox को बताता है कि https://third-party.example.com/images/ के अनुरोधों के रिस्पॉन्स प्रोसेस करते समय, किसी भी अनुरोध को 0 या 200 के स्टेटस कोड के साथ कैश मेमोरी में सेव करें.

हेडर के आधार पर कैश मेमोरी में सेव करना

प्लग इन बनाते समय headers ऑब्जेक्ट सेट करके, कैश में जोड़े जाने के आधार पर किसी हेडर वैल्यू की मौजूदगी की जांच करने के लिए, Workbox की रणनीति कॉन्फ़िगर करें:

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

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

/path/to/api/ वाले अनुरोध के यूआरएल के रिस्पॉन्स प्रोसेस करते समय, X-Is-Cacheable नाम का हेडर देखें. इसे सर्वर, रिस्पॉन्स में जोड़ देगा. अगर हेडर मौजूद है और उसकी वैल्यू 'सही' पर सेट है, तो रिस्पॉन्स को कैश मेमोरी में सेव किया जा सकता है.

अगर एक से ज़्यादा हेडर दिए गए हैं, तो सिर्फ़ एक हेडर को इससे जुड़ी वैल्यू से मैच करना होगा.

हेडर और स्टेटस कोड के आधार पर कैश मेमोरी में सेव करना

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

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

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

डिफ़ॉल्ट विकल्प क्या हैं?

अगर cacheableResponse.CacheableResponsePlugin को साफ़ तौर पर कॉन्फ़िगर किए बिना Workbox की बिल्ट-इन रणनीतियों में से किसी एक का इस्तेमाल किया जाता है, तो नीचे दिए गए डिफ़ॉल्ट मानदंड का इस्तेमाल यह तय करने के लिए किया जाता है कि नेटवर्क से मिलने वाले रिस्पॉन्स को कैश मेमोरी में सेव किया जाना चाहिए या नहीं:

• पुरानी पद्धति से डेटा को फिर से पुष्टि करना और networkFirst: 0 (यानी अपारदर्शिता वाले जवाब) या 200 की स्थिति वाले जवाबों को कैश मेमोरी में सेव किया जा सकता है.
• cacheFirst: 200 स्थिति वाले जवाबों को कैश मेमोरी में सेव किया जा सकता है.

डिफ़ॉल्ट रूप से, रिस्पॉन्स हेडर का इस्तेमाल कैश मेमोरी तय करने के लिए नहीं किया जाता है.

अलग-अलग डिफ़ॉल्ट क्यों हैं?

डिफ़ॉल्ट रूप से इस बात पर फ़र्क़ होता है कि 0 (जैसे कि ओपेक रिस्पॉन्स) वाले रिस्पॉन्स, कैश मेमोरी में सेव होंगे या नहीं. "ब्लैक बॉक्स", ओपेक रिस्पॉन्स में होने की वजह से, सर्विस वर्कर के लिए यह जानना संभव नहीं होता कि रिस्पॉन्स मान्य है या क्रॉस-ऑरिजिन सर्वर से मिले गड़बड़ी के रिस्पॉन्स को दिखाया जा रहा है या नहीं.

ऐसी रणनीतियों के लिए जिनमें कैश मेमोरी में सेव किए गए रिस्पॉन्स को अपडेट करने के कुछ तरीके शामिल होते हैं, जैसे स्टूडी इलाकों को अपडेट करने और NetworkFirst के लिए, अस्थायी गड़बड़ी के रिस्पॉन्स को कैश मेमोरी में सेव करने का जोखिम कम होता है. ऐसा इसलिए होता है, क्योंकि अगली बार कैश मेमोरी को अपडेट करने पर सही और काम का रिस्पॉन्स इस्तेमाल किया जाएगा.

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

बेहतर इस्तेमाल

अगर आपको Workbox रणनीति के बाहर, कैश मेमोरी में उसी लॉजिक का इस्तेमाल करना है, तो सीधे CacheableResponse क्लास को इस्तेमाल किया जा सकता है.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}